Webアクセシビリティとは何ですか？

障害の有無や環境に関係なく、全ての人がWebサイトを利用できるようにする取り組み。

Webアクセシビリティのポイントは？

WCAG（Web Content Accessibility Guidelines）が国際標準。スクリーンリーダー対応、キーボード操作、色のコントラスト比が重要。障害者差別解消法の改正でWebアクセシビリティの義務化が進む。アクセシビリティの向上はSEOやユーザビリティの向上にもつながる

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

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

💡 「誰もが使える」Webを実現する

📌 このページのポイント

WCAG（Web Content Accessibility Guidelines）が国際標準
スクリーンリーダー対応、キーボード操作、色のコントラスト比が重要
障害者差別解消法の改正でWebアクセシビリティの義務化が進む
アクセシビリティの向上はSEOやユーザビリティの向上にもつながる

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（利用しやすさ）だよ

← 用語集にもどる

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

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