はじめに
Webサイトやアプリを作っていると、画面上ではうまく動いて見えるのに、スクリーンリーダーなどの支援技術を利用する人には正しく伝わらないことがあります。
例えば、見た目では「閉じるボタン」とわかるアイコンも、音声で読み上げると単なる「×」としか認識されず、ユーザーは「このボタンが何をするのか」理解できません。
こうした「見た目と実際に伝わる情報のズレ」を解消するために設計された仕組みが ARIA属性（WAI-ARIA） です。
ARIAは Accessible Rich Internet Applications の略で、複雑なWeb UIの「役割」「状態」「説明」を補足し、支援技術に正しく伝えるための仕組みです。
なぜこれが重要なのかというと、現代のWebはJavaScriptによるリッチなUIが当たり前になっているからです。モーダル、タブ切り替え、アコーディオンメニューなど、動的に変化する要素は標準HTMLだけでは意味を伝えきれません。
そこでARIA属性を正しく付けることで、「この要素はタブで、今は選択されていない」「このメニューは展開中」といった情報が支援技術に届き、誰にとっても使いやすいUIになります。
本記事は、そうした 「ARIA属性って聞いたことはあるけど、よく分からない」 という初心者を対象にしています。
よく使う属性TOP10を整理し、UI別にサンプルコードを紹介します。
読み終わる頃には、「ARIA属性が何かを理解し、サンプルレベルで自分のUIに組み込める」状態になることを目指します。
ARIA属性とは？
ARIAは Accessible Rich Internet Applications の略で、W3C（World Wide Web Consortium）が定めた仕様のひとつです。
名前だけ聞くと難しそうですが、要は WebページのUIに“字幕”を付ける仕組み と考えるとイメージしやすいです。
Webブラウザとスクリーンリーダーの間には、ページの構造や意味を伝えるための仕組みが備わっています。
例えば、<button> タグは自動的に「ボタン」として認識されますし、<h1> タグは「見出し」として読み上げられます。
しかし、近年のWebはJavaScriptを駆使した複雑なUIが増え、標準のタグだけでは十分に意味を伝えられないケースが多くなっています。
そこで役立つのがARIA属性です。
- この要素は「タブ」である
- 今このタブは「選択されている」
- このメニューは「展開されている」
といった情報をスクリーンリーダーに伝えられるようになります。
つまりARIA属性は、WebのリッチなUIを誰にとっても理解可能な形に補強するためのツール なのです。
どんなときに必要？
では、実際にARIA属性が必要になるのはどんな場面でしょうか。
基本的に「通常のHTMLタグで意味が伝わらない場合」に登場します。
カスタムUIを作ったとき
モーダルウィンドウ、タブ切り替え、アコーディオンメニューなど、JavaScriptで動的に作られるUIは、HTMLだけでは「何の役割を持つのか」分かりません。
例えば<div>や<span>で作られたタブは、見た目ではタブでも支援技術にはただの汎用コンテナにしか見えません。
→ こうしたときに role="tab" や aria-selected="true" を付けると、「これはタブで、今選ばれている」という情報が伝わります。
アイコンだけのボタン
「×」や「≡（ハンバーガーメニュー）」など、見た目の記号で意味を伝えるボタンは、人によっては意味が分かりません。
スクリーンリーダーでも「バツ」や「三」としか読み上げられず、何をするのかが分からなくなります。
→ aria-label="閉じる" を付ければ、「閉じるボタン」と正しく伝わります。
状態が変化する要素
アコーディオンメニューやドロップダウンのように「開く／閉じる」の状態を持つ要素は、見た目には矢印アイコンや表示の有無で分かっても、スクリーンリーダーには伝わりません。
→ aria-expanded="true" / false を使えば「展開中」「折りたたまれている」と認識されます。
現在地を示す要素
グローバルナビゲーションで「今いるページ」を示す場合、見た目には色や下線で分かりますが、それだけではスクリーンリーダー利用者には伝わりません。
→ aria-current="page" を使うと「ホーム、現在のページ」と読み上げられます。
動的に変化するメッセージ
フォームのエラーやリアルタイム通知など、JavaScriptで動的に表示される内容は、支援技術が自動的に読み上げる対象にはなりません。
→ aria-live="assertive" を付ければ、エラーメッセージを即座に読み上げさせることができます。
まとめると、ARIA属性が必要なのは 「HTMLタグだけではUIの意味や状態が伝わらない場面」 です。
逆に言えば、通常の<button>や<a>タグのように、意味が標準で備わっている要素に無理にARIAを付ける必要はありません。
よく使うARIA属性 TOP10
| 属性 | 役割 | 使用例 |
|---|---|---|
role | 要素の役割を定義する | role="dialog" |
aria-label | テキストがない要素にラベルを付ける | <button aria-label="閉じる">×</button> |
aria-labelledby | 他の要素をラベルにする | aria-labelledby="title-id" |
aria-describedby | 補足説明を紐付ける | aria-describedby="desc-id" |
aria-hidden | 支援技術から隠す | <span aria-hidden="true">★</span> |
aria-expanded | 開閉状態を伝える | aria-expanded="true" |
aria-controls | 制御対象を示す | aria-controls="menu-id" |
aria-current | 現在地を示す | aria-current="page" |
aria-selected | 選択状態を示す | aria-selected="true" |
aria-live | 変化を読み上げる | aria-live="polite" |
UI別 実装サンプル
モーダルダイアログ
<div role="dialog" aria-labelledby="dialog-title" aria-describedby="dialog-desc">
<h2 id="dialog-title">設定画面</h2>
<p id="dialog-desc">ユーザー情報を編集できます</p>
<button aria-label="閉じる">×</button>
</div>読み上げ例：「設定画面、ダイアログ。ユーザー情報を編集できます。閉じるボタン」
アコーディオン
<button aria-expanded="false" aria-controls="detail">
詳細を表示
</button>
<div id="detail" aria-hidden="true">
<p>ここに詳細が入ります</p>
</div>読み上げ例：「詳細を表示、折りたたまれている」
タブUI
<div role="tablist">
<button role="tab" aria-selected="true" aria-controls="panel1">概要</button>
<button role="tab" aria-selected="false" aria-controls="panel2">詳細</button>
</div>
<div id="panel1" role="tabpanel">概要の内容</div>
<div id="panel2" role="tabpanel" hidden>詳細の内容</div>読み上げ例：「概要、タブ、選択済み」「詳細、タブ」
ナビゲーション
<nav>
<a href="/home" aria-current="page">ホーム</a>
<a href="/about">会社情報</a>
<a href="/contact">お問い合わせ</a>
</nav>読み上げ例：「ホーム、現在のページ」
フォーム（エラー表示）
<label for="email">メールアドレス</label>
<input type="email" id="email" aria-describedby="email-tip email-error">
<span id="email-tip">例: user@example.com</span>
<span id="email-error" aria-live="assertive">メールアドレスを入力してください</span>読み上げ例：「メールアドレス、入力欄。例: user@example.com」
エラー時：「メールアドレスを入力してください」
ARIA属性を使うときの注意点
ネイティブHTMLタグを優先する
- 悪い例:
<div role="button"> - 良い例:
<button>
ボタンやリンクなどはタグ自体に意味があるため、わざわざARIAを付ける必要はない。
状態と属性を必ず同期させる
aria-expanded="true" なのにUIは閉じている…というように、UIの見た目とARIA属性が食い違うのは最悪。
必ずJavaScriptでUIの状態変化と一緒に属性も更新する。
過剰に付けない
ARIAは補助的な仕組み。必要のない要素に付けても混乱のもとになる。
「伝わらない部分だけ」に絞って使う。
装飾には aria-hidden="true"
アイコンやデザイン要素は、支援技術には不要。
これを省略すると、ユーザーにとってノイズになる読み上げが増える。
aria-live の乱用に注意
通知やエラーメッセージに便利だが、多用すると絶え間なく読み上げが発生し、逆に使いにくくなる。
本当に必要なメッセージにだけ適用する。
実機テストを忘れない
NVDA（Windows）、VoiceOver（Mac/iOS）などで実際に読み上げを確認する。
「開発者の想像」と「実際の読み上げ」が違うことはよくある。
まとめ
ARIA属性は「複雑なUIをスクリーンリーダーに正しく伝えるための字幕のような存在」です。
- HTMLタグだけで伝わるならそれで十分
- 足りないところだけARIAで補う
- よく使うのはTOP10でほとんど事足りる
- UIごとに定番のパターンがある
- 状態の同期や過剰使用に注意する
- 実際にスクリーンリーダーで確認して仕上げる
特に、モーダルやアコーディオン、タブなどは今回のサンプルをそのまま使えば実装できます。
まずは アイコンボタンに aria-label を付けること から始めてみてください。
それだけでもユーザー体験は大きく改善します。
ARIAは「特別な技術」ではなく、小さな気配りの積み重ねです。今日から一歩ずつ取り入れてみましょう。
コメント