「アクセシビリティLT会」に参加してきました

• 2024/7/16
• https://yumemi.connpass.com/event/323801/

ゆめみのアクセシビリティの現在地と今後

• infixer(Ryo Katsuse)さん

これまでの取り組み

• 4年前から勉強会とかやり始めてた
  • 輪読会など継続的に
• 関心がある人は何かしらやっているが全体に浸透してるとはいい難い
• クライアントワークだけど作って終わりではなく運用までやってる

今後

• 小さくステップを踏んで浸透させていく

「アクセシビリティ対応」の先をみる〜「デジタルアクセシビリティアドバイザー認定試験」を受けてみた〜

• のまさん
• https://www.figma.com/deck/uVTS7a2QsZUCFy4cMwE738/%E3%80%8C%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B7%E3%83%93%E3%83%AA%E3%83%86%E3%82%A3%E5%AF%BE%E5%BF%9C%E3%80%8D%E3%81%AE%E5%85%88%E3%82%92%E3%81%BF%E3%82%8B?node-id=1-71&viewport=187%2C-20%2C0.33&t=Zu53lCUWIzE11fj5-1&scaling=min-zoom&content-scaling=fixed&page-id=0%3A1

試験

• デジタルアクセシビリティアドバイザー認定試験
  • 障害の理解
  • テクノロジーの理解
  • アクセシビリティ機能
• https://daa.ne.jp/

「アクセシビリティが低いWebアプリ」を作ってみた

• ygkn (Yugo Yagita) さん

アクセシビリティが低いアプリ

• アクセシビリティのツールを使ってみる検証用のアプリがほしかった
• ツールで検知できないものも多かった
• 「誰もが困る」と「特定の状況で困る」はグラデーション

Webサイトのアクセシビリティ検査方法について

• maddyさん

アクセシビリティ検査

• ツールがたくさんある
  • 今回はaxe devtools
• 自動ツールでは20-30%しかカバーできない
  • 手動テストが必要
• axe devtools
  • lighthouseみたいにdevtoolsから検査
  • AIを使った検査もある
    • キーボードのテストなどもできる
  • 手動テストの問題点も含んで件数管理したりできる

1週間VoiceOver生活

• Rui Okazakiさん
• https://gamma.app/docs/1VoiceOver-q8utjtcmjf8z8jw?mode=doc

VoiceOver生活

• VoiceOverのチュートリアルがあるからやっておくといい
• 難しかったこと
  • 重なったUI
    • 後ろにフォーカスあたってたり
  • 選択できない項目
  • 読み上げテキストがないボタン

アクセシブルなインクリメンタルサーチを作ってみる

• まっつーさん
• https://speakerdeck.com/ryo_manba/akusesiburunainkurimentarusatiwozuo-tutemita

インクリメンタルサーチ

• 課題
  • リアルタイムで更新される結果に気付けない
  • 検索結果が見つからなかった場合に気付けない
• 対応
  • リアルタイムで更新されると記載
  • 検索結果がなかったら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使えばいい