WAI-ARIA 1.2
ウィジェット ARIA 属性
カスタムUIコンポーネントの状態を支援技術に伝えるための属性です。チェック状態、展開状態、選択状態、値の範囲などを表現します。
属性一覧
| 属性 | 型 | 説明 | 使用例 |
|---|---|---|---|
aria-checked | true | false | mixed | チェックボックスやラジオボタンの選択状態を示します。mixed はトライステートチェックボックスに使用します。 | <div role="checkbox" aria-checked="true"> |
aria-expanded | true | false | 折りたたみ可能な要素の開閉状態を示します。アコーディオン、ドロップダウンメニューなどに使用します。 | <button aria-expanded="false" aria-controls="panel"> |
aria-selected | true | false | タブ、リスト項目、ツリー項目などの選択状態を示します。 | <div role="tab" aria-selected="true"> |
aria-pressed | true | false | mixed | トグルボタンのオン/オフ状態を示します。pressed はボタン要素に使用します。 | <button aria-pressed="false">太字</button> |
aria-valuenow | number | スライダーやプログレスバーの現在値を指定します。 | <div role="slider" aria-valuenow="50"> |
aria-valuemin | number | レンジウィジェットの最小値を指定します。 | <div role="slider" aria-valuemin="0"> |
aria-valuemax | number | レンジウィジェットの最大値を指定します。 | <div role="slider" aria-valuemax="100"> |
aria-readonly | true | false | 要素が読み取り専用であることを示します。値は表示されますが編集できません。 | <input aria-readonly="true" value="確定値"> |
aria-required | true | false | フォームフィールドが入力必須であることを示します。 | <input aria-required="true"> |
aria-invalid | true | false | grammar | spelling | 入力値にエラーがあることを示します。バリデーションエラーの通知に使用します。 | <input aria-invalid="true" aria-describedby="err"> |
ライブデモ
aria-expanded デモ：カスタムアコーディオン
ボタンをクリックまたはEnter/Spaceで開閉します。aria-expanded の値がリアルタイムで変化します。
aria-checked デモ：カスタムチェックボックス
カスタムスタイルのチェックボックスです。aria-checked がリアルタイムで変化します。
通知を受け取る
aria-checked="false"ニュースレターを購読
aria-checked="false"ダークモードを有効化
aria-checked="false" ARIA なし
<div class="accordion-btn"
onclick="toggle()">
セクション
</div>
<!-- 状態が不明 --> ARIA あり
<button aria-expanded="false"
aria-controls="panel-1">
セクション
</button>
<!-- 開閉状態が明確 -->ウィジェット属性はユーザー操作に応じて動的に更新する必要があります。 JavaScriptで状態が変わるたびに、対応するARIA属性も必ず更新しましょう。
HTMLネイティブのフォーム要素（
<input type="checkbox">など）は暗黙的にこれらの状態を持っています。 カスタムウィジェットを作る場合にのみARIA属性を使用してください。