Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

HTMLタグ辞典

トップページ
HTMLタグ辞典
aria-hidden / aria-expanded / aria-live

aria-hidden / aria-expanded / aria-live

『aria-hidden』『aria-expanded』『aria-live』はWAI-ARIAの属性で、要素の表示状態や動的なコンテンツの更新をスクリーンリーダーなどの支援技術に伝えるために使用します。

構文

<!-- aria-hidden: スクリーンリーダーから隠す -->
<span aria-hidden="true">🎉</span>

<!-- aria-expanded: 開閉状態を伝える -->
<button aria-expanded="false" aria-controls="menu">メニュー</button>
<ul id="menu" hidden>...</ul>

<!-- aria-live: 動的更新をスクリーンリーダーに通知 -->
<div aria-live="polite">読み込み完了しました。</div>

<!-- aria-checked: チェック状態を伝える -->
<div role="checkbox" aria-checked="true">同意する</div>

<!-- aria-disabled: 無効状態を伝える -->
<button aria-disabled="true">送信</button>

属性一覧

属性	概要
aria-hidden	「true」を指定するとスクリーンリーダーの読み上げ対象から除外されます。装飾的なアイコンや重複コンテンツの非表示に使用します。
aria-expanded	折りたたみメニューやアコーディオンなど、開閉できる要素の現在の状態を「true」（開いている）または「false」（閉じている）で伝えます。
aria-live	動的に更新されるコンテンツの通知方法を指定します。「polite」（現在の読み上げ後に通知）・「assertive」（即座に割り込み通知）・「off」（通知しない）を指定できます。
aria-checked	カスタムチェックボックスやラジオボタンのチェック状態を「true」「false」「mixed」で伝えます。
aria-disabled	「true」を指定すると要素が無効状態であることを伝えます。HTML の disabled 属性と異なり、フォーカスやクリックイベントは残ります。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
</head>
<body>

  <!-- aria-hidden: 装飾アイコンを読み上げ対象から除外 -->
  <button>
    <span aria-hidden="true">📧</span>
    メールを送る
  </button>

  <!-- aria-expanded: アコーディオンの開閉状態 -->
  <button id="toggle" aria-expanded="false" aria-controls="panel">
    詳細を見る
  </button>
  <div id="panel" hidden>
    <p>ここに詳細な内容が表示されます。</p>
  </div>

  <!-- aria-live: 非同期処理の結果を通知 -->
  <div id="status" aria-live="polite"></div>

  <script>
    // ボタンクリックでパネルの開閉と aria-expanded を切り替える
    const btn = document.getElementById('toggle');
    const panel = document.getElementById('panel');
    btn.addEventListener('click', () => {
      const isOpen = btn.getAttribute('aria-expanded') === 'true';
      btn.setAttribute('aria-expanded', !isOpen);
      panel.hidden = isOpen;
    });

    // 非同期処理の完了をスクリーンリーダーに通知
    setTimeout(() => {
      document.getElementById('status').textContent = 'データの読み込みが完了しました。';
    }, 2000);
  </script>

</body>
</html>

実行結果

スクリーンリーダーは📧を読み飛ばし「メールを送る、ボタン」と読み上げます。アコーディオンボタンは「詳細を見る、折りたたみ、閉じています、ボタン」と案内され、クリックで開いた際に「開いています」に変わります。2秒後にステータスエリアの更新が「データの読み込みが完了しました。」と読み上げられます。

<!-- スクリーンリーダーの読み上げイメージ -->
📧ボタン  → 「メールを送る、ボタン」（アイコンはスキップ）
アコーディオン → 「詳細を見る、折りたたみ、閉じています、ボタン」
クリック後 → 「詳細を見る、折りたたみ、開いています、ボタン」
2秒後    → 「データの読み込みが完了しました。」（割り込まず通知）

概要

『aria-hidden="true"』は要素をスクリーンリーダーの読み上げ対象から除外します。装飾的なアイコン・絵文字・重複テキストなどに使用し、支援技術のユーザーが余分な情報を聞かずに済むようにします。フォーカス可能な要素（ボタン・リンク・入力欄）に『aria-hidden="true"』を付けてはいけません。キーボード操作できるのにスクリーンリーダーから見えない要素が生まれてしまいます。

『aria-live』は検索結果の更新・通知メッセージ・エラー表示など、JavaScriptで動的に変わるコンテンツに使います。「polite」は現在の読み上げが終わってから通知するため、通常のフィードバックに適しています。「assertive」は即座に割り込むため、緊急のエラーメッセージなど重要度が高い場合のみ使用し、多用するとユーザー体験を損ないます。

『aria-checked』や『aria-disabled』はカスタムUIコンポーネント（CSSで装飾したチェックボックスなど）に使用します。ネイティブHTMLの『input type="checkbox"』や『disabled』属性で対応できる場合は、そちらを優先してください。ARIAはあくまでHTMLネイティブの機能で表現できないケースを補完するための仕様です。『aria-expanded』の詳細な活用例は『details / summary』も参照してください。

記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。

トップページへ

WebProgrammingPlaceウェブプログラミングプレイス