【うぇぶあくせしびりてぃ】

Webアクセシビリティ とは?

💡 「誰もが使える」Webを実現する
📌 このページのポイント
Webアクセシビリティの対応 Webサイト 誰もが使える設計 視覚 alt属性 色コントラスト 操作 キーボード操作 フォーカス管理 理解 明確なラベル エラーメッセージ 堅牢性 セマンティックHTML ARIA属性 WCAG(Webコンテンツアクセシビリティガイドライン) レベルA(最低限) レベルAA(推奨) レベルAAA(最高)
Webアクセシビリティのイメージ
ひよこ ひよこ

なんでアクセシビリティが大事なの?

ペンギン先生 ペンギン先生

世界人口の15%(約10億人)が何らかの障害を持っているよ。視覚障害の人はスクリーンリーダーでWebを読む、手の不自由な人はキーボードだけで操作する。アクセシビリティ対応していないサイトはこれらの人が使えない。法的にも対応が求められる流れが強まっているんだ

ひよこ ひよこ

具体的に何をすればいい?

ペンギン先生 ペンギン先生

①画像にalt属性(代替テキスト)を付ける、②色のコントラスト比を4.5:1以上にする、③フォーカスインジケーター(キーボード操作時の選択表示)を消さない、④見出しタグ(h1〜h6)を適切に使う、⑤フォームにlabelを紐づける。まずはこの5つから始めよう

ひよこ ひよこ

テスト方法は?

ペンギン先生 ペンギン先生

①axe DevToolsブラウザ拡張)で自動チェック、②Lighthouse のアクセシビリティスコア、③キーボードだけでサイトを操作してみる、④スクリーンリーダー(NVDA、VoiceOver)で実際に読み上げてみる。自動チェックでは全体の30%程度しか検出できないから、手動テストも組み合わせるのが重要だよ

ひよこ ひよこ

エンジニアにとってのメリットは?

ペンギン先生 ペンギン先生

アクセシビリティ対応はSEO向上(セマンティックHTML)、モバイル対応の改善、テストの自動化にもつながるよ。aria属性を正しく使えばスクリーンリーダーだけでなくE2Eテストの安定性も向上する。「正しいHTMLを書く」ことがアクセシビリティの基本であり、良いエンジニアリングそのものだね

ペンギン
まとめ:ざっくりこれだけ覚えればOK!
アクセシビリティ」って出てきたら「全ての人がWebサイトを使えるようにする取り組み」と思えればだいたいOK!
📖 おまけ:英語の意味
「Web Accessibility」 = Webアクセシビリティ
💬 Access(アクセスする)+Ability(能力)=Accessibility(利用しやすさ)だよ
← 用語集にもどる