【アクセシビリティ】WAI-ARIA で指定できる属性の全部をまとめてみた。

はじめに

みなさんは、WAI-ARIAを知っていますか？

私は、スクリーンリーダーでも読めるようにするため、aria-label を使ったり、
roleを使って、要素の役割を明確にしたりなど業務でよく使うものは、理解しているつもりです。

ただ他にどんな種類のWAI-ARIAがあるか、その役割はなんなのか、いまいちわからないなと思っていました。
そのため、W3CのWAI-ARIAについてのリファレンスを読んで、理解を深めようと思いました。

なので、今回は、WA-ARIAで指定できる属性の全部をまとめたので、ぜひご覧ください。

WAI-ARIAとは？

WAI-ARIAは、Web Accessibility Initiative Accessible Rich Internet Applicationsの略で、アクセシビリティ向上の目的で、W3Cが定めた仕様です。

また、WAI-ARIAをつかうことで、HTMLで表現できない意味(セマンティック)を属性で補完することができ、
スクリーンリーダーなどの支援技術を通じて、障害を持つ方に対しても適切な情報を伝えられるようになります。

WAI-ARIAにはコンテンツの役割を示すrole属性とコンテンツの状態や性質を示すaria属性が定義されて、role属性やaria属性を使いこなすことで、意味ない <div> なのでネストされた複雑なUIの意味(セマンティック)を補完して、アクセシビリティを向上させることができます。

WAI-ARIAの種類

WAI-ARIAの概要がわかったところで、早速それぞれの属性がどんな役割があるか解説して行きます。

数が多く、一個を詳細に解説していくのは骨が折れたので、軽く概要がわかるようにしておきます。
また、詳しい内容を知りたい方は、W3Cのリファレンスを参照ください。

コンテンツの役割を示すrole属性

コンテンツの役割を示すrole属性は、抽象役割・ウィジェット役割・文書構造・ランドマーク役割の4つがあります。
抽象役割・ウィジェット役割・文書構造・ランドマーク役割の詳しい解説は、それぞれのセクションで解説します。

role属性を使うには、↓このように要素に記入するすることで、コンテンツの役割を示すことができます。

sample.html

<!-- 〇〇の部分に役割を記入します。 -->
<div role="〇〇">...</div>

<!-- 例: mainの役割の場合 -->
<div role="main">...</div>

抽象役割

抽象役割は、一般的な役割概念を定義する目的で使われます。そのため、コンテンツに抽象役割を使用してはいけません。

• command
  • アクションを実行するが入力データを受信しないウィジェットのフォーム。
• composite
  • ナビゲーション可能な子孫または所有する子を含むことができるウィジェット。
• input
  • ユーザー入力を許可するウィジェットの一般的なタイプ。
• landmark
  • ナビゲーションのランドマークとして意図されるページの領域。
• range
  • ユーザーによって設定可能な値の範囲を表す入力。
• roletype
  • この分類で他のすべての役割が継承する基本役割。
• section
  • 文書またはアプリケーションでレンダリング可能な構造収納単位。
• sectionhead
  • 構造の関連セクションのトピックを分類するまたは要約するもの。
• select
  • ユーザーが選択肢のセットから選択を行うことを可能にするフォームウィジェット。
• structure
  • 文書構造要素。
• widget
  • グラフィカルユーザーインターフェイス（GUI）のインタラクティブなコンポーネント。
• window
  • ブラウザーまたはアプリケーションのウィンドウ。

ウィジェット役割

ウィジェット役割は、独立したUIウィジェットや大きな複合ウィジェットで使われます。

• alert
  • 重要かつ通常は時間依存の情報をもつメッセージ。
  • 関連するalertdialogおよびstatusを参照のこと。
• alertdialog
  • 最初のフォーカスがダイアログ内の要素に行く場合のアラートメッセージを含むダイアログの種類。
  • 関連するalertおよびdialogを参照のこと。
• button
  • クリックまたは押された際にユーザー誘発のアクションを可能にする入力。
  • 関連するlinkを参照のこと。
• checkbox
  • true、false、またはmixedの3つの可能性がある値を持つチェック可能な入力。
• dialog
  • ダイアログは、情報を入力するまたは応答を要求するユーザーを促すために、アプリケーションの現在の処理を中断するように設計されるアプリケーションウィンドウである。
  • 関連するalertdialogを参照のこと。
• gridcell
  • グリッドまたはツリーグリッド内のセル。
