💡
ウェブアクセシビリティその2 WCAGの構成と内容
導入
ウェブアクセシビリティに取り組むときに参照される資料のひとつに、Web Content Accessibility Guidelines（WCAG）があります。WCAGは、ウェブコンテンツのアクセシビリティを向上させるための具体的なガイドラインであり、これを遵守することで、誰もが利用しやすいウェブサイトに近づけることができます。
WCAGの構成
原則・ガイドライン・達成基準
WCAGは、4つの原則・13個のガイドライン・達成基準の3つのレイヤーに分かれています。
下記図の構成のようです。
知覚可能
情報やUIの要素がユーザーに見えたり聞こえたりすること
具体的な達成基準
-
代替テキストの提供
- 画像には説明文をつける。
- 例:
<img src="example.jpg" alt="説明文">
-
音声や動画にキャプション（字幕）をつける
- 動画に字幕を追加する。
- 例: YouTubeの動画に字幕を設定する。
考慮しなかったときに起き得る問題
- 画像の内容が理解できない。
- 音声情報が理解できない。
操作可能
ユーザーがインターフェースを操作できること
具体的な達成基準
-
キーボードアクセス
- キーボードで全ての機能を操作できるようにする。
- 例:
tabキーで移動できるリンクやボタン。
-
時間制限の調整
- 必要に応じて時間制限を延長できるようにする。
- 例: フォーム入力の時間制限を延長するオプション。
考慮しなかったときに起き得る問題
- マウスが使えないユーザーが操作できない。
- 充分な時間がないと操作ができない。
理解可能
ウェブサイトやサービスが提供する情報が、誰にでもわかりやすく伝わることを指します。これには、言語を明示することや、標準に則ったキーボード操作が可能になるように設定することが含まれます。
具体的な達成基準
-
明確な言語
- 簡潔で明瞭な言葉を使う。
- 例: わかりやすいラベルと指示。
-
予測可能
- 一貫性のあるナビゲーション。
- 例: サイト内のメニュー構造を統一する。
考慮しなかったときに起き得る問題
- 複雑な言葉や不明瞭な指示。
- 一貫性のないナビゲーション。
堅牢
ブラウザ、またスクリーンリーダーなどの支援技術で確実に動作し、解釈されること。さらに、現在のデバイス、サービスだけでなく、将来のデバイス、サービスにも対応できること
具体的な達成基準
-
互換性
- 標準に従ったコーディング。
- 例: W3Cの標準に従う。
-
エラー識別
- フォーム入力エラーを明確に伝える。
- 例: 入力ミス時に具体的なエラーメッセージを表示。
考慮しなかったときに起き得る問題
- スクリーンリーダーが正しく動作しない。
- 入力ミスが特定できない。
まとめ
今回は、WCAGについて紹介しました。
最後まで、読んでいただきありがとうございました！
Discussion