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

障害のある人を含むすべてのユーザーがWebサイトやアプリを利用できるようにする取り組み。a11yと略される。

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

視覚、聴覚、運動、認知などの障害に配慮した設計。WCAG（Web Content Accessibility Guidelines）が国際基準。セマンティックHTML、代替テキスト、キーボード操作対応が基本。a11y（aとyの間に11文字）と略される

【あくせしびりてぃ】

アクセシビリティとは？

💡 「誰もが使える」Webを目指す設計思想

📌 このページのポイント

視覚、聴覚、運動、認知などの障害に配慮した設計
WCAG（Web Content Accessibility Guidelines）が国際基準
セマンティックHTML、代替テキスト、キーボード操作対応が基本
a11y（aとyの間に11文字）と略される

アクセシビリティのイメージ

ひよこ

なぜアクセシビリティが大事なの？

ペンギン先生

世界人口の15%（約10億人）が何らかの障害を持っている。視覚障害者はスクリーンリーダーでWebを読み上げるし、上肢障害者はキーボードだけで操作する。アクセシビリティ対応しないと、これらのユーザーがサービスを使えない。法律面でもADA（米国）やJIS X 8341-3（日本）で対応が求められているよ

ひよこ

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

ペンギン先生

①画像にalt属性（代替テキスト）を付ける、②セマンティックHTMLを使う（divではなくnav、main、button）、③キーボードだけで全操作できるようにする、④色だけに依存しない情報伝達（色覚多様性対応）、⑤十分なコントラスト比（テキストと背景の明度差）。これだけでも大きく改善するよ

ひよこ

WCAGって何？

ペンギン先生

W3Cが策定したWebアクセシビリティの国際基準。A（最低限）、AA（標準、多くの法律が要求）、AAA（最高水準）の3レベル。日本の公的機関はJIS X 8341-3（WCAG 2.0ベース）への対応が求められる。民間企業でもEUのEAAや日本の障害者差別解消法改正で対応が義務化の方向だよ

ひよこ

開発者ができることは？

ペンギン先生

①Lighthouse（Chrome DevTools）でアクセシビリティスコアを確認、②axe DevTools（ブラウザ拡張）で問題を自動検出、③VoiceOver（Mac）やNVDA（Windows）でスクリーンリーダーテスト、④eslint-plugin-jsx-a11yでコード時点で検出。Reactなら@reach/uiやRadix UIのようなアクセシブルなUI ライブラリを使うのもおすすめだよ

まとめ：ざっくりこれだけ覚えればOK！

「アクセシビリティ」って出てきたら「すべての人が使えるWebにする取り組み」と思えればだいたいOK！

📖 おまけ：英語の意味

「Accessibility」＝アクセスのしやすさ

💬 a11y（アリー）とも書く。aとyの間に11文字あるからだよ

← 用語集にもどる

アクセシビリティ とは？

アクセシビリティとは？