• link
  • 活性化された場合、ブラウザーにそのリソースにナビゲートさせる、内部または外部のリソースへのインタラクティブなリファレンス。
  • 関連するボタンを参照のこと。
• log
  • 新しい情報が意味のある順序で追加されかつ古い情報が消えることのあるライブ領域のタイプ。
  • 関連するmarqueeを参照のこと。
• marquee
  • 必須でない情報が頻繁に変更されるライブ領域のタイプ。
  • 関連するlogを参照のこと。
• menuitem
  • menuまたはmenubarに含まれる選択肢のセットにおけるオプション。
• menuitemcheckbox
  • 可能な値がtrue、false、またはmixedであるチェック可能な状態をもつmenuitem。
• menuitemradio
  • 一方のみが一度にチェックすることができる、役割menuitemradioをもつ要素のセットにおけるチェック可能なmenuitem。
• option
  • 選択リストで選択可能な項目。
• progressbar
  • 長い時間がかかるタスクの進捗状況を表示する要素。
• radio
  • 一方のみが一度にチェックすることができる、ラジオ役割のグループにおけるチェック可能な入力。
• scrollbar
  • コンテンツが完全に表示画面内に表示されているかどうかに関わらず、表示画内のコンテンツのスク役割を制御するグラフィカルオブジェクト。
• slider
  • ユーザーが与えられた範囲内から値を選択するユーザー入力。
• spinbutton
  • ユーザーに個別の選択肢の中から選択することを期待する範囲のフォーム。
• status
  • コンテンツはユーザーに対する参考となる情報であるが、alertを正当化するほど重要ではなく、多くの場合ステータスバーとして提示される必要のないコンテナ。
  • 関連するalertを参照のこと。
• tab
  • ユーザーにレンダリングされるタブコンテンツを選択するためのメカニズムを提供するグループ化ラベル。
• tabpanel
  • 各tabがtablistに含まれる、tabに関連付けられたリソースに対するコンテナ。
• textbox
  • 入力値として自由形式のテキストを許可するもの。
• timer
  • 開始時点からの経過時間を示す、または終了時点までの残り時間を示す数値カウンタを含むライブ領域の種類。
• tooltip
  • 要素の説明を表示するコンテキストポップアップ。
• treeitem
  • tree のオプション項目。これは、より低いレベルのツリー項目要素のグループを含む場合に、開いたり閉じたりするかもしれないツリー内の要素である。
• combobox
  • selectのプレゼンテーション。
  • ユーザーがオプションを選択するために前方へ入力できるまたは、リストで新しい項目として任意のテキストを入力するために入力できる、通常textboxに類似する。
  • 関連するlistboxを参照のこと。
• grid
  • グリッドは、テーブルのように、行および列に配列される表形式のデータのセルを含む対話コント役割である。
• listbox
  • ユーザーが選択肢のリストから1つ以上の項目を選択できるようにするウィジェット。
  • 関連するcomboboxおよびlistを参照のこと。
• menu
  • ユーザーへの選択肢のリストを提供するウィジェットのタイプ。
• menubar
  • 通常は表示されたままとなりかつ水平に表示されるメニューのプレゼンテーション。
• radiogroup
  • ラジオボタンのグループ。
• tablist
  • tabpanel要素への参照であるtab要素のリスト。
• tree
  • 折りたたみおよび展開することができるより低いレベルでネストされるグループを含むかもしれないlistの種類。
• treegrid
  • 行がツリーの場合と同様に開いたり閉じたりすることができるグリッド。

文書構造

文書構造役割は、インタラクティブな要素ではなく、ページの文章構造を記述するために使われます。

• article
  • 文書、ページ、またはサイトの独立した部分を形成する文章から成るページのセクション。
• columnheader
  • 列のヘッダー情報を含むセル。
• definition
  • 用語または概念の定義。
• directory
  • 静的な目次のような、グループのメンバーへの参照のリスト。
• document
  • ウェブapplicationとは対照的な、文書コンテンツとして宣言される関連情報を含む領域。
• group
  • 支援技術によってページサマリーまたは目次に含まれることを意図されないユーザーインターフェイスオブジェクトのセット。
• heading
  • ページのセクションに対する見出し。
• img
  • 画像を形成する要素のコレクションのコンテナ。
• list
  • 非インタラクティブなリスト項目のグループ。
  • 関連するlistboxを参照のこと。
• listitem
  • リストまたはディレクトリにおける1つの項目。
• math
  • 数式を表すコンテンツ。
• note
  • コンテンツがリソースの主要コンテンツに挿入的または付随的であるセクション。
