ARIA の状態とプロパティ
このページは、MDN で取り上げられているすべての WAI-ARIA 属性を網羅したリファレンスページを掲載しています。
ARIA 属性は、アクセシビリティツリーで定義された要素の状態やプロパティを変更することが可能です。
メモ: ARIA はアクセシビリティツリーを変更するだけで、支援技術がコンテンツをユーザーにどのように表示するかを変更します。ARIA は要素の機能や動作を何らかの形で変更するものではありません。意味づけられた HTML 要素を本来の目的や既定値で使用しない場合は、JavaScript を使って動作やフォーカス、ARIA の状態を管理する必要があります。
ARIA 属性の種類
ARIA の状態とプロパティには、4 つのカテゴリーがあります。
-
ウィジェット属性
aria-autocompletearia-checkedaria-disabledaria-errormessagearia-expandedaria-haspopuparia-hiddenaria-invalidaria-labelaria-levelaria-modalaria-multilinearia-multiselectablearia-orientationaria-placeholderaria-pressedaria-readonlyaria-requiredaria-selectedaria-sortaria-valuemaxaria-valueminaria-valuenowaria-valuetext
-
ライブリージョン属性
-
ドラッグ＆ドロップ属性
-
リレーションシップ属性
グローバル ARIA 属性
いくつかの状態やプロパティは、ARIA ロールが適用されているかどうかに関係なく、すべての HTML 要素に適用されます。これらは『グローバル』属性として定義されます。グローバル状態やプロパティは、すべてのロールや基本マークアップ要素で対応しています。
上記の属性の多くはグローバルで、特に禁止されていない限り、どの要素にも含めることができます。
aria-atomicaria-busyaria-controlsaria-currentaria-describedbyaria-descriptionaria-detailsaria-disabledaria-dropeffectaria-errormessagearia-flowtoaria-grabbedaria-haspopuparia-hiddenaria-invalidaria-keyshortcutsaria-labelaria-labelledbyaria-livearia-ownsaria-relevantaria-roledescription
「特に禁止」とは、上記の属性がすべてグローバルであることを意味します。ただし、aria-label および aria-labelledby プロパティは、ロール presentation またはその同義語 none ロールでは禁止されています。
MDN で定義する状態とプロパティ
以下は、MDN で取り上げた WAI-ARIA の状態やプロパティに応じたリファレンスページです。
- aria-activedescendant
aria-activedescendant属性は、compositeウィジェット、combobox、textbox、group、applicationにフォーカスが当たっている時、現在アクティブな要素を特定します。- aria-atomic
ARIA ライブリージョンにおいて、グローバルな
aria-atomic属性は、aria-relevant属性で定義された変更通知に基づいて、スクリーンリーダーなどの支援技術が変更された領域をすべて表示するのか、一部だけを表示するのかを示します。- aria-autocomplete
aria-autocomplete属性は、combobox,searchbox,textboxにおいて、テキスト入力がユーザーの意図する値の一つ以上の予測を発生させるかどうかを示し、発生した場合にどのように予測を表示するかを指定します。- aria-braillelabel
グローバルな
aria-braillelabel属性は、点字に変換することを目的とした、現在の要素にラベル付けする文字列の値を定義します。- aria-brailleroledescription
グローバルな
aria-brailleroledescription属性は、点字に変換することを意図した要素のロールについて、人間が判読可能で作者がローカライズした、短縮された説明を定義します。- aria-busy
ARIA ライブリージョン で使用されるグローバルな
aria-busy状態は、要素が変更中であり、支援技術はその変更が完了するまで待ってからユーザーに更新について通知する必要がある場合があることを示します。- aria-checked
aria-checked属性は、チェックボックスやラジオボタン、その他のウィジェットの現在の「チェックされている」状態を示します。- aria-colcount
aria-colcount属性は、tableやgrid、treegridにおいて DOM に全ての列が表示されていない場合に、列の総数を定義します。- aria-colindex
aria-colindex属性はtable、grid、treegrid内の全列数に対する要素の列インデックスまたは位置を定義します。- aria-colindextext
aria-colindextext属性は、aria-colindexの数値を人間が判読可能な代替テキストとして定義するものです。- aria-colspan
aria-colspan属性は、tableやgrid、treegrid内のセルまたはグリッドセルがまたがる列の数を定義します。- aria-controls
グローバルな
aria-controls属性は、この属性が設定されている要素によってコンテンツまたは存在が制御される要素を識別します。- aria-current
要素の
aria-current状態が null 以外のとき、この要素がコンテナーまたは関連要素のセット内の現在の項目を表すことを示します。- aria-describedby
aria-describedbyはグローバル属性で、その属性が設定されている要素を説明する要素（複数可）を特定します。- aria-description
グローバルな
aria-description属性は、現在の要素を説明または注釈する文字列値を定義します。- aria-details
グローバルな
aria-details属性は、オブジェクトに関連する追加情報を提供する要素を識別します。- aria-disabled
aria-disabled状態は、要素は知覚可能であるが無効であり、編集やその他の操作をすることができないことを示します。- aria-errormessage
オブジェクトの
aria-errormessage属性は、そのオブジェクトのエラーメッセージを表示する要素を特定します。- aria-expanded
aria-expanded属性は要素に設定され、コントロールが展開されているか折りたたまれているか、および制御される要素が表示されているかどうかを示します。- aria-flowto
グローバルな
aria-flowto属性は、コンテンツの代替読み取り順序における次の要素を識別します。これにより支援技術は、ユーザーの判断で、ドキュメントソースの読み取り順序の一般的な既定値を上書きできます。- aria-grabbed
aria-grabbedの状態は、ドラッグ＆ドロップ処理で要素が「つかまれた」状態を示します。- aria-haspopup
aria-haspopup属性は、属性が設定されている要素によってトリガーできる対話可能なポップアップ要素の可用性とタイプを示します。aria-hidden状態は、要素がアクセシビリティ API に公開されているかどうかを示します。- aria-invalid
aria-invalid状態は、入力された値がアプリケーションで想定される形式に従っていないことを示します。- aria-keyshortcuts
グローバルな
aria-keyshortcuts属性は、要素をアクティブにしたり要素にフォーカスを当てたりするために開発者が実装したキーボードショートカットを示します。- aria-label
aria-label属性は対話型要素にラベル付けする文字列値を定義します。- aria-labelledby
aria-labelledby属性は、適用される要素のラベル付けを行う要素（複数可）を識別します。- aria-level
aria-level属性は、構造内の要素の階層レベルを定義します。- aria-live
グローバルな
aria-live属性は、要素が更新されることを示し、ユーザーエージェント、支援技術、ユーザーがライブリージョンから期待できる更新の種類を記述します。- aria-modal
aria-modal属性は、要素が表示されるときにモーダルであるかどうかを示します。- aria-multiline
aria-multiline属性はtextboxが複数行の入力を受け入れるか、単一の行のみを受け入れるかを示します。- aria-multiselectable
aria-multiselectable属性は、ユーザーが現在選択可能な子孫から複数の項目を選択できることを示します。- aria-orientation
aria-orientation属性は、要素の方向が水平、垂直、または不明/曖昧であることを示します。- aria-owns
aria-owns属性は、DOM 階層を使用して要素間の関係を表すことができない場合に、親要素とその子要素間の視覚的、機能的、または文脈上の関係を定義するために要素を識別します。- aria-placeholder
aria-placeholder属性は、フォームコントロールに値がない場合に、ユーザーのデータ入力を支援するための短いヒント (単語または短いフレーズ) を定義します。ヒントは、サンプル値または期待する形式の簡単な説明にすることができます。- aria-posinset
aria-posinset属性は、DOM に全ての項目が存在しない場合に、現在のリスト項目またはツリー項目の、セット内の要素の数または位置を定義します。- aria-pressed
aria-pressed属性は、トグルボタンの現在の「押されている」状態を示します。- aria-readonly
aria-readonly属性は、要素が編集はできないが、それ以外の操作は可能であることを示します。- aria-relevant
ARIA ライブリージョンで使用されるグローバルな
aria-relevant属性は、ライブリージョン内の アクセシビリティツリー が変更されたときにユーザーエージェントがトリガーする通知を示します。- aria-required
aria-required属性は、フォームを送信する前に要素にユーザー入力が必要であることを示します。- aria-roledescription
aria-roledescription属性は、要素のロールについて、人間が読める形で作成者がローカライズした説明を定義します。- aria-selected
aria-selected属性は、さまざまなウィジェットの現在の「選択されている」状態を示します。- aria-setsize
aria-setsize属性は、セット内の全ての項目が DOM に存在しない場合に、現在のリスト項目またはツリー項目のセット内の項目の数を定義します。- aria-sort
aria-sort属性は、表またはグリッド内の項目が昇順または降順のどちらで並べ替えられているかを示します。- aria-valuemax
aria-valuemax属性は、範囲ウィジェットで許可される最大値を定義します。- aria-valuemin
aria-valuemin属性は、範囲ウィジェットで許可される最小値を定義します。- aria-valuenow
aria-valuenow属性はrangeウィジェットの現在の値を定義します。- aria-valuetext
aria-valuetext属性は、範囲ウィジェットのaria-valuenowの人間が読める代替テキストを定義します。