Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

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

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

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

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

Rikiya Ihara / magi

October 18, 2024
Tweet

More Decks by Rikiya Ihara / magi

Other Decks in Design

Transcript

  1. 7 1. 準備する ◦ おおもとの基準を確認する ◦ チェック結果記録シートを作る ◦ 自動チェッカーを掛ける 2.

    部分的なところから確認する ◦ 動画/音声・フォームの存在確認 ◦ あんまりやらない系の存在確認 ◦ 部分的に出現するものをチェック ◦ 共通部分&横断部分をチェック 3. 達成基準単位で見る ◦ 複数の達成基準を一緒に見る ◦ ツールで手動チェックを補助する ◦ マークアップ系の手動確認 手順
  2. 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もいちおう見る」
  3. 13 自動チェッカーを掛ける • 判定できる達成基準は一部だが、「あきらかにNG」の箇所が先にわかると 今後の手動チェックが進めやすくなる ◦ axe DevToolsを用いたチェック実施方法の例 ▪ コントラスト、代替テキスト、Accessible

    Name、見出しレベル、 lang属性、ランドマーク、フォームラベルが確認できる ▪ ウェブアクセシビリティ検証ツール「axe」を用いた自動テスト実行スクリプト ◦ Markuplint ◦ Nu Html Checker
  4. 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 アクセシブルな認証 (最低限)
  5. 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回の閃光: 一般的な情報サイトでは閃光させないが、動画には注意
  6. 17 部分的に出現するものをチェック 下記の存在に目星をつけ、手動で操作して確認。そこ以外は「該当なし」にする • ホバーで追加表示する箇所(例:ナビゲーションやツールチップ) ◦ 1.4.13 ホバー又はフォーカスで表示されるコンテンツ • 画面内の他の要素にかぶさる箇所(例:固定ヘッダやメニュー)

    ◦ 2.4.11 隠されないフォーカス • 意図的にフォーカストラップする箇所(例:ダイアログ) ◦ 2.1.2 キーボードトラップなし • 自動で切り替わるものがある箇所(例:カルーセルなど) ◦ 2.2.1 タイミング調整可能 および 2.2.2 一時停止、停止、非表示 • 画面を書き換えずに通知する箇所(例:アクション結果、待機状態、進捗、エラー) ◦ 4.1.3 ステータスメッセージ
  7. 18 共通部分&横断部分をチェック • 共通コンポーネント部分(ナビゲーション、ヘッダ、フッタなど)をチェック • 同時に、複数画面に関わる基準をチェック ◦ 2.4.5 複数の手段、3.2.3 一貫したナビゲーション、

    3.2.4 一貫した識別性、3.2.6 一貫したヘルプ • 以下もテンプレートをチェック ◦ 1.4.4 テキストのサイズ変更: ズーム禁止meta要素の有無 ◦ 3.1.1 ページの言語: html要素のlang属性の確認
  8. 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 情報及び関係性 ◦ ランドマークと見出しレベルをツールでまとめて確認
  9. 23 ツールで手動チェックを補助する Accessibility Visualizer • 「画像」にチェックを入れて確認する ◦ 1.1.1 非テキストコンテンツ、1.4.5 文字画像

    • 見出しとセクションをハイライト表示して確認する ◦ 1.3.1 情報及び関係性、2.4.1 ブロックスキップ、2.4.6 見出し及びラベル • ターゲットのサイズが小さすぎる場合に警告が出る ◦ 2.5.8 ターゲットのサイズ (最低限) • 「ライブリージョンをアナウンス」でステータスメッセージの存在を確認する ◦ 4.1.3 ステータスメッセージ
  10. 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 見出し及びラベル
  11. 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 情報及び関係性
  12. 34 ツールで手動チェックを補助する • Contrast.appで自動でコントラストチェックできない箇所を手動確認 ◦ 1.4.3 コントラスト(最低限)、1.4.11 非テキストのコントラスト • Responsive

    Viewerで表示確認 ◦ 1.4.10 リフロー、1.4.4 テキストのサイズ変更 • ユーザーCSSを適用したチェックの実施方法 ◦ 1.4.12 テキストの間隔
  13. 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で上から下まで通しで見る
  14. 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