ゆめみのアクセシビリティの現在地と今後
- infixer(Ryo Katsuse)さん
これまでの取り組み
- 4年前から勉強会とかやり始めてた
- 輪読会など継続的に
- 関心がある人は何かしらやっているが全体に浸透してるとはいい難い
- クライアントワークだけど作って終わりではなく運用までやってる
今後
- 小さくステップを踏んで浸透させていく
「アクセシビリティ対応」の先をみる〜「デジタルアクセシビリティアドバイザー認定試験」を受けてみた〜
試験
- デジタルアクセシビリティアドバイザー認定試験
- https://daa.ne.jp/
「アクセシビリティが低いWebアプリ」を作ってみた
- ygkn (Yugo Yagita) さん
アクセシビリティが低いアプリ
- アクセシビリティのツールを使ってみる検証用のアプリがほしかった
- ツールで検知できないものも多かった
- 「誰もが困る」と「特定の状況で困る」はグラデーション
Webサイトのアクセシビリティ検査方法について
- maddyさん
アクセシビリティ検査
- ツールがたくさんある
- 今回はaxe devtools
- 自動ツールでは20-30%しかカバーできない
- 手動テストが必要
- axe devtools
- lighthouseみたいにdevtoolsから検査
- AIを使った検査もある
- キーボードのテストなどもできる
- 手動テストの問題点も含んで件数管理したりできる
1週間VoiceOver生活
VoiceOver生活
- VoiceOverのチュートリアルがあるからやっておくといい
- 難しかったこと
- 重なったUI
- 後ろにフォーカスあたってたり
- 選択できない項目
- 読み上げテキストがないボタン
- 重なったUI
アクセシブルなインクリメンタルサーチを作ってみる
インクリメンタルサーチ
- 課題
- リアルタイムで更新される結果に気付けない
- 検索結果が見つからなかった場合に気付けない
- 対応
- リアルタイムで更新されると記載
- 検索結果がなかったらlive-reagionで伝える
- 検索結果にlive-reasion使うと読まれすぎて使いづらい
visually-hidden を使おう
- fastmanさん
visually-hidden
- 視覚的には非表示にするが支援技術には認識させるためのテクニック
display: noneだとアクセシビリティツリーからも消えるのでダメ- ボタンに
aria-labelよりvisually-hiddenの方がいい？- 自動翻訳の観点で
Next.jsにおけるLazy Loading
- いまいまいさん
Lazy Loading
- 遅れて読み込むことで初期表示を速くする
next/dynamicを使って動的インポート- 読込中に表示するfallbackを指定できる
- Suspenseも使える
- ServerComponentなら単にSuspense使えばいい
