More than 5 years have passed since last update.

WAI-ARIA 再入門。

Last updated at 2018-11-11Posted at 2018-11-11

はじめに

WAI-ARIA の読み方を答えられなかったので、 WAI-ARIA を学びなおす。 WAI-ARIA の読み方を答えられなかったそこのあなたも、この記事を読めばバッチリだろう。

ARIA とは、スクリーンリーダーのような支援技術に対して、各要素がどのような役割を持つものかを教え、支援技術が Web ページの内容をより正しく、より詳細に知れるようにするものだ。
ARIA を使うと、支援技術を使っているユーザに Web ページの適切な情報を伝えることができる。

ARIA を使う上で必要なのは、ロール、ステート、プロパティの3つだ。
これらについても説明しておく。

ロールとは、role属性を使い、その要素に役割を与えるものだ。
ロールは不変でなければならない。どうしても動的にロールを変更したい場合は、ロールを変更したい要素とその子孫要素を削除し、それらを新しい要素に置き換えた上で、改めてロールを付与すると良いだろう。

ロールは 82 種類存在し、これらは以下の 6 つのグループに分類される(括弧内の数値はグループが持つロールの個数)。

すべてのロールを分類し、それらの意味を表すために作られたロール。すべてのロールは、例外なく抽象ロールを継承している。
実際に ARIA を使う場面で抽象ロールを扱うことはないし、あってはならない。

UI の部品を表すためのロール。「スタンドアロン・ユーザーインターフェイスウィジェット」という、ひとつの独立した部品を表すロールと、これを複数組み合わせた「複合ユーザーインターフェイスウィジェット」の2つに分類される。部品を動作させる際に JavaScript を使うことが多い。

文書構造を表すためのロール。これを使うと、要素に対して意味の追加、変更を行うことができ、文書構造を整理するのに役立つ。
意味だけでなく、見た目も変更する場合は CSS を使うことになる。

文書の主要コンテンツや、グローバルナビゲーションなど、 Web ページ上でユーザが素早くアクセスしたいであろう領域を表すためのロール。

時間により内容や状態が変化する領域を表すためのロール。フォーカスの当たっていない要素の更新情報も支援技術に提供できる。

Web ページ内でウィンドウとして機能する部品を表すためのロール。個人的には、ウィンドウロールのロールは別にウィジェットロールでも良いんじゃないかと思ってしまう(何かわかったら追記する)。

ステートとは、aria-*属性を使い、要素の状態を定義するものだ。そのため、aria-*属性の値は動的に変化する。ステートは要素の性質に影響を与えない。

プロパティとは、aria-*属性を使い、要素の性質を現すものだ。そのため、aria-*属性の値は動的に変化する。

たとえば、ステートでは、「この要素は折りたたまれているかどうか」を表す。
一方、プロパティでは、「この要素は折りたたみ可能かどうか」を表す。

幾つかの要素には、ユーザエージェントが既にロールやステート、プロパティを付与している。これを暗黙の ARIA セマンティックス といい、これと一致する属性を明示的に設定することは非推奨となっている。

さて、とりあえず入門としてはこんなところじゃないだろうか。
これで WAI-ARIA の読み方もバッチリ...？