Webアクセシビリティ

Webアクセシビリティとは

Webアクセシビリティ(a11y と略されます)は、障害の有無・年齢・利用環境にかかわらず、誰もがWebサイトを利用できるようにする考え方と技術です。視覚障害の方が使うスクリーンリーダー(画面読み上げソフト)への対応が代表例ですが、それだけではありません。

マウスが使えずキーボードだけで操作する人
強い日差しの下でスマホを見る人(コントラストの問題)
回線が遅い環境の人、高齢で小さい文字が読みづらい人

アクセシビリティ対応は「特別な誰かのため」ではなく、あらゆる利用者の使いやすさの底上げです。国際的なガイドラインとして WCAG(Web Content Accessibility Guidelines)があります。

土台はセマンティックHTML

最も重要で費用対効果が高いのは、意味に合った [[HTML]] タグを使うことです。

やりがちな書き方	適切な書き方	効果
`<div onclick=...>`	`<button>`	キーボード操作・読み上げに自動対応
`<div class="title">`	`<h1>`〜`<h3>`	見出しジャンプで文書構造を把握できる
装飾だけの画像に alt なし	`alt=""` を明示	読み上げ時に不要な情報をスキップ
意味のある画像	`alt="内容の説明"`	画像が見えなくても内容が伝わる

標準タグで表現できないUI(タブ、モーダルなど)には、WAI-ARIAという属性(role や aria-label など)で役割や状態を補足します。ただし「ARIAを足す前に、まず正しいタグを使う」が原則です。

すぐ実践できるチェック

キーボードだけで全操作ができるか(Tabで移動、Enterで実行)
文字と背景のコントラスト比が十分か(WCAGでは通常テキストで4.5:1以上)
フォームの入力欄に <label> が結びついているか
[[CSS]] で見た目を消した要素が、読み上げでは正しく扱われるか

初学者向けポイント

スクリーンリーダー(Windows のナレーター、macOS の VoiceOver)で自分のページを聞いてみると、課題が体感できます
Lighthouse などの自動チェックで機械的に検出できる問題も多くあります
セマンティックな文書構造は [[SEOの技術基礎]] にもそのまま効きます — 検索エンジンも「目の見えない利用者」の一種と考えると腑に落ちます

関連技術とのつながり

[[HTML]] — セマンティックなマークアップがアクセシビリティの土台
[[CSS]] — コントラストやフォーカス表示の制御を担う
[[レスポンシブデザイン]] — 多様な環境への対応という同じゴールを持つ
[[SEOの技術基礎]] — 正しい文書構造は検索エンジンにも人にも優しい

Q: Webアクセシビリティの考え方として正しいのはどれ?
- [ ] スクリーンリーダー利用者だけを対象にした特別対応
- [x] 障害の有無や利用環境によらず誰もが使えるようにする底上げ
- [ ] デザインを完全に統一して選択肢をなくすこと
解説: キーボード操作やコントラストなど、あらゆる利用者の使いやすさを底上げする考え方です。

Q: アクセシビリティ対応として最も土台になるのはどれ?
- [x] 意味に合ったHTMLタグ(セマンティックHTML)を使う
- [ ] すべての要素にARIA属性を付ける
- [ ] 画像をすべて削除する
解説: buttonや見出しタグなど正しいタグを使うことが最優先で、ARIAはそれで表現できない場合の補足です。

Q: 国際的なアクセシビリティガイドラインはどれ?
- [x] WCAG
- [ ] W3C
- [ ] WAF
解説: WCAG(Web Content Accessibility Guidelines)がアクセシビリティの国際的なガイドラインです。