WAI-ARIA活用の基本知識と一覧

（2025.5.12）

WAI-ARIA活用の基本知識と一覧：目次

WAI-ARIAとは？

WAI-ARIAとは Web Accessibility Initiative – Accessible Rich Internet Applications の略で、スクリーンリーダーなどの支援技術に情報を正しく伝えるためのHTML属性（ARIA属性）の仕様です。通常のHTMLだけでは伝えきれない役割や状態を補うことで、WEBアプリや動的UIのアクセシビリティを向上させます。

このページでは、WEBアクセシビリティ対応に欠かせないARIA属性について、基本から実践的な使い方までを体系的にまとめたリファレンスです。スクリーンリーダー対応の限界や誤用例にも触れ、実務で迷わないための指針となる内容です。チーム内共有・教育用資料・実装時の確認リストとしても活用できます。

よく使うARIAの属性

基本の属性

ARIAの基本属性は、画面に表示されないラベルや補足説明をスクリーンリーダーに伝えるために使われます。要素に意味や文脈を与える役割があり、アクセシブルなUIの基礎となる重要な属性群です。正しい用途の理解が不可欠です。

属性名 説明 主な使用ケース 注意点
aria-label 画面に表示されないテキストラベルを提供 アイコンボタン、リンク、カスタムUIなど 
<button aria-label="閉じる">✕</button>
 ラベルがUIに表示されない場合に限定
aria-labelledby 他の要素のIDを参照してラベルを設定 モーダル、フォーム、複数ラベルが必要な場合 
<div aria-labelledby="title">…</div>
 ID指定が正しくないと読み上げ不可
aria-describedby 補足説明のIDを指定し、読み上げに追加 入力フォームの説明文、補足の読み上げ 
<input aria-describedby="help">
 長すぎるテキストは避ける
aria-hidden 読み上げ対象から除外 視覚的装飾、読み上げ不要な要素 
<span aria-hidden="true">*</span>
 本文の重要情報を除外しないよう注意

ロール（役割）の指定

ARIAロールは、要素の『役割』を明示的に指定するための属性で、スクリーンリーダーなどにその機能や目的を伝えます。カスタムUIでボタンやダイアログなどの意味を補完する際に使用され、HTMLの構造を補強する役割があります。

属性名 説明 使用例
role="button" divやspanをボタンとして扱う カスタムUIボタン
role="dialog" モーダルダイアログを示す ポップアップやダイアログウィンドウ
role="navigation" ナビゲーション領域を示す グローバルナビ、パンくずリストなど
role="alert" 重要な通知を即時読み上げ エラーメッセージや緊急メッセージ

状態・プロパティ

ARIAの状態・プロパティ属性は、UI要素の『現在の状態』（展開中・選択中・無効など）をスクリーンリーダーに伝えるために使います。動的に変化するインターフェースの意味や挙動を補足し、ユーザーに正確な状況を伝える重要な属性群です。

属性名 説明 状態 例
aria-expanded 展開・折りたたみ状態 true/false アコーディオンメニューなど
aria-checked チェック状態 true/false/mixed チェックボックス、トグルスイッチなど
aria-disabled 無効状態 true/false 非アクティブなボタン・入力項目
aria-selected 選択状態を表す true/false タブ、リストの選択項目

ARIAの活用例

UI別ARIA活用例

アコーディオン

『開閉状態』や『関連するパネル要素』をスクリーンリーダーに正しく伝えるために、ARIA属性を追加します。

要素 属性 用途
開閉ボタン aria-expanded メニューの状態 [true（開）/false（閉）]
開閉ボタン aria-controls 関連付けるコンテンツ領域のIDと一致させる
コンテンツ領域 id ボタンのaria-controlsと一致させる
シンプルなHTML+ARIA実装例
<div id="groupA">
  <button
    aria-expanded="false" ←状態に応じfalse/trueをJavaScriptで変更
    aria-controls="targetA" ←コンテンツを包括する要素のIDと同じにする
    id="opnerBtn"
  >
    詳細を表示
  </button>
  <div id="targetA" hidden> ←状態に応じfalse/trueをJavaScriptで変更（デフォルトはtrue）
    <p>この部分が開閉されるコンテンツです。</p>
  </div>
</div>
JavaScriptでの開閉制御（ARIA対応）
const opnerBtn = document.getElementById('opnerBtn');
const targetA  = document.getElementById('targetA');

opnerBtn.addEventListener('click', () => {
  const expanded = opnerBtn.getAttribute('aria-expanded') === 'true';
  opnerBtn.setAttribute('aria-expanded', String(!expanded)); ←ボタンの属性値を状態に応じfalse/trueに
  targetA.hidden = expanded;←ボタンに合わせてfalse/trueに
});
タブメニュー

