Springfalfal

Web制作（特にコーディングやWordPressテーマ開発など）において、

アクセシビリティ（スクリーンリーダーなどの音声読み上げや支援技術への対応）を

高めるために頻繁に使用する、実用性の高い

ARIA属性（WAI-ARIA）を厳選してまとめました。

セマンティックなHTML（<nav> や <button> など）だけではカバーしきれない、

「動的なレイアウト」や「デザイン重視のマークアップ」を行う際に非常に重宝します。

• ・ ARIA属性とは？
• ・ なぜARIA属性が必要なのか？
• ・ ARIA属性の３つの分類
• ・ 使う上での最も重要なルール（第一法則）
• ・ よく使うARIA属性
  • 1. 存在やテキストをコントロールする（最頻出）
  • 2. 動的な状態を伝える（アコーディオン・メニュー用）
  • 3. フォームやエラーを伝える
• ・ まとめ：よくある「ハンバーガーメニュー」での組み合わせ例

ARIA属性とは？

ARIA属性（エリアぞくせい）とは、

「HTMLだけでは伝えきれない『要素の役割』や『現在の状態』を、

　ブラウザや音声読み上げソフト（スクリーンリーダー）に正しく伝えるための補助用コード」です。

正式名称を 

WAI-ARIA（ウェイ・エリア / Web Accessibility Initiative – Accessible Rich Internet Applications）

といいます。

Webサイトのアクセシビリティ（障害の有無や利用環境に関わらず、誰もが快適に使えること）

これを向上させるために世界標準で定められています。

なぜARIA属性が必要なのか？

現在のWebサイトは、HTML本来の役割を超えて、

JavaScriptなどで複雑な動き（アニメーションや動的な変化）をするものが増えています。

HTML本来のタグ（<nav> や <button>、<form> など）を正しく使う（＝セマンティック・マークアップ）のは大前提です。

しかし、それだけではどうしても表現できないケースが生まれます。

具体例：ハンバーガーメニューの場合

一般的なスマホ用の「ハンバーガーメニュー」をコーディングする場合を考えてみます。

• 目が見えるユーザー： ボタンのデザインを見て「これがメニューだな」と認識し、クリックしてメニューが開けば「あ、開いたな」と視覚的に理解できます。
• 音声読み上げ（スクリーンリーダー）を使うユーザー： HTMLが <button><span></span><span></span><span></span></button> のようになっていると、
  機械は「ボタン」であることしか分からず、「何のボタンなのか」、クリックした後に「今メニューが開いているのか閉じているのか」を判別できません。

ここでARIA属性の出番です。

<!-- ARIA属性を使った例 -->
<button aria-label="メニューを開く" aria-expanded="false">
  <span></span>
</button>

このように属性を添えてあげることで、機械（支援技術）がユーザーに対して

「メニューを開くボタン、現在は閉じ破られています」や

「現在は開いています」

と、正しく声でガイドできるようになります。

ARIA属性の3つの分類

ARIA属性は、役割に応じて大きく以下の3つに分類されます。

1. ロール（Roles）：「これは何？」を表す

要素がどのような「役割（機能）」を持っているかを指定します。

• role="tab"（これはタブ切り替えのスイッチです）
• role="dialog"（これはポップアップで出てきたモーダルウィンドウです）

2. プロパティ（Properties）：「どんな特徴がある？」を表す

要素の性質や、他の要素との関係性を表します。

• aria-label="閉じる"（画面に文字は無いけれど、このボタンの意味は『閉じる』です）
• aria-controls="menu-id"（このボタンは、menu-id という要素を操作しています）

3. ステート（States）：「今どんな状態？」を表す

JavaScriptの動きなどによって常に変化する「現在の状態」を表します。

• aria-expanded="false"（今は「閉じている」状態です）
• aria-expanded="true"（JavaScriptによってメニューが開いたので「開いている」状態に変化しました）

使う上での最も重要なルール（第一法則）

WAI-ARIAの仕様書には、非常に有名な「第一法則（The First Rule of ARIA）」があります。

それは、

「HTML5の既存のタグで表現できるなら、ARIA属性は使うな」

というものです。

例えば、ただのリンクを作りたいときに、

わざわざ <div role="link"> と書くのではなく、

普通に <a> タグを使えば、ブラウザが最初から「リンク」として正しく認識してくれます。

ARIA属性は、あくまで

「デザインや動的な仕組みの都合上、HTML本来のタグだけでは情報が不足してしまうとき」

にだけ、補足として正しく付け足すのがプロのコーディングの鉄則です。

よく使うARIA属性

1. 存在やテキストをコントロールする（最頻出）

デザインの都合でHTMLの構造と見せ方を変えたいときや、アイコンに意味を持たせるときに必須の属性です。

