現代のウェブ開発において、アクセシビリティ（A11y）の確保は「追加機能」ではなく、必須の品質基準となっています。すべてのユーザーが障壁なく情報にアクセスし、インタラクションを行えるようにするためには、セマンティックなHTMLマークアップが基本となります。
しかし、複雑なUIコンポーネント（タブ、アコーディオン、ダイアログなど）を構築する際、標準のHTML要素だけでは意図した役割や状態を表現しきれないことがあります。そこで登場するのが**WAI-ARIA（Web Accessibility Initiative - Accessible Rich Internet Applications）**です。
本記事では、WAI-ARIAの基本的な概念と、よく使われる属性（role、aria-label、aria-hiddenなど）の適切な使い方について解説します。
1. WAI-ARIAが必要とされる理由
HTMLには、<button> や <nav>、<header> などの意味を持った「セマンティック要素」が存在します。これらを使用すると、ブラウザは自動的にスクリーンリーダーなどの支援技術に対して、その要素の役割（Role）や状態（State）を伝えます。
しかし、以下のような場合にはセマンティクスが不足します。
- 標準HTMLにないUI（カルーセル、カスタムドロップダウン、モーダルウィンドウなど）を独自に作成する場合。
- JavaScriptによる動的な状態変化（開閉、有効/無効、ローディングなど）を支援技術に同期させたい場合。
WAI-ARIAは、HTMLのセマンティクスを「補強」し、支援技術に対してUIの構造や状態を正確に伝えるための架け橋となります。
2. WAI-ARIAの第一ルール：ARIAを使わないこと
WAI-ARIAの仕様書には、非常に有名な「第一ルール」が存在します。
「可能であるならば、ARIA属性を使用する代わりに、本来のセマンティクスを持つネイティブなHTML要素を使用せよ」
例えば、クリック可能な要素を作成する場合、<div> 要素に role="button" を付与するよりも、標準の <button> 要素を使用する方が圧倒的に優れています。標準の <button> 要素であれば、最初から以下の機能がブラウザによって提供されているためです。
- キーボードでのフォーカス移動（Tabキーで選択可能）
- EnterキーやSpaceキー押下時のクリックイベント発火
- スクリーンリーダーへの「ボタン」という読み上げ通知
<!-- 良くない例：冗長でキーボード操作の手動実装が必要 -->
<div role="button" tabindex="0" onclick="doSomething()">送信</div>
<!-- 良い例：ネイティブHTMLで完全に完結 -->
<button onclick="doSomething()">送信</button>
3. 主要なWAI-ARIA属性と使い分け
ネイティブ要素だけでは対応できない場合、以下の属性を活用します。
① role 属性（役割の明示）
要素がどのような種類のUIコンポーネントであるか（タブリスト、ナビゲーション、ダイアログなど）を宣言します。
<!-- 複数のボタンをまとめるタブリスト構造の例 -->
<div role="tablist">
<button role="tab" aria-selected="true" id="tab-1">タブ1</button>
<button role="tab" aria-selected="false" id="tab-2">タブ2</button>
</div>
② aria-label / aria-labelledby（名前・ラベルの付与）
画面上に表示されるテキストが存在しない、もしくは画像ボタンなどで明確な名前を付与したい場合に使用します。
<!-- 閉じるボタン（×印）に音声読み上げ用テキストを付与 -->
<button aria-label="閉じる">×</button>
<!-- 関連する要素のIDを指定してラベルとする場合 -->
<h2 id="modal-title">設定の変更</h2>
<div role="dialog" aria-labelledby="modal-title">
<!-- コンテンツ -->
</div>
③ aria-hidden（支援技術から隠す）
視覚的には装飾用アイコンとして見えているものの、スクリーンリーダーには読み上げさせたくない（ノイズになる）要素に対して指定します。
<!-- アイコンフォントや装飾用画像に指定 -->
<button>
<span class="fa fa-trash" aria-hidden="true"></span>
<span>削除</span>
</button>
まとめ
WAI-ARIAは、標準HTMLの限界を超えてリッチでインタラクティブなUIをアクセシブルにするための強力なツールです。しかし、誤ったARIAの使い方（セマンティクスの競合や、キーボード操作の無視など）は、かえってアクセシビリティを悪化させてしまうリスクもあります。
まずはネイティブのHTMLタグを活用し、不足する状態管理や動的なUIの表現にのみWAI-ARIAを「補強」として追加する、というアプローチを徹底しましょう。