アクセシビリティ（a11y）は、障害の有無や使用環境に関わらず、すべての人がWebサービスを利用できるようにするための設計指針です。本記事では、a11y対応の基本と、WAI-ARIA属性の正しい使い方をわかりやすく解説します。
アクセシビリティとは
a11yは「accessibility」の「a」と「y」の間に11文字あることに由来する略称です。視覚・聴覚・運動・認知などさまざまな障害をもつユーザーや、キーボード操作・スクリーンリーダー・低速回線の利用者にとっても使いやすいWebを実現することを指します。
基本の4原則（WCAG）
- 知覚可能：情報がユーザーに知覚できる形で提示されている
- 操作可能：キーボードや支援技術で操作できる
- 理解可能：情報やUIの動作が予測可能
- 堅牢：将来の技術にも対応できる実装
まず押さえるべき基本
- セマンティックなHTMLを使う（
<button><nav><main>等） - すべての画像に
alt属性 - ラベルと入力要素を
label htmlForで関連付け - キーボードのみで全機能を操作できる
- フォーカスインジケータ（
:focus-visible）を消さない - 文字サイズはrem/em（拡大に対応）
- コントラスト比は本文4.5:1以上
WAI-ARIAとは
WAI-ARIAは、HTMLだけでは表現できない「役割（role）」や「状態（state）」を支援技術に伝えるための属性群です。スクリーンリーダーがUIを正しく読み上げるのに必要な情報を補います。
ARIA属性の基本パターン
<!-- アイコンボタンに名前を与える -->
<button aria-label="検索">
<svg>...</svg>
</button>
<!-- モーダルダイアログ -->
<div role="dialog" aria-modal="true" aria-labelledby="title">
<h2 id="title">確認</h2>
</div>
<!-- 開閉状態 -->
<button aria-expanded="false" aria-controls="menu">メニュー</button>
<ul id="menu" hidden>...</ul>
<!-- ライブリージョン（動的更新） -->
<div aria-live="polite" id="status"></div>ARIAの第一法則：「使わないで済むなら使うな」
WAI-ARIAの公式ガイドラインには「適切なHTML要素・属性で表現できるなら、ARIAは使うな」と明記されています。<button>を<div role="button">で代替するのはアンチパターン。セマンティックHTMLを最優先し、足りない部分をARIAで補うのが正解です。
チェックツール
- axe DevTools：Chrome/Firefox拡張・CLI/CI連携
- Lighthouse Accessibility監査：基本項目を自動チェック
- WAVE：Web AIM提供の視覚的チェッカー
- スクリーンリーダー実機：VoiceOver（Mac/iOS）、NVDA（Windows）、TalkBack（Android）
まとめ
a11y対応は「特別な人のため」ではなく、すべてのユーザーの体験を底上げする取り組みです。セマンティックHTMLを基本に、必要な箇所だけARIAで補完するスタンスを覚えれば、難しい技術ではありません。まずはaxe DevToolsで自サイトをスキャンするところから始めましょう。