1-1. aria-hidden="true"（支援技術から隠す）

• 用途: 画面には表示するが、スクリーンリーダー（音声読み上げ）には無視させたい要素に使います。
• よくある場面: Font Awesomeなどのアイコンフォントや、装飾目的の背景デザインなど、音声で読み上げる必要がない（または二重読み上げになってしまう）要素。

<!-- アイコン自体は読み上げず、テキストの「ホーム」だけを読ませる -->
<a href="/">
  <i class="fa-solid fa-house" aria-hidden="true"></i> ホーム
</a>

1-2. aria-label="テキスト"（見えないラベルを付ける）

• 用途: 画面上にはテキストが表示されていない要素に対して、音声読み上げ用の説明テキストを設定します。
• よくある場面: 文字のない「アイコンだけのボタン」（ハンバーガーメニューの三本線、検索ボタン、SNSアイコンなど）。

<!-- ボタンの中に文字がないため、aria-label でボタンの役割を伝える -->
<button class="menu-trigger" aria-label="メニューを開く">
  <span></span>
  <span></span>
  <span></span>
</button>

<a href="https://x.com/..." aria-label="公式X（旧Twitter）を開く">
  <i class="fa-brands fa-x-twitter" aria-hidden="true"></i>
</a>

2. 動的な状態を伝える（アコーディオン・メニュー用）

JavaScriptやjQueryでクラス（.is-open など）を切り替えて、

メニューの開閉やタブの切り替えを行う際、

「今どういう状態か」

を支援技術に伝えるための属性です。

2-1. aria-expanded="true | false"（展開状態を表す）

• 用途: メニューやアコーディオン、ドロップダウンが「開いているか（true）」「閉じているか（false）」を表します。
• よくある場面: スマホ用のナビゲーションメニュー（ハンバーガーメニュー）、FAQのアコーディオン。

2-2. aria-controls="対象のID"（制御対象を指定する）

• 用途: そのボタンが「画面上のどの要素をコントロールしているか」をIDで紐付けます。上記 aria-expandedとセットでよく使われます。

<!-- JavaScriptで状態に合わせて true / false を切り替える -->
<button class="js-hamburger" aria-expanded="false" aria-controls="main-nav" aria-label="メニュー">
  <span class="hamburger__line"></span>
</button>

<nav id="main-nav" class="js-nav">
  <!-- メニュー中身 -->
</nav>

2-3. aria-selected="true | false"（選択状態を表す）

• 用途: 複数の選択肢（タブメニューなど）の中で、「現在どれが選択されているか」を表します。

3. フォームやエラーを伝える

入力フォームのコーディングで、ユーザーに必須項目やエラーを正確に伝えるために役立ちます。

3-1. aria-required="true"（必須入力）

• 用途: その入力項目が必須であることを伝えます。
  HTML5の required 属性と似ていますが、古い環境への配慮や、JSでの柔軟なバリデーション制御を行いたい場合に明示します。

3-2. aria-invalid="true | false"（エラー状態）

• 用途: 入力された内容にエラーがあるかどうかを示します。
  JavaScriptのバリデーション（入力チェック）でエラーを検知した際、動的に true に切り替えます。

3-3. aria-describedby="説明要素のID"（詳細説明の紐付け）

• 用途: 入力欄に対して、エラーメッセージや注記（入力例など）を紐付けて一緒に読み上げさせます。

<label for="email">メールアドレス</label>
<!-- エラーがある時は aria-invalid を true にし、エラーメッセージのIDを紐付ける -->
<input type="email" id="email" name="email" aria-invalid="true" aria-describedby="email-error">
<span id="email-error" class="error-msg">メールアドレスの形式が正しくありません。</span>

まとめ：よくある「ハンバーガーメニュー」での組み合わせ例

実務で最もよく使うコンポーネントである「ハンバーガーメニュー」に

これらの属性を組み込むと、以下のような美しいセマンティック・マークアップになります。

<!-- 1. ボタン側 -->
<button class="nav-toggle" 
        aria-controls="global-navigation" 
        aria-expanded="false" 
        aria-label="メニューを開く">
  <span class="nav-toggle__line" aria-hidden="true"></span>
</button>

<!-- 2. メニュー側 -->
<nav id="global-navigation" class="nav-menu">
  <ul>
    <li><a href="/">ホーム</a></li>
    <li><a href="/about">当サイトについて</a></li>
  </ul>
</nav>

コーディングのポイント

 JavaScript（jQueryなど）でメニューの開閉イベント（click）を制御する際、

クラスの付け外し（.is-active など）と同時に、

attr('aria-expanded', 'true') 

のようにARIA属性の値も一緒に書き換える設計にするのがアクセシビリティ向上に繋がります。