タブメニューは『タブ』『対応するパネル』『選択状態』などを正しくスクリーンリーダーに伝える必要があります。ARIA属性で関係性と状態を明示します。

要素 属性 用途
タブリスト role="tablist" タブを囲む要素（親要素）を示す
各タブ role="tab" タブボタンと識別させる
各タブ aria-selected 選択中のタブに true、それ以外は false
各タブ aria-controls 紐づくパネルのIDを指定
各タブ id 紐づくパネルの aria-labelledby と一致させる
各パネル role="tabpanel" コンテンツ領域と識別させる
各パネル aria-labelledby 紐づくタブのIDを指定
各パネル id 紐づくタブの aria-controls と一致させる
シンプルなHTML+ARIA実装例
<nav role="tablist">
  <button id="tabA" role="tab" aria-selected="true" aria-controls="panelA">タブA</button>
  <button id="tabB" role="tab" aria-selected="false" aria-controls="panelB">タブB</button>
</nav>
<div id="panelA" role="tabpanel" aria-labelledby="tabA">
  <p>タブAのコンテンツです。</p>
</div>
<div id="panelB" role="tabpanel" aria-labelledby="tabB" hidden>
  <p>タブBのコンテンツです。</p>
</div>
JavaScriptでの切り替え制御（ARIA対応）
const tabs   = document.querySelectorAll('[role="tab"]');
const panels = document.querySelectorAll('[role="tabpanel"]');

tabs.forEach(tab => {
  tab.addEventListener('click', () => {
    // タブの選択状態を更新
    tabs.forEach(t => t.setAttribute('aria-selected', 'false')); ←タブボタンを全てfalse
    tab.setAttribute('aria-selected', 'true'); ←対象のタブボタンのみtrue

    // 対応するパネルの表示制御
    panels.forEach(panel => panel.hidden = true); ←コンテンツを全て非表示
    const panelId = tab.getAttribute('aria-controls');
    document.getElementById(panelId).hidden = false; ←対象のコンテンツのみ表示
  });
});
ハンバーガーメニュー

モバイルなどで使われる開閉式ナビゲーション（ハンバーガーメニュー）では、『メニューの開閉状態』や『ナビゲーションの関連性』をスクリーンリーダーに正しく伝えることが重要です。

要素 属性 用途
開閉ボタン aria-expanded メニューの状態 [true（開）/false（閉）]
開閉ボタン aria-controls 操作対象のナビゲーションエリアのIDを指定
開閉ボタン aria-label アイコンボタンの際、内容をテキストで明示
ナビゲーションエリア id ボタンのaria-controlsと一致させる
ナビゲーションエリア role="navigation" ナビゲーション領域として指定
シンプルなHTML+ARIA実装例
<button
  id="menuBtn"
  aria-controls="mainNav" ←ナビゲーションを包括する要素のIDと同じにする
  aria-expanded="false" ←状態に応じfalse/trueをJavaScriptで変更
  aria-label="メニューを開く"
>
  ☰
</button>

<nav id="mainNav" role="navigation" hidden> ←状態に応じfalse/trueをJavaScriptで変更（デフォルトはtrue）
  <ul>
    <li><a href="#">トップページ</a></li>
    <li><a href="#">サービス</a></li>
    <li><a href="#">お問い合わせ</a></li>
  </ul>
</nav>
JavaScriptでの開閉制御（ARIA対応）
const menuBtn = document.getElementById('menuBtn');
const mainNav = document.getElementById('mainNav');

menuBtn.addEventListener('click', () => {
  const expanded = menuBtn.getAttribute('aria-expanded') === 'true';
  menuBtn.setAttribute('aria-expanded', String(!expanded)); ←ボタンの属性値を状態に応じfalse/trueに
  mainNav.hidden = expanded; ←対象のコンテンツのみ表示
});
モーダルウィンドウ（ダイアログ）

モーダルは、背景から独立して「現在の操作に集中させる」UIであり、スクリーンリーダーにも明確に伝える必要があります。ARIA属性を用いて、ダイアログであること・タイトル・内容・閉じる操作を明示します。

要素 属性 用途
モーダル role="dialog" スクリーンリーダーに「ダイアログ」と伝える
モーダル aria-modal="true" モーダルが現在の操作の中心であると示す
モーダル aria-labelledby モーダルのタイトル（見出し）のIDを参照
モーダル aria-describedby モーダル本文の説明領域のIDを参照
シンプルなHTML+ARIA実装例
<button id="openModal">モーダルを開く</button>

<div
  id="modal"
  role="dialog"
  aria-modal="true"
  aria-labelledby="modalTitle" ←モーダルの見出しIDと同じにする
  aria-describedby="modalDesc" ←モーダルのコンテンツを包括する要素のIDと同じにする
  hidden ←状態に応じfalse/trueをJavaScriptで変更（デフォルトはtrue）
