ARIA属性とは？よく使う属性と実装サンプルまとめ
Webサイト制作で、aria-label、aria-hidden、aria-expanded などのARIA属性を見かけることがあります。
「アクセシビリティ対応に必要そう」と思って使っているものの、どんなときに必要で、どんなときには不要なのか、迷う場面も多いのではないでしょうか。
ARIA属性は、スクリーンリーダーなどの支援技術に対して、HTMLだけでは伝わりにくい役割・状態・説明を補足するための属性です。
つまり、見た目や動作を変えるものではなく、支援技術への伝わり方を補うためのものです。
この記事では、ARIA属性とは何か、どんなときに必要か、よく使うARIA属性TOP10、UI別の実装サンプル、使うときの注意点をまとめます。
ARIA属性とは？
ARIAは「Accessible Rich Internet Applications」の略です。
Webページ上のUIが複雑になると、見た目では分かるけれど、HTMLの構造だけでは支援技術に十分伝わらないケースがあります。
たとえば、次のようなUIです。
アイコンだけの検索ボタン
開閉するアコーディオン
ハンバーガーメニュー
エラーが出る入力フォーム
モーダルウィンドウ
タブ切り替えUI
こうしたUIに対して、「これは検索ボタンです」「このメニューは開いています」「この入力欄にはエラーがあります」といった情報を補うのがARIA属性です。
ただし、ARIAはHTMLの代わりではありません。W3CのUsing ARIAでは、必要なセマンティクスや動作を持つネイティブHTML要素・属性が使えるなら、まずそれを使うことがARIA利用の第一原則として示されています。
つまり、基本はこうです。
まず正しいHTMLを書く
HTMLだけでは足りない情報をARIAで補う
ARIAを付けたら、キーボード操作や読み上げも確認する
ARIA属性は「とりあえず付けるもの」ではなく、「必要な情報を正しく補うためのもの」と考えると扱いやすくなります。
どんなときにARIA属性が必要？
ARIA属性が必要になるのは、主に「見た目・状態・関係性」がHTMLだけでは伝わりにくいときです。
1. アイコンだけで意味を表しているとき
虫眼鏡アイコンだけの検索ボタンや、×アイコンだけの閉じるボタンは、視覚的には意味が分かります。
しかし、ボタン内にテキストがない場合、支援技術には何のボタンか伝わりにくくなります。
<button type="submit" aria-label="検索">
<span class="icon-search" aria-hidden="true"></span>
</button>このように aria-label を使うことで、見た目には表示されていない「検索」という名前を補えます。
2. UIの状態が変化するとき
アコーディオンやメニューのように、開いたり閉じたりするUIでは、現在の状態を伝える必要があります。
<button type="button" aria-expanded="false" aria-controls="faq1">
詳細を見る
</button>
<div id="faq1" hidden>
ここに詳細内容が入ります。
</div>aria-expanded は、対象の要素が展開されているか、折りたたまれているかを支援技術に伝える属性です。
見た目では開閉が分かっても、支援技術には状態が伝わらないことがあります。そのため、開閉UIでは aria-expanded を適切に更新することが大切です。
3. 入力フォームの補足説明やエラーを伝えたいとき
フォームでは、入力欄と説明文、エラーメッセージを関連付けることがあります。
<label for="email">メールアドレス</label>
<input
id="email"
type="email"
aria-describedby="emailHelp emailError"
aria-invalid="true"
>
<p id="emailHelp">半角英数字で入力してください。</p>
<p id="emailError">メールアドレスの形式が正しくありません。</p>aria-describedby を使うと、入力欄と補足説明・エラー文を関連付けられます。
また、aria-invalid="true" を指定することで、その入力欄がエラー状態であることを伝えられます。
よく使うARIA属性 TOP10
実務でよく出てくるARIA属性を、使いどころとあわせて整理します。
$$
\begin{array}{c|l|l}
\text{No.} & \text{ARIA属性} & \text{使いどころ} \\[4pt]
\hline
1 & \texttt{aria-label} & \text{アイコンボタンなど、見える文字がない要素} \\[6pt]
2 & \texttt{aria-labelledby} & \text{見出しや既存テキストを名前として使う要素} \\[6pt]
3 & \texttt{aria-describedby} & \text{フォームの補足説明やエラー文} \\[6pt]
4 & \texttt{aria-hidden} & \text{装飾アイコンや読み上げ不要な重複要素} \\[6pt]
5 & \texttt{aria-expanded} & \text{アコーディオンやメニューの開閉状態} \\[6pt]
6 & \texttt{aria-controls} & \text{ボタンが操作する対象コンテンツ} \\[6pt]
7 & \texttt{aria-current} & \text{現在ページ、現在位置、選択中のステップ} \\[6pt]
8 & \texttt{aria-invalid} & \text{入力エラーがあるフォーム項目} \\[6pt]
9 & \texttt{aria-live} & \text{検索結果件数や送信完了などの動的な通知} \\[6pt]
10 & \texttt{aria-modal} & \text{モーダルダイアログ}
\end{array}
$$
この中でも、Webサイト制作で特に登場しやすいのは aria-label、aria-hidden、aria-expanded、aria-controls、aria-describedby あたりです。
ただし、同じ要素に aria-label と aria-labelledby を両方付けるような実装は避けたいところです。
可視テキストを参照できる場合は aria-labelledby、見えるテキストがない場合は aria-label というように、使い分けると整理しやすくなります。
UI別 実装サンプル
ここからは、実務でよくあるUI別にARIA属性の使い方を見ていきます。
アイコンボタン
アイコンだけで意味を伝えている場合は、aria-label でボタンの目的を補います。
<button type="button" aria-label="メニューを開く">
<span class="icon-menu" aria-hidden="true"></span>
</button>アイコン自体は装飾なので、aria-hidden="true" を付けています。
一方で、ボタン内に「メニューを開く」というテキストが表示されている場合は、無理に aria-label を追加する必要はありません。
<button type="button">
メニューを開く
</button>まずは、見えるテキストで意味を伝えられないかを考えることが大切です。
アコーディオン
アコーディオンでは、ボタンをクリックしたときにコンテンツを開閉します。
このとき、見た目の開閉だけでなく、aria-expanded の値も更新します。
<button
type="button"
class="accordion-button"
aria-expanded="false"
aria-controls="accordion-content"
id="accordion-button"
>
よくある質問
</button>
<div
id="accordion-content"
class="accordion-content"
hidden
>
<p>ここに回答テキストが入ります。</p>
</div>.accordion-button {
width: 100%;
padding: 16px;
text-align: left;
cursor: pointer;
}
.accordion-content {
padding: 16px;
border: 1px solid #ddd;
}const button = document.getElementById('accordion-button');
const content = document.getElementById('accordion-content');
button.addEventListener('click', () => {
const isOpen = button.getAttribute('aria-expanded') === 'true';
button.setAttribute('aria-expanded', String(!isOpen));
content.hidden = isOpen;
});
この実装では、ボタンをクリックするたびに aria-expanded の値を true / false で切り替えています。
見た目の開閉だけでなく、支援技術に伝える状態も同時に更新することがポイントです。
現在ページを示すナビゲーション
ナビゲーションやパンくずリストでは、現在表示しているページを伝えたい場面があります。
そのときに使いやすいのが aria-current="page" です。
<nav aria-label="グローバルナビゲーション">
<ul>
<li><a href="/">ホーム</a></li>
<li><a href="/service" aria-current="page">サービス</a></li>
<li><a href="/contact">お問い合わせ</a></li>
</ul>
</nav>この例では、「サービス」が現在表示しているページであることを示しています。
見た目だけで現在地を表現するのではなく、支援技術にも現在位置が伝わるようにすることが大切です。
フォームのエラーメッセージ
フォームのエラーでは、単に赤文字を表示するだけでなく、入力欄とエラーメッセージを関連付けることが大切です。
<label for="name">お名前</label>
<input
id="name"
type="text"
aria-invalid="true"
aria-describedby="name-error"
>
<p id="name-error">お名前を入力してください。</p>aria-invalid="true" は、入力欄がエラー状態であることを示します。
aria-describedby="name-error" を指定することで、入力欄とエラーメッセージを関連付けられます。
モーダル
モーダルでは、表示中の要素がダイアログであることを伝えるために role="dialog" や aria-modal="true" を使うことがあります。
<div
role="dialog"
aria-modal="true"
aria-labelledby="modal-title"
>
<h2 id="modal-title">お問い合わせ前の確認</h2>
<p>送信前に入力内容をご確認ください。</p>
<button type="button">閉じる</button>
</div>aria-labelledby="modal-title" を指定することで、モーダルのタイトルとダイアログを関連付けています。
ただし、ARIA属性を付けるだけでは、モーダルとしての動作は完成しません。
実際の実装では、次のような対応も必要になります。
モーダルを開いたときに、フォーカスをモーダル内へ移動する
Tabキーの移動範囲をモーダル内に制限する
Escキーで閉じられるようにする
モーダルを閉じたあと、元のボタンへフォーカスを戻す
ARIAはあくまで情報を補うものです。
動作やフォーカス管理は、JavaScriptで別途実装する必要があります。
ARIA属性を使うときの注意点
ARIA属性で一番大切なのは、「付けること」ではなく「正しく伝わること」です。
まずネイティブHTMLを使う
クリックできる要素なら、まず button や a を検討します。
避けたい例です。
<div role="button" tabindex="0">送信する</div>できれば、次のように書きます。
<button type="button">送信する</button>button 要素には、ボタンとしての意味やキーボード操作が最初から備わっています。
ARIAで疑似的にボタンを作るより、ネイティブHTMLを使うほうが安全です。
見た目とARIAの状態をずらさない
ハンバーガーメニューが開いているのに aria-expanded="false" のままだと、支援技術には誤った状態が伝わります。
UIの表示状態とARIA属性の値は、必ずセットで更新します。
たとえば、メニューを開いたら aria-expanded="true"、閉じたら aria-expanded="false" に戻すようにします。
重要な要素に aria-hidden を付けない
aria-hidden="true" は、要素を支援技術から隠すための属性です。
装飾アイコンには便利ですが、ボタンやリンク、重要なテキストに付けると、必要な情報が伝わらなくなる可能性があります。
避けたい例です。
<button aria-hidden="true">送信する</button>操作できる要素に aria-hidden="true" を付けるのは避けましょう。
aria-hidden は、基本的に装飾アイコンや読み上げ不要な重複要素に使うものとして考えると安全です。
キーボード操作も確認する
ARIA属性を付けても、キーボードで操作できなければ使いやすいUIとは言えません。
確認したいポイントは次の通りです。
Tabキーで必要な要素に移動できるか
EnterキーやSpaceキーで操作できるか
モーダルを開いたとき、フォーカス位置が自然か
閉じたあと、元のボタンへフォーカスが戻るか
フォーカス中の要素が視覚的に分かるか
特にモーダル、メニュー、タブ、アコーディオンは、マウス操作だけで確認を終えないようにしたいところです。
まとめ
ARIA属性は「足す」より「補う」意識で使う。
ARIA属性は、Webアクセシビリティを高めるうえで重要な実装手段です。
ただし、ARIAをたくさん付ければよいわけではありません。
まずは正しいHTMLを書く。
そのうえで、HTMLだけでは伝わらないラベル、状態、説明、関係性をARIA属性で補う。
この順番が大切です。
実務では、まず aria-label、aria-hidden、aria-expanded、aria-controls、aria-describedby あたりから見直すと、アイコンボタン、アコーディオン、フォーム、ナビゲーションなどの改善につなげやすくなります。
「見た目では分かるけれど、読み上げても伝わるか？」という視点を持つことで、より多くのユーザーに使いやすいWebサイトへ近づけます。
次にUIを実装するときは、ぜひ「まずHTMLで表現できるか」「状態や説明は支援技術にも伝わるか」をチェックしてみてください。
