Webアクセシビリティを高めるために利用されるのがARIA（Accessible Rich Internet Applications）属性です。aria属性を正しく使うことで、スクリーンリーダーなどの支援技術にコンテンツの意味や状態を伝えることができ、より多くのユーザーにとって利用しやすいWebサイトになります。ここではaria属性の基本と実用的な使い方を紹介します。
ARIA属性の基本
ARIAは「役割（role）」「状態（state）」「プロパティ（property）」を補足的に指定する仕組みです。HTML5で提供されるセマンティック要素を優先し、どうしても不足する部分をARIAで補うのが基本方針です。
よく使われる属性の例
<!-- ボタンの状態を伝える -->
<button aria-pressed="false">お気に入り</button>
<!-- モーダルダイアログ -->
<div role="dialog" aria-modal="true" aria-labelledby="dialog-title">
<h2 id="dialog-title">確認</h2>
<p>本当に削除しますか？</p>
</div>
<!-- 補足説明を関連付ける -->
<input type="text" aria-describedby="note">
<small id="note">8文字以上で入力してください</small>
aria-labelとaria-labelledby
要素にラベルを付与する場合、aria-labelは直接テキストを指定し、aria-labelledbyは既存の要素を参照してラベルを関連付けます。
<!-- aria-label -->
<button aria-label="閉じる">×</button>
<!-- aria-labelledby -->
<h2 id="section-title">お知らせ</h2>
<section aria-labelledby="section-title">
<p>最新情報をお届けします。</p>
</section>
aria-hiddenで非表示扱いにする
aria-hidden=”true”を指定すると、要素はスクリーンリーダーに無視されます。装飾目的のアイコンなど意味を持たない要素に適用します。
<span class="icon" aria-hidden="true">★</span> 人気商品
実用例：ナビゲーションメニュー
aria-currentを使えば、現在地をスクリーンリーダーに伝えられます。
<nav aria-label="グローバルナビゲーション">
<ul>
<li><a href="/" aria-current="page">ホーム</a></li>
<li><a href="/about">会社概要</a></li>
<li><a href="/contact">お問い合わせ</a></li>
</ul>
</nav>
実用例：アコーディオン
アコーディオンUIではaria-expandedやaria-controlsを使って開閉状態を伝えます。
<button aria-expanded="false" aria-controls="faq1">質問1</button>
<div id="faq1" hidden>回答1の内容</div>
まとめ
aria属性は本来のHTML要素で表現できない情報を補完し、支援技術に正しく伝えるための仕組みです。使いすぎは逆に混乱を招くため、まずはセマンティックHTMLを優先し、不足部分にaria属性を適切に組み合わせるのが理想です。aria-labelやaria-labelledby、aria-hiddenなど基本的な属性から取り入れ、ナビゲーションやフォーム、UIコンポーネントのアクセシビリティを向上させましょう。