>
  <h2 id="modalTitle">お知らせ</h2>
  <p id="modalDesc">これはモーダルウィンドウの例です。</p>
  <button id="closeModal">閉じる</button>
</div>
JavaScriptでの開閉制御（ARIA対応）
const openBtn = document.getElementById('openModal');
const closeBtn = document.getElementById('closeModal');
const modal = document.getElementById('modal');

openBtn.addEventListener('click', () => {
  modal.hidden = false;
  modal.focus(); // モーダルにフォーカス
});

closeBtn.addEventListener('click', () => {
  modal.hidden = true;
  openBtn.focus(); // 元のボタンにフォーカスを戻す
});

目的別活用例

以下は『どんな目的でARIA属性を使いたいか』に応じた逆引きリストです。用途から必要な属性を探す際の参考にしてください。

目的 属性と使用例
視覚に表示されないラベルを読み上げたい aria-label

アイコンボタン、カスタムUI
既存要素の内容をラベルにしたい aria-labelledby

モーダルのタイトル、複数要素を1つのラベルに
補足情報や説明文を読み上げさせたい aria-describedby

入力欄の説明文、エラーメッセージ
読み上げさせたくない要素を除外したい aria-hidden

装飾アイコン、視覚だけで意味が伝わる記号など
divやspanをボタンやリンクのように扱いたい role

JavaScript制御のカスタムUI（button, link など）
要素の状態（開閉・選択・有効など）を伝えたい aria-expanded, aria-checked, aria-disabled など

アコーディオン、チェックボックス、トグル
通知やアラートを即座に読み上げさせたい role="alert", aria-live

フォーム送信後のエラー、リアルタイム更新

ARIA利用についての注意点

ARIA（Accessible Rich Internet Applications）を利用する際は、便利である一方で誤用するとアクセシビリティを損ねる危険性もあります。以下に、実務で特に重要な注意点を詳しく解説します。

HTMLの標準要素が最優先

HTMLにはアクセシビリティ対応されたタグが用意されているので、ARIAは『代替手段』であり『第一選択肢』ではありません。

例：<button>, <a>, <form>, <label>など

これらの標準的なHTML要素は、ブラウザ・スクリーンリーダーにとって意味が理解されやすいです。

NG例：

<div role="button" onclick="hogehoge()">OK</div> <!-- → <button> を使うのが正解 -->

OK例：

<button onclick="hogehoge()">OK</button>

使う属性の意味と目的を正しく理解する

属性名 主な用途
aria-label ラベルを明示（視覚的には表示されない）
aria-labelledby 別要素の内容をラベルとして関連付ける
aria-describedby 補足説明やヒントを関連付ける

よくある誤用例：

  • aria-label で長文を入れる（→本来は aria-describedby の役割）
  • aria-labelledby のIDが存在しない（→スクリーンリーダーで何も読まれない）

スクリーンリーダー対応の限界も理解する

スクリーンリーダーはOSやブラウザ、アプリの仕様に依存するため、ARIA属性が意図通りに読み上げられない場合があります。正しく実装しても全ての環境で一貫した体験を保証できるわけではなく、実機検証とシンプルな構造設計が重要です。

仕様どおりに動かないケース：

  • aria-live の読み上げが遅延する
  • aria-haspopup の意味が十分に伝わらない
  • AndroidとiOSで読み上げ順が異なる

このような環境差を踏まえ、過信せず、重要な情報はできるだけ明示的なHTMLと文言で補完するのがベストです。

また、同じARIA属性でもVoiceOverでは読み上げられても、NVDAでは無視されるなど、動作の一貫性は保証されません。

WAI-ARIA活用の基本知識と一覧のまとめ

ARIA属性は、HTMLだけでは伝わりにくいUIの意味や状態を補足し、支援技術に正確な情報を提供する重要な手段です。本リファレンスでは『基本属性』『ロール』『状態・プロパティ』を中心に、実装時に迷いやすいポイントや使用例を整理しました。

ARIAは便利な反面、誤用するとアクセシビリティを損ねる危険性もあります。HTMLの構造を優先し、正しい属性選びと実機検証を重視することが大切です。このページがチーム内共有や日々のコーディングの指針となれば幸いです。

私たちは、WEBサービスのアクセシビリティ対応のご相談はもちろん、御社のWEB戦略パートナーとしてお役に立てるご支援をしています。いつでもお気軽にお問い合わせください。

※本情報はページ公開時のものです。情報は常に更新され掲載内容と異なる場合がございます。

アクセシビリティ対応のご相談も承っています。詳しくはこちらをご覧ください。

アクセシビリティ対応の基本と実践ポイント [質問箱 (FAQ)] では、
WEB担当者のみなさまの悩みに、一問一答形式でお答えしています！！