Webアクセシビリティを考える上で欠かせないのが、「ARIA属性（Accessible Rich Internet Applications）」です。
特にスクリーンリーダー利用者への配慮として、ARIAは意味を補う重要な役割を担います。
この記事では、ARIAの基礎から、よく使われるパターン、注意点や非推奨の使い方までをまとめて紹介します。
🔰 ARIA属性って何？
ARIA属性は、HTMLのタグだけでは伝えきれない意味や状態を補足するための属性群です。
たとえば、カスタムボタン、タブ、アコーディオンなど、HTML5のセマンティックタグでは表現しづらい要素に意味を付け加えることができます。
例：
<div role="button" tabindex="0" aria-pressed="false">クリック</div>
この例では、見た目はただの <div> ですが、スクリーンリーダーには「ボタン」として読み上げられます。
🎯 よく使うARIA属性
| 属性名 | 用途 |
|---|---|
role | 要素の意味（ボタン、ナビゲーション、タブなど）を明示 |
aria-label | 視覚的には表示されない「説明文」を読み上げ用に指定 |
aria-labelledby | 他のID付き要素を参照してラベルにする |
aria-hidden | 読み上げ対象外にする（trueでスキップ） |
aria-expanded | 折りたたみ要素の展開状態（true / false） |
aria-current | 現在のページや選択中の項目に付与（例：ページネーション） |
✅ 実践パターン：アクセシブルなUIの例
📌 カスタムボタン（<div>使用）
<div role="button" tabindex="0" aria-pressed="false" onclick="toggle()">押して切り替え</div>
※tabindex="0"を指定すると、キーボード操作（Tabキー）でもアクセス可能になります。
📌 ランドマーク（ナビゲーションや補助情報）
<nav role="navigation" aria-label="グローバルメニュー">
<ul>...</ul>
</nav>
role="navigation" は <nav> に明示的に書く必要はありませんが、aria-labelで「どこのナビか」を伝えるのが重要です。
📌 非表示にしたい装飾要素
<span class="icon" aria-hidden="true">★</span>
このように、読み上げ不要なアイコンや装飾には aria-hidden="true" をつけて、ノイズを減らします。
⚠️ よくあるNG例と注意点
| 状況 | NG例 | 修正ポイント |
|---|---|---|
| ボタンの説明が不足 | <button><i class="icon"></i></button> | 視覚的にはアイコンが見えても、スクリーンリーダーには意味が伝わらない。→ aria-label="検索" などを付けるべき。 |
| 意味不明なラベル | <div role="button" aria-label=""></div> | 空のラベルは逆に混乱を招く。わかりやすい文言を入れること。 |
| ARIAの乱用 | <span role="button"> | 意味を表現できるなら、まずHTMLの標準タグ（<button>など）を使うべき。ARIAはあくまで補助。 |
🧭 原則：ARIAは“最後の手段”
WAI-ARIA仕様では、次の原則が示されています：
「セマンティックなHTMLをまず使い、それで表現できない場合にARIAを使う」
つまり、
- ✅
<button>が使えるなら、<div role="button">は不要 - ✅
<nav>,<header>,<main>などのランドマーク要素を活用 - ✅ 視覚的な表現より、意味を伝える構造を優先
🧪 スクリーンリーダーで確認するには？
代表的なツール：
- 💻 Windows：NVDA（無料）
- 🍎 Mac：VoiceOver（標準搭載）
- 🧪 Chrome拡張：ChromeVox、axe DevTools
自分で読み上げを聞いてみると、**“自分には見えているけど、スクリーンリーダーには見えない・伝わらない”**ことが多くあると気づけます。
✅ まとめ
- ARIA属性はアクセシビリティの補助ツールとして重要
- まずはセマンティックHTMLを正しく使うことが第一
aria-label,aria-hidden,role,aria-expandedなどは日常的に活用できる- スクリーンリーダーで実際の読み上げ結果を確認することが大切
