はじめに
Webアクセシビリティは、「やれたら良い」ものではなく、全てのユーザーに快適な体験を提供するための「必須要件」です。
品質の高いコードがバグを減らすように、アクセシブルなコードはより多くの人が利用できるようになります。
この記事では、エンジニアが日々の開発業務で実践できる具体的なWebアクセシビリティ向上のためのテクニックと、役立つツールを紹介します。
なぜアクセシビリティが重要なのか？
ウェブの力はその普遍性にある。障害の有無にかかわらず、誰もがアクセスできることは不可欠な要素である。
https://www.w3.org/ja/mission/accessibility/
Webアクセシビリティは、障害を持つ方のためだけのものではありません。例えば、以下のような状況を想像してみてください。
- 一時的な制約：骨折でマウスが使えない、騒がしい場所で音声が聞こえない 🎧
- 環境的な制約：通信状況が悪く画像が表示されない、屋外の日差しの下で画面が見づらい ☀️
- 技術的な制約：JavaScriptを無効にしている、キーボードだけで操作している ⌨️
アクセシビリティを確保することは、こうした多様なユーザーがプロダクトを快適に使えるようにするインクルーシブな設計の一部です。
結果として、ユーザー体験（UX）やSEOの向上にも直結し、プロダクト全体の価値を高めます。
具体的なアクセシビリティ
<img>にはaltをつける
画像が表示されない時、alt属性のテキストがその代わりになります。これはスクリーンリーダーのユーザーだけでなく、通信エラーで画像が読み込めなかったり、拡張機能で画像表示をオフにしているユーザーにとっても重要です。
推奨パターン 👍
<img src="chart.png" alt="売上と利益の月次推移を示す棒グラフ">
意味のない装飾画像の場合
alt=""のように空にすることで、スクリーンリーダーはその画像を無視し、不要な情報を読み上げません。
<img src="background-pattern.svg" alt="">
アンチパターン ❌
これでは画像の内容が伝わりません。
<img src="chart.png" alt="image">
セマンティックなHTMLを心掛ける
適切なHTMLタグを使うことは、アクセシビリティの土台です。ブラウザや支援技術は、HTMLのタグを解釈してユーザーに情報を伝えます。
例えば、クリックイベントを実装したい場合、安易に<div>を使っていませんか？ <button>タグを使えば、キーボード操作やフォーカス管理がデフォルトで備わっています
推奨パターン 👍
// デフォルトでキーボード操作やフォーカス管理に対応済み
<button onClick={handleClick}>
ボタン
</button>
アンチパターン ❌
divでボタンを再現すると、キーボード操作（EnterやSpaceキーへの対応）やフォーカス（tabIndex）などを自前で実装する必要があり、複雑で漏れも発生しやすくなります。
// キーボード操作も考慮する必要があり、実装が複雑になる
<div role="button" tabIndex="0" onClick={handleClick} onKeyDown={handleKeyDown}>
ボタン
</div>
<button>, <nav>, <main>, <input>など、用途に合ったタグを使い分けるだけで、多くのアクセシビリティ問題は未然に防げます。
適切なラベルをつける
スクリーンリーダーのユーザーは、ページ全体を順番に読み上げるだけでなく、見出しやリスト単位でジャンプして概要を把握します。
リストやセクションが何についてのものなのかを明示しましょう。
aria-labelやaria-labelledbyを使えば、簡単に関連付けができます。
推奨パターン 👍
見出しとリストをaria-labelledbyで関連付けます。「このリストはかわいいポケモンランキングだな！」と分かります。
<h3 id="pokemon-ranking">かわいいポケモンランキング</h3>
<ol aria-labelledby="pokemon-ranking">
<li>ピッピ</li>
<li>ピカチュウ</li>
<li>イーブイ</li>
</ol>
ラベル要素が画面にない場合
<ol aria-label="かわいいポケモンランキング">
<li>ピッピ</li>
<li>ピカチュウ</li>
<li>イーブイ</li>
</ol>
アンチパターン ❌
「このリストは何のリストだろう…？」と、文脈が分からなくなってしまいます。
<ol>
<li>ピッピ</li>
<li>ピカチュウ</li>
<li>イーブイ</li>
</ol>
コントラスト比を意識する
色のコントラストが低いと、弱視の方や明るい場所で画面を見ているユーザーにとって非常に読みにくくなります。
WCAG（Web Content Accessibility Guidelines）では、通常のテキストで4.5:1以上のコントラスト比を推奨しています（より厳格なAAA基準では7:1）。
また、コントラストはフォントサイズやフォントの太さによっても目標のコントラスト比が変化します。
簡単なチェック方法:
ChromeやFirefoxの開発者ツールが便利です。要素を検証し、カラーピッカーを開くとコントラスト比が表示され、修正候補も提案してくれます。
便利なチェックツール
アクセシビリティ対応は、これらのツールを使うことで、より効率的に進められます。
- Axe core: ブラウザの拡張機能やPlaywrightのE2Eなどからアクセシビリティ観点の問題点と修正方法を具体的に指摘してくれます。
- WAVE: ブラウザ拡張機能やWebサイトで利用できる評価ツール。ページに直接アイコンをオーバーレイ表示して、視覚的に問題点を把握できます。
- eslint-plugin-jsx-a11y: React(JSX)を使っている場合、ESLintに組み込むことで、開発中にリアルタイムでアクセシビリティの問題を警告してくれます。
終わりに
Webアクセシビリティは、一度対応すれば終わりではありません。新しい機能を追加したり、デザインをリニューアルしたりする際に、常に意識し続ける必要があります。
しかし、難しく考える必要はありません。今回紹介したような基本的なテクニックを日々の開発で実践するだけでも、あなたのプロダクトは着実にアクセシブルになります。
まずは開発者ツールのコントラストチェックから始めてみませんか？その小さな一歩が、より多くのユーザーにとっての大きな快適さにつながります。
(余談: 筆者も最近PCを買い替えたのですが、初期設定でマウス操作が必須でした。ワイヤレス専用マウスだったので接続できず...😭 OS標準のスクリーンリーダーであるVoiceOverに助けられて事なきを得ました...)
Discussion