HTML

ARIA (Accessible Rich Internet Applications) attributes are an HTML extension specification that provides assistive information to help users who rely on assistive technologies correctly perceive and interact with web content.

ARIA 属性

ARIA属性とは

ARIA (Accessible Rich Internet Applications) は、Webページやアプリケーションのアクセシビリティを向上させるための技術仕様です。特に、支援技術（スクリーンリーダーなど）を利用するユーザーが、動的コンテンツやインタラクティブな要素を適切に認識し、操作できるようにするために設計されています。

ARIAが必要な理由

通常のHTMLには、リンク (<a>)、ボタン (<button>)、フォーム (<input>、<select> など) などのアクセシブルな要素が備わっています。しかし、JavaScriptやCSSを駆使したカスタムコンポーネントや、動的なコンテンツの変化を適切に通知できる仕組みは不十分です。

ARIAを利用することで、以下のような場面でアクセシビリティを向上させることができます。

ARIAの基本概念

ARIAは大きく分けて以下の3つの要素で構成されます。

ARIA ロール (Roles)
要素の意味を定義する。
ARIA プロパティ (Properties)
要素の追加情報（名前、説明、関係など）を提供する。
ARIA ステート (States)
要素の状態（選択されているか、無効化されているかなど）を示す。

ARIA ロール (Roles)

ARIAロールは、HTML要素に追加して、特定の機能や目的をスクリーンリーダーに伝えるための属性です。

代表的なARIAロール

role="button"
クリック可能なボタンを示す。独自の div などをボタンとして扱う場合に使用。
role="alert"
重要なメッセージを通知するアラートを示す。
role="dialog"
モーダルダイアログを示す。
role="navigation"
ナビゲーション領域を示す。
role="tooltip"
ツールチップ（補足説明）を示す。

ロールの使用例

HTML

<div role="button" tabindex="0" onclick="alert('クリックされました')">
	カスタムボタン
</div>
カスタムボタン

ARIA プロパティ (Properties)

ARIAプロパティは、要素の追加情報を提供するために使われます。

代表的なARIAプロパティ

aria-labelledby
参照する要素のIDを指定し、その要素をラベルとして扱う。
aria-describedby
参照する要素のIDを指定し、その要素が補足説明を提供する。
aria-hidden
要素を支援技術に非表示にする（true / false）。
aria-live
動的に更新されるコンテンツをどのように通知するか指定する（polite, assertive など）。

HTML

<p id="description">このボタンをクリックすると、メッセージが表示されます。</p>
<button aria-describedby="description">クリック</button>

ARIA ステート (States)

ARIAステートは、要素の現在の状態を示します。

代表的なARIAステート

aria-checked
チェックボックスの状態を示す（true, false, mixed）。
aria-expanded
折りたたみ可能な要素の展開状態を示す（true, false）。
aria-disabled
要素が無効化されていることを示す（true, false）。
aria-selected
項目が選択されているかどうかを示す（true, false）。

ステートの使用例

HTML

<button aria-expanded="false" onclick="toggleMenu(this)">メニュー</button>
<div id="menu" hidden>
	<ul>
		<li>アイテム1</li>
		<li>アイテム2</li>
	</ul>
</div>

<script>
	function toggleMenu(button) {
		const expanded = button.getAttribute('aria-expanded') === 'true';
		button.setAttribute('aria-expanded', !expanded);
		document.getElementById('menu').hidden = expanded;
	}
</script>

ARIAのベストプラクティス

可能な限りネイティブHTML要素を使用する
例えば、<button> は role="button" より優先する。
適切なARIAロールを使う
role="alert" は、動的な警告メッセージに適用する。
不要なARIA属性を使わない
role="heading" を <h1> に適用するのは冗長。
キーボード操作と組み合わせる
tabindex を使い、キーボード操作を考慮する。
支援技術でテストする
スクリーンリーダー（NVDA, VoiceOver など）を用いて動作確認する。

まとめ

ARIAは、支援技術ユーザーにとってWebの利用体験を向上させる強力なツールです。しかし、適切に実装しないと逆に使いづらくなることもあるため、ネイティブHTMLの特性を活かしつつ、必要に応じてARIAを追加するのがベストプラクティスです。