関連記事：Web開発の技術マップ
Webアクセシビリティとは、障害の有無や年齢、使用環境に関わらず、すべてのユーザーがWebサイトを利用できるようにすることです。法的な義務としてだけでなく、SEOやUXの向上にもつながるため、フロントエンドエンジニアにとって重要なスキルです。
なぜアクセシビリティが重要か
- 利用者の拡大：視覚・聴覚・運動に障害を持つ方もサイトを使える
- 法的要件：2024年4月から障害者差別解消法により合理的配慮が民間事業者にも義務化
- SEO向上：セマンティックなHTMLは検索エンジンにも評価される
- ユーザー体験の向上：すべてのユーザーにとって使いやすいサイトになる
WCAG（Web Content Accessibility Guidelines）
WCAGはW3Cが策定したアクセシビリティの国際基準です。4つの原則に基づいています。
| 原則 | 内容 |
|---|---|
| 知覚可能 | 情報がユーザーに認識できること |
| 操作可能 | UIがキーボード等で操作できること |
| 理解可能 | コンテンツが理解しやすいこと |
| 堅牢 | 支援技術で正しく解釈できること |
セマンティックHTML
適切なHTML要素を使うことが、アクセシビリティの基本です。
<!-- 悪い例 -->
<div class="header">
<div class="nav">
<div class="link" onclick="navigate()">ホーム</div>
</div>
</div>
<!-- 良い例 -->
<header>
<nav>
<a href="/">ホーム</a>
</nav>
</header>
重要なセマンティック要素
| 要素 | 用途 |
|---|---|
<header> | ページやセクションのヘッダー |
<nav> | ナビゲーション |
<main> | メインコンテンツ |
<article> | 独立したコンテンツ |
<button> | クリック可能なアクション |
<a> | ページ遷移のリンク |
画像の代替テキスト
<!-- 情報を伝える画像 -->
<img src="chart.png" alt="2025年の売上推移グラフ。4月に前年比120%に到達" />
<!-- 装飾目的の画像 -->
<img src="decoration.png" alt="" />
装飾目的の画像には空の alt="" を設定し、スクリーンリーダーに読み上げさせません。
キーボード操作
すべてのインタラクティブ要素がキーボードだけで操作できるようにします。
/* フォーカスインジケーターを消さない */
:focus {
outline: 2px solid #4A90D9;
outline-offset: 2px;
}
/* outline: none は避ける（代替のスタイルを用意する場合のみ） */
<!-- tabindexの適切な使用 -->
<div tabindex="0" role="button" onkeydown="handleKeyDown(event)">
カスタムボタン
</div>
色のコントラスト比
テキストと背景のコントラスト比は、WCAG AAレベルで以下を満たす必要があります。
エンジニアのためのFigma入門も参考にしてください。
| テキストサイズ | 必要なコントラスト比 |
|---|---|
| 通常テキスト | 4.5:1 以上 |
| 大きなテキスト（18px太字/24px以上） | 3:1 以上 |
確認ツール：Chrome DevToolsのLighthouse、axe DevTools
Webセキュリティ入門も参考にしてください。
ARIA属性
HTMLだけでは表現しきれない情報を補完します。
<!-- メニューの開閉状態を伝える -->
<button aria-expanded="false" aria-controls="menu">
メニュー
</button>
<ul id="menu" hidden>
<li><a href="/about">概要</a></li>
</ul>
<!-- ライブリージョン（動的に更新される領域） -->
<div aria-live="polite" role="status">
3件の検索結果が見つかりました
</div>
注意：ARIAは「ネイティブのHTMLで表現できない場合の補完」として使います。<button> で済むなら <div role="button"> は使いません。
チェックリスト
- すべての画像に適切な
altテキストがある - キーボードだけで全機能を操作できる
- フォーカスインジケーターが見える
- 色のコントラスト比が基準を満たす
- フォームにラベルが関連付けられている
- 見出し構造が論理的（h1→h2→h3）
- 動画に字幕がある
まとめ
Webアクセシビリティは、セマンティックHTMLを正しく使うことから始まります。特別な技術を覚える前に、まず適切な HTML要素の選択とalt テキストの設定を徹底しましょう。
