最速[要出典]アクセシビリティチェック

「アクセシビリティやるぞ！LT祭り ~ 名古屋出張編 ~ at SmartHR東海支社」での登壇資料です。

合わせて読みたい：
https://zenn.dev/ymrl/articles/246b68dc67ffda
https://momdo.hatenablog.jp/entry/20240907/1725711846

Transcript

1. 　 最速 [要出典] アクセシビリティチェック Rikiya Ihara @magi1125
2. 　 2 伊原 力也 Rikiya Ihara @magi1125 https://webapp-a11y.com
4. 4 アクセシビリティチェックを最速で終わらせたい • チェック自体は早く終わらせ、問題の改善・防止・消滅に時間を使いたい • 「時間がかかる→腰が重くなる→チェックしなくなる」を防ぎたい
5. 5 前提 • 「WebサイトをWCAG2.2 レベルAAでチェック」をイメージしています ◦ 対象・目的・状況によってやり方は異なるはず • あくまで私なりのやりかたです ◦ 「自分はこうやる」をぜひ#a11yfesやブログに書いて欲しい！読みたいです
6. 　 最速[要出典] アクセシビリティチェックの手順
7. 7 1. 準備する ◦ おおもとの基準を確認する ◦ チェック結果記録シートを作る ◦ 自動チェッカーを掛ける 2. 部分的なところから確認する ◦ 動画/音声・フォームの存在確認 ◦ あんまりやらない系の存在確認 ◦ 部分的に出現するものをチェック ◦ 共通部分＆横断部分をチェック 3. 達成基準単位で見る ◦ 複数の達成基準を一緒に見る ◦ ツールで手動チェックを補助する ◦ マークアップ系の手動確認 手順
8. 　 1. 準備する
9. 9 おおもとの基準を確認する • WCAG 2.0/2.1/2.2 の A/AA/AAAのどれで見るかで工数は変わる ◦ WCAG 2.0 レベルA：25項目 ◦ WCAG 2.2 レベルAAA：86項目 • 「いちおう見る」をやると工数は増える ◦ 「AAが基準だけどAAAもいちおう見る」 ◦ 「WCAG 2.0（≒JIS）が基準だけど2.1/2.2もいちおう見る」
10. 10 チェック結果記録シートを作る 行：ページ(画面)、列：達成基準 参考：情報アクセシビリティ自己評価様式 試験結果 ubie.app.xlsx
11. 11 チェック結果記録シートを作る 達成基準単位の課題一覧シート
12. 12 チェック結果記録シートを作る COB-CHA も捗る
13. 13 自動チェッカーを掛ける • 判定できる達成基準は一部だが、「あきらかにNG」の箇所が先にわかると 今後の手動チェックが進めやすくなる ◦ axe DevToolsを用いたチェック実施方法の例 ▪ コントラスト、代替テキスト、Accessible Name、見出しレベル、 lang属性、ランドマーク、フォームラベルが確認できる ▪ ウェブアクセシビリティ検証ツール「axe」を用いた自動テスト実行スクリプト ◦ Markuplint ◦ Nu Html Checker
14. 　 2. 部分的なところから確認する
15. 15 動画/音声・フォームの存在確認 対象画面に以下が出現するかを確認、無いなら「該当なし」にする ※存在するなら後でちゃんと見る • 動画や音声が無いなら「該当なし」 ◦ 1.2.1 音声のみ及び映像のみ、1.2.2 キャプション、 1.2.3 音声解説、又はメディアに対する代替、1.2.4 キャプション (ライブ） 1.2.5 音声解説 (収録済)、1.4.2 音声の制御 • フォームが無いなら「該当なし」 ◦ 1.3.5 入力目的の特定、3.2.2 入力時、3.3.1 エラーの特定、 3.3.2 ラベル又は説明、3.3.3 エラー修正の提案、 3.3.4 誤り防止 (法的、金融、データ)、3.3.7 冗長な入力項目、 3.3.8 アクセシブルな認証 (最低限)
16. 16 あんまりやらない系の存在確認 デザイナーや実装者に確認し、存在しないことが確実なら「該当なし」にする ※存在するなら後でちゃんと見る • 作ってないなら「該当なし」 ◦ 1.3.4 表示の向き、2.1.4 文字キーのショートカット、2.5.4 動きによる起動、 2.5.7 ドラッグ動作、2.5.1 ポインタのジェスチャ • 無いことが多い系（やや注意） ◦ 2.5.2 ポインタのキャンセル： ネイティブのaやbuttonなら自動で達成。 touchstart/mousedownでの発火は基本やらないはず（が、諸説ある） ◦ 2.3.1 3回の閃光： 一般的な情報サイトでは閃光させないが、動画には注意
17. 17 部分的に出現するものをチェック 下記の存在に目星をつけ、手動で操作して確認。そこ以外は「該当なし」にする • ホバーで追加表示する箇所（例：ナビゲーションやツールチップ） ◦ 1.4.13 ホバー又はフォーカスで表示されるコンテンツ • 画面内の他の要素にかぶさる箇所（例：固定ヘッダやメニュー） ◦ 2.4.11 隠されないフォーカス • 意図的にフォーカストラップする箇所（例：ダイアログ） ◦ 2.1.2 キーボードトラップなし • 自動で切り替わるものがある箇所（例：カルーセルなど） ◦ 2.2.1 タイミング調整可能 および 2.2.2 一時停止、停止、非表示 • 画面を書き換えずに通知する箇所（例：アクション結果、待機状態、進捗、エラー） ◦ 4.1.3 ステータスメッセージ
18. 18 共通部分＆横断部分をチェック • 共通コンポーネント部分（ナビゲーション、ヘッダ、フッタなど）をチェック • 同時に、複数画面に関わる基準をチェック ◦ 2.4.5 複数の手段、3.2.3 一貫したナビゲーション、 3.2.4 一貫した識別性、3.2.6 一貫したヘルプ • 以下もテンプレートをチェック ◦ 1.4.4 テキストのサイズ変更： ズーム禁止meta要素の有無 ◦ 3.1.1 ページの言語： html要素のlang属性の確認
19. 　 3. 達成基準単位で見る
20. 20 達成基準の番号はチェックしやすさと無関係 サイト単位で見る場合、画面ごとに番号順に見ていくのは合理的ではない ✕
21. 21 達成基準単位で複数画面を見る コンテキストスイッチが減るし、チェックツールの切り替えも要らず、分担もしやすい ◦
22. 22 複数の達成基準を一緒に見る • 1.4.5 文字画像＋1.1.1 非テキストコンテンツ ◦ そもそも画像か?を確認 → 画像なら代替テキストの確認 • 1.4.1 色の使用＋1.3.3 感覚的な特徴 ◦ グレースケールで確認 → 色名・形・大きさ・位置の指示を同時に確認 • 2.1.1 キーボード＋2.4.3 フォーカス順序＋2.4.7 フォーカスの可視化 ＋3.2.1 フォーカス時 ◦ キーボードでフォーカス移動させながらまとめて確認 • 2.4.1 ブロックスキップ＋2.4.6 見出し及びラベル＋1.3.1 情報及び関係性 ◦ ランドマークと見出しレベルをツールでまとめて確認
23. 23 ツールで手動チェックを補助する Accessibility Visualizer • 「画像」にチェックを入れて確認する ◦ 1.1.1 非テキストコンテンツ、1.4.5 文字画像 • 見出しとセクションをハイライト表示して確認する ◦ 1.3.1 情報及び関係性、2.4.1 ブロックスキップ、2.4.6 見出し及びラベル • ターゲットのサイズが小さすぎる場合に警告が出る ◦ 2.5.8 ターゲットのサイズ (最低限) • 「ライブリージョンをアナウンス」でステータスメッセージの存在を確認する ◦ 4.1.3 ステータスメッセージ
25. ターゲットのサイズの警告 ライブリージョンをアナウンス aria-live がうるさい
26. 26 ツールで手動チェックを補助する Web Developer • CSSを剥がして順序を確認する（CSS > Disable All Styles） ◦ 1.3.2 意味のあるシーケンス • 画面にaltを出して確認する（Images > Display Alt Attributes） ◦ 1.1.1 非テキストコンテンツ、1.4.5 文字画像 ◦ "Replace Images With Alt Attributes"もおすすめ • 見出しリストで確認する（Information > View Document Outline） ◦ 1.3.1 情報及び関係性、2.4.6 見出し及びラベル
27. Disable All Styles (before)
28. Disable All Styles (after)
29. Display Alt Attributes
30. Replace Images With Alt Attributes
32. 32 ツールで手動チェックを補助する Accessibility Insights • フォーカス順を表示する(Tab stops) ◦ 2.1.1 キーボード、2.4.3 フォーカス順序 • Accessible Nameを表示して確認する（altだけでなくaria-labelも見える） ◦ 1.1.1 非テキストコンテンツ、1.4.5 文字画像 • LandmarksとHeadingsをハイライト表示して確認する ◦ 2.4.1 ブロックスキップ、2.4.6 見出し及びラベル、1.3.1 情報及び関係性
33. Tab stops
34. 34 ツールで手動チェックを補助する • Contrast.appで自動でコントラストチェックできない箇所を手動確認 ◦ 1.4.3 コントラスト(最低限)、1.4.11 非テキストのコントラスト • Responsive Viewerで表示確認 ◦ 1.4.10 リフロー、1.4.4 テキストのサイズ変更 • ユーザーCSSを適用したチェックの実施方法 ◦ 1.4.12 テキストの間隔
37. 37 マークアップ系の手動確認 • 比較的ライトなもの（画一的な確認ができるもの）を片付ける ◦ 2.4.4 リンクの目的（コンテキスト内）、2.5.3 名前(name)のラベル、 3.1.2 一部分の言語 • ラスボス ◦ 1.3.1 情報及び関係性、4.1.2 名前 (name) ・役割 (role) 及び値 (value) ▪ 操作して状態を切り替えつつFull Accessiblility TreeとDOMを見る ▪ 操作して状態を切り替えつつiOS VoiceOver、NVDAで上から下まで通しで見る
38. 　 アクセシビリティチェックの最速を極めたい
39. 39 生成AIでチェック＆サジェストできるのでは？ • Turning manual web accessibility success criteria into automatic: an LLM-based approach • (PDF) Fostering websites accessibility: A case study on the use of the Large Language Models ChatGPT for automatic remediation • Can LLMs spot accessibility issues? • 達成基準2.4.6は人間がやる必要がなくなるかもしれない • Axe DevTools and Artificial Intelligence (AI) • axe-con 2025 Digital Accessibility Conference | Deque
40. 40 アクセシビリティチェックRTA、どう攻略しますか？ • 「自分はこうやる」をぜひ#a11yfesやブログに書いて欲しい！読みたいです
41. 　 41 伊原 力也 Rikiya Ihara @magi1125 https://webapp-a11y.com