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

1.8K Views

January 31, 24

スライド概要

すごい広島 IT初心者の会 [82]
https://pycon-hiroshima.connpass.com/event/306668/
2024-01-31
西本卓也 @24motz / @nishimotz

profile-image

Shuaruta Inc. ウェブアクセシビリティ基盤委員会 (WAIC) NVDA日本語版 すごい広島 IT初心者の会

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

関連スライド

各ページのテキスト
1.

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

2.

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

3.

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

4.

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

5.

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

6.

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

7.

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

8.

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

9.

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

10.

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

11.

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

12.

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

13.

ASテスト0009-01 13

14.

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

15.

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