ウェブアクセシビリティ実装入門

ウェブアクセシビリティ実装入門 2024-01-31 西本卓也 (シュアルタ) @24motz / @nishimotz 1

免責事項 • 個人の見解に基づくものであり、 ウェブアクセシビリティ基盤委員会の 公式的な見解を示すものではありません • JIS X 8341:3-2016の用語を用いています 2

アクセシビリティ確保の背景 • 排除されていた人たち • 障害者差別解消法 • 合理的配慮の提供 • 同等の機会の提供に限定 • 本質的な変更に及ばない • 事業者は2024年4月から義務化 • 情報処理試験の特別措置 • 試験時間延長（1.5倍） • 点字受験、拡大問題冊子、白黒反転拡大問題冊子 • 代理記入、筆談、補聴器、車椅子、拡大読書器、補助犬、耳栓 3

環境の整備（努力義務） • 合理的配慮を提供しやすくする •例 • アクセシビリティを確保したウェブサイトやアプリの提供 • メリット • 提供者はオンデマンドでの対応を減らせる • ユーザーが自力でできることが増える • 提供者の負担が過重な場合は義務ではない • 回避できるが解決はしない 4

ウェブではどう取り組めばいいのか • HTMLの標準を仕様に沿って使う • 確認して実装して確認する • 確認方法 • 視覚的な事項も多い • 音声閲覧環境（スクリーンリーダー）の使用が望ましい • 有償のツールは必須ではない • アクセシビリティ仕様(WAI-ARIA) • 不要なこともある • よく確認して使うべき 5

標準を使うだけでよいとは？ • ウェブコンテンツが確保するべきアクセシビリティの基準 • W3C WCAG → ISO → JIS • 公共サイト（総務省ガイドライン） • 継続的な取り組みを要求 • PDCAのためにアクセシビリティ試験を行う • HTML標準そのものがこれを踏まえて作られている • テキスト • 操作手段 6

ノーマンの7段階理論 (誰のためのデザイン？増補・改訂版) どこかが難しい場合の対策と選択肢？ 実行の橋 実行 詳細化 プラン 知覚 解釈 比較 評価の橋 7

ウェブアクセシビリティの原則 • 知覚可能 1.x • 聞こえにくい、見えにくい • 視覚／聴覚／触覚で非テキストコンテンツを（知覚） • 操作可能 2.x • 手や体を動かしにくい • マウス／キーボード／音声認識で操作を（実行） • 理解可能 3.x • 覚えにくい、わかりにくい、間違えやすい • （プラン、詳細化、解釈、比較） 8

詳細折りたたみ要素(details) • JavaScript不要 • 複雑な要件に対応 • CSSでカスタマイズ 9

概要明示要素(summary) • 暗黙の role=button 10

アクセシビリティ サポーテッド(AS) • <img src=”cat.jpg” alt=”写真 ネコ”> • 原則 1. 知覚可能 • ガイドライン 1.1 テキストによる代替 • 達成基準 1.1.1 非テキストコンテンツ • 達成方法 • H37 img 要素の alt 属性を使用する • AS情報 • 広く使われているブラウザで • 広く使われているスクリーンリーダーで • 日本語のalt属性が不具合なく使えるか 11

WAIC AS情報 0009-01 (H37) • 注意：実装のお手本にならないテストコードもある 12

ASテスト0009-01 13

「三角測量」で達成する • 「達成できる実装」とテスト手順で確認する • 同じテスト手順でターゲットを確認すると「達成できない」 • ターゲットの実装を修正したら「達成できた」 • WAIC ASテスト(整備中) • WAI-ARIAが必要であれば • W3C: ARIA Authoring Practices Guide (APG) • 既存のサイトや実装を探す 14

まとめ • ウェブアクセシビリティ基準 • 基準を満たす方法 → 日々変化 → 確認する方法が重要 • • • • HTML標準 達成方法 アクセシビリティ サポーテッド 確認 → 実装 → 確認 • うまくやるには • Linter • 自動化 • デザインシステム 15