• presentation
  • 暗黙のネイティヴ役割セマンティックスがアクセシビリティーAPIに対応づけされない要素。
• region
  • ライブスポーツイベントの統計情報を含むページの領域など、ページサマリーまたは目次に含まれるのに十分に重要である、ウェブページまたは文書の大規模な知覚セクション。
• row
  • グリッドにおけるセルの行。
• rowgroup
  • グリッドで1つ以上の行要素を含むグループ。
• rowheader
  • グリッドで行のセルを含むヘッダー情報。
• separator
  • コンテンツのセクションまたはメニュー項目のグループを分離して区別する仕切り。
• toolbar
  • 一般的に使用される小型の視覚形式で表現される機能ボタンまたはコント役割のコレクション。

ランドマーク役割

ランドマーク役割は、ナビゲーションなど、意図されるページの領域を示すために使われます。

• application
  • ウェブ文書とは対照的に、ウェブアプリケーションとして宣言される領域。
• banner
  • ページ固有のコンテンツよりも、大部分がサイト向けのコンテンツを含む領域。
• complementary
  • DOM階層において同等のレベルで主要コンテンツに相補的であるよう設計されたが、主要コンテンツから分離される際に意味のあるままにする、文書のサポートセクション。
• contentinfo
  • 親文書に関する情報を含む大規模な知覚可能な領域。
• form
  • 全体として、フォームを作成するために組み合わせるアイテムおよびオブジェクトのコレクションを含むランドマーク領域。
  • 関連するsearchを参照のこと。
• main
  • 文書の主要コンテンツ。
• navigation
  • 文書または関連する文書をナビゲートするためのナビゲーション要素（通常はリンク）のコレクション。
• search
  • 全体として、検索機能を作成するために組み合わせるアイテムおよびオブジェクトのコレクションが含まれるランドマーク領域。
  • 関連するformを参照のこと。

コンテンツの状態や性質を示すaria属性

コンテンツの状態や性質を示すaria属性は、ウィジェット属性・ライブ領域属性・ドラッグアンドドロップ属性・関係属性の4つがあります。
ウィジェット属性・ライブ領域属性・ドラッグアンドドロップ属性・関係属性の詳しい解説は、それぞれのセクションで解説します。

aria属性を使うには、↓このように要素に記入することで、コンテンツの状態や性質を示すことができます。

sample.html

<!-- 〇〇の部分にaria属性を、✖️✖️にはその値を記入します。 -->
<div 〇〇="✖️✖️">...</div>

<!-- 例: aria-hiddenがtrueの場合 -->
<div aria-hidden="true">...</div>

ウィジェット属性

• aria-autocomplete
  • ユーザー入力を補完する候補を提示するかどうかを示します。
• aria-checked （状態）
  • チェックボックス、ラジオボタン、および、その他のウィジェットが、現在"チェックされた"状態であること示します。
  • 関連するaria-pressed，および，aria-selectedを参照してください。
• aria-disabled （状態）
  • 要素は知覚可能ですが無効であるため、編集可能でも、操作可能でもないことを示します。
  • 関連するaria-hiddenおよびaria-readonlyを参照してください。
• aria-expanded （状態）
  • その要素、または、その要素が制御する別のグループ化要素が、現在、展開された状態か、折りたたまれた状態かを示します。
• aria-haspopup
  • 要素がポップアップ形式のコンテキストメニュー、または、下位レベルのメニューをもつことを示します。
• aria-hidden （状態）
  • その要素とその要素のすべての子孫が、作成者の指定によりどのユーザーにも可視、または、知覚可能ではないことを示します。
  • 関連するaria-disabledを参照してください。
• aria-invalid （状態）
  • 入力された値が、アプリケーションが想定したフォーマットに準拠しないことを示します。
• aria-label
  • この要素をラベル付けする文字列の値を定義します。
  • 関連するaria-labelledbyを参照してください。
• aria-level
  • 階層構造内での要素のレベルを定義します。
• aria-multiline
  • テキストボックスが複数行の入力を受け付けるか、または、単一行の入力のみしか受け付けないかを示します。
• aria-multiselectable
  • 当該の選択可能な子孫のうちから、ユーザーが複数項目を選択可能であることを示します。
• aria-orientation
  • 要素や向きが水平か垂直か、どちらであるかを示します。
• aria-pressed （状態）
  • トグルボタンが現在 "押された（pressed）" 状態であること示します。
  • 関連するaria-checkedおよびaria-selectedを参照してください。
• aria-readonly
  • 要素が編集可能ではないが、それ以外の点では動作していることを示します。
  • 関連するaria-disabledを参照してください。
• aria-required
  • フォームが送信されるまでに、その要素でユーザーの入力が必須であることを示す。
• aria-selected （状態）
  • さまざまなウィジェットで、現在 "選択された（selected）" 状態であることを示します。
  • 関連するaria-checkedおよびaria-pressedを参照してください。
• aria-sort
  • テーブルまたはグリッド内の項目が、昇順または降順にソートされるかどうかを示します。
• aria-valuemax
  • 範囲ウィジェットに対する最大許容値を定義します。
• aria-valuemin
  • 範囲ウィジェットに対する最小許容値を定義します。
• aria-valuenow
  • 範囲ウィジェットに対する現在値を定義します。関連するaria-valuetextを参照してください。
• aria-valuetext
  • 範囲ウィジェットのaria-valuenowの値（現在の値）について人間が読める代替テキストを定義します。

ライブ領域属性

• aria-atomic
  • aria-relevant属性によって定義された変更通知に基づき、支援技術が変更された領域のすべてを提示するのか、一部のみを提示するのかを示します。
  • 関連するaria-relevantを参照してください。
• aria-busy （状態）
  • 要素、および、そのサブツリーが現在更新中かどうかを示します。
• aria-live
  • ある要素が更新されることを示し、ブラウザー、支援技術、ユーザーがライブ領域から指定できる更新形式を記述します。
• aria-relevant
  • 支援技術がライブ領域内で受信するブラウザーの（追加、削除などの）変更通知を示します。
  • 関連するaria-atomicを参照してください。

ドラッグアンドドロップ属性

• aria-dropeffect
  • ドラッグされたオブジェクトがドロップ対象に投下された際に、どのような機能が実行可能かを示します。
  • これは、そのアプリケーションで選択肢のポップアップメニューが利用可能かどうかを含めて、支援技術がユーザーに利用可能なドラッグオプションを伝えることを可能にします。
  • 一般にドロップ効果機能（drop effect functions）は、利用可能なドロップ効果機能がドラッグされているオブジェクトに依存するため、ドラッグ操作のためにあるオブジェクトがつかまれた時に初めて提供することができます。
• aria-grabbed （状態）
  • ドラッグアンドドロップ操作で、要素が "つかまれた（grabbed）" 状態であることを示します。

関係属性

• aria-activedescendant
  • 複合ウィジェットの現在アクティブな子孫を特定します。
• aria-controls
  • この要素によって、コンテンツまたは存在が制御されている要素を特定します。
  • 関連するaria-ownsを参照してください。
• aria-describedby
  • そのオブジェクトを記述する要素を特定します。
  • 関連するaria-labelledbyを参照してください。
• aria-flowto
  • ユーザーの裁量により、文書ソースの順の一般的な既定の読み上げ順序を支援技術が上書きする、コンテンツの読み上げの代替順序で次の要素となるものを特定します。
• aria-labelledby
  • この要素をラベル付けする要素を特定します。
  • 関連するaria-labelおよびaria-describedbyを参照してください。
• aria-owns
  • DOM階層がその関係を表すために使用することができない場合に、DOM要素間の、視覚的、機能的、文脈上の親/子のうちのいずれかの関係を定義するために、要素を指定します。
  • 関連するaria-controlsを参照してください。
• aria-posinset
  • リスト項目やツリー項目の当該の集合中における要素の番号や位置を定義します。
  • セット内のすべての要素がDOM内に存在する場合には必要ありません。
  • 関連するaria-setsizeを参照してください。
• aria-setsize
  • リスト項目やツリー項目の当該の集合中における要素の項目数を定義します。
  • セット内のすべての要素がDOM内に存在する場合には必要ありません。
  • 関連するaria-posinsetを参照してください。

まとめ

今回は、W3CのWAI-ARIAについてのリファレンスを読んで、WAI-ARIAについてまとめてみました。

1つ１つのプロパティを理解するのは簡単でも、何十個もあれば、手をつけるのも億劫になり、整理ができないです。

そのため、この記事が、WAI-ARIAの要素の整理の第一歩となれると嬉しいです。

ぜひこの記事が参考になった・WAI-ARIAの理解が進んだという方がいれば
LGTMとストックをお願いします。🙏

ref

---

最後まで読んでくださってありがとうございます！

普段はデザインやフロントエンドを中心にQiitaに記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。