適用 (対象)
Accessible Rich Internet Applications (WAI-ARIA) をサポートするウェブコンテンツ技術。
これは、達成基準 4.1.2: 名前 (name)・役割 (role)・値 (value) (G10: アクセシブルな変化の通知をサポートするウェブコンテンツ技術を用いて、コンポーネントを作成するを満たす方法として十分) に関する達成方法である。
解説
この達成方法の目的は、WAI-ARIA Definition of Roles で定義されたいずれかの非抽象の値を持つ role 属性を用いて要素のロールを定義することである。WAI-ARIA 仕様は、各ロールについて、他のロールとどのように関係するか、どのようなステート及びプロパティがあるかといった、参考となる説明を提供している。リッチインターネットアプリケーションが新しいユーザインタフェースウィジェットを定義する際、ロールを公開することで、利用者がウィジェット及びウィジェットと対話する方法を理解できるようになる。
事例
例 1: 単純なツールバー
WAI-ARIA Authoring Practices には、三つのボタンを含むツールバーのデモがある。div 要素は "toolbar" のロールを持ち、img 要素は "button" のロールを持つ。
<div role="toolbar"
tabindex="0"
id="customToolbar"
onkeydown="return optionKeyEvent(event);"
onkeypress="return optionKeyEvent(event);"
onclick="return optionClickEvent(event);"
onblur="hideFocus()"
onfocus="showFocus()"
>
<img src="img/btn1.gif"
role="button"
tabindex="-1"
alt="Home"
id="b1"
title="Home">
<img src="img/btn2.gif"
role="button"
tabindex="-1"
alt="Refresh"
id="b2"
title="Refresh">
<img src="img/btn3.gif"
role="button"
tabindex="-1"
alt="Help"
id="b3"
title="Help">
</div>
Authoring Practices のツールバーパターンは、ツールバーの動作例を提供している。
例 2: ツリーウィジェット
WAI-ARIA Authoring Practices には、ツリーウィジェットのデモがある。ツリーとその構造を識別するためのロール "tree"、"treeitem"、"group" に注意。コードを単純化して抜粋したものは以下のとおり。
<ul role="tree" tabindex="0">
<li role="treeitem">Birds</li>
<li role="treeitem">Cats
<ul role="group">
<li role="treeitem">Siamese</li>
<li role="treeitem">Tabby</li>
</ul>
</li>
<li role="treeitem">Dogs
<ul role="group">
<li role="treeitem">Small Breeds
<ul role="group">
<li role="treeitem">Chihuahua</li>
<li role="treeitem">Italian Greyhound</li>
<li role="treeitem">Japanese Chin</li>
</ul>
</li>
<li role="treeitem">Medium Breeds
<ul role="group">
<li role="treeitem">Beagle</li>
<li role="treeitem">Cocker Spaniel</li>
<li role="treeitem">Pit Bull</li>
</ul>
</li>
<li role="treeitem">Large Breeds
<ul role="group">
<li role="treeitem">Afghan</li>
<li role="treeitem">Great Dane</li>
<li role="treeitem">Mastiff</li>
</ul>
</li>
</ul>
</li>
</ul>
Authoring Practices のツリービューパターンは、ツリーの動作例を提供している。
参考リソース
この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。
検証
手順
role 属性を使用するユーザインタフェースコンポーネントの場合:
- role 属性の値が、WAI-ARIA 仕様で定義された値に由来する非抽象ロールのいずれかであることを確認する。
- ユーザインタフェースコンポーネントの特性がロールで記述されていることを確認する。
期待される結果
- #1 及び #2 が真である。