Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

　 2 伊原 力也 Rikiya Ihara @magi1125 https://webapp-a11y.com

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

4 アクセシビリティチェックを最速で終わらせたい ● チェック自体は早く終わらせ、問題の改善・防止・消滅に時間を使いたい ● 「時間がかかる→腰が重くなる→チェックしなくなる」を防ぎたい

Slide 5

Slide 5 text

5 前提 ● 「WebサイトをWCAG2.2 レベルAAでチェック」をイメージしています ○ 対象・目的・状況によってやり方は異なるはず ● あくまで私なりのやりかたです ○ 「自分はこうやる」をぜひ#a11yfesやブログに書いて欲しい！読みたいです

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

7 1. 準備する ○ おおもとの基準を確認する ○ チェック結果記録シートを作る ○ 自動チェッカーを掛ける 2. 部分的なところから確認する ○ 動画/音声・フォームの存在確認 ○ あんまりやらない系の存在確認 ○ 部分的に出現するものをチェック ○ 共通部分＆横断部分をチェック 3. 達成基準単位で見る ○ 複数の達成基準を一緒に見る ○ ツールで手動チェックを補助する ○ マークアップ系の手動確認 手順

Slide 8

Slide 8 text

　 1. 準備する

Slide 9

Slide 9 text

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もいちおう見る」

Slide 10

Slide 10 text

10 チェック結果記録シートを作る 行：ページ(画面)、列：達成基準 参考：情報アクセシビリティ自己評価様式 試験結果 ubie.app.xlsx

Slide 11

Slide 11 text

11 チェック結果記録シートを作る 達成基準単位の課題一覧シート

Slide 12

Slide 12 text

12 チェック結果記録シートを作る COB-CHA も捗る

Slide 13

Slide 13 text

13 自動チェッカーを掛ける ● 判定できる達成基準は一部だが、「あきらかにNG」の箇所が先にわかると 今後の手動チェックが進めやすくなる ○ axe DevToolsを用いたチェック実施方法の例 ■ コントラスト、代替テキスト、Accessible Name、見出しレベル、 lang属性、ランドマーク、フォームラベルが確認できる ■ ウェブアクセシビリティ検証ツール「axe」を用いた自動テスト実行スクリプト ○ Markuplint ○ Nu Html Checker

Slide 14

Slide 14 text

　 2. 部分的なところから確認する

Slide 15

Slide 15 text

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 アクセシブルな認証 (最低限)

Slide 16

Slide 16 text

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回の閃光： 一般的な情報サイトでは閃光させないが、動画には注意

Slide 17

Slide 17 text

17 部分的に出現するものをチェック 下記の存在に目星をつけ、手動で操作して確認。そこ以外は「該当なし」にする ● ホバーで追加表示する箇所（例：ナビゲーションやツールチップ） ○ 1.4.13 ホバー又はフォーカスで表示されるコンテンツ ● 画面内の他の要素にかぶさる箇所（例：固定ヘッダやメニュー） ○ 2.4.11 隠されないフォーカス ● 意図的にフォーカストラップする箇所（例：ダイアログ） ○ 2.1.2 キーボードトラップなし ● 自動で切り替わるものがある箇所（例：カルーセルなど） ○ 2.2.1 タイミング調整可能 および 2.2.2 一時停止、停止、非表示 ● 画面を書き換えずに通知する箇所（例：アクション結果、待機状態、進捗、エラー） ○ 4.1.3 ステータスメッセージ

Slide 18

Slide 18 text

18 共通部分＆横断部分をチェック ● 共通コンポーネント部分（ナビゲーション、ヘッダ、フッタなど）をチェック ● 同時に、複数画面に関わる基準をチェック ○ 2.4.5 複数の手段、3.2.3 一貫したナビゲーション、 3.2.4 一貫した識別性、3.2.6 一貫したヘルプ ● 以下もテンプレートをチェック ○ 1.4.4 テキストのサイズ変更： ズーム禁止meta要素の有無 ○ 3.1.1 ページの言語： html要素のlang属性の確認

Slide 19

Slide 19 text

　 3. 達成基準単位で見る

Slide 20

Slide 20 text

20 達成基準の番号はチェックしやすさと無関係 サイト単位で見る場合、画面ごとに番号順に見ていくのは合理的ではない ✕

Slide 21

Slide 21 text

21 達成基準単位で複数画面を見る コンテキストスイッチが減るし、チェックツールの切り替えも要らず、分担もしやすい ○

Slide 22

Slide 22 text

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 情報及び関係性 ○ ランドマークと見出しレベルをツールでまとめて確認

Slide 23

Slide 23 text

23 ツールで手動チェックを補助する Accessibility Visualizer ● 「画像」にチェックを入れて確認する ○ 1.1.1 非テキストコンテンツ、1.4.5 文字画像 ● 見出しとセクションをハイライト表示して確認する ○ 1.3.1 情報及び関係性、2.4.1 ブロックスキップ、2.4.6 見出し及びラベル ● ターゲットのサイズが小さすぎる場合に警告が出る ○ 2.5.8 ターゲットのサイズ (最低限) ● 「ライブリージョンをアナウンス」でステータスメッセージの存在を確認する ○ 4.1.3 ステータスメッセージ

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

ターゲットのサイズの警告 ライブリージョンをアナウンス aria-live がうるさい

Slide 26

Slide 26 text

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 見出し及びラベル

Slide 27

Slide 27 text

Disable All Styles (before)

Slide 28

Slide 28 text

Disable All Styles (after)

Slide 29

Slide 29 text

Display Alt Attributes

Slide 30

Slide 30 text

Replace Images With Alt Attributes

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

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 情報及び関係性

Slide 33

Slide 33 text

Tab stops

Slide 34

Slide 34 text

34 ツールで手動チェックを補助する ● Contrast.appで自動でコントラストチェックできない箇所を手動確認 ○ 1.4.3 コントラスト(最低限)、1.4.11 非テキストのコントラスト ● Responsive Viewerで表示確認 ○ 1.4.10 リフロー、1.4.4 テキストのサイズ変更 ● ユーザーCSSを適用したチェックの実施方法 ○ 1.4.12 テキストの間隔

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

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で上から下まで通しで見る

Slide 38

Slide 38 text

　 アクセシビリティチェックの最速を極めたい

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

40 アクセシビリティチェックRTA、どう攻略しますか？ ● 「自分はこうやる」をぜひ#a11yfesやブログに書いて欲しい！読みたいです

Slide 41

Slide 41 text

　 41 伊原 力也 Rikiya Ihara @magi1125 https://webapp-a11y.com