Using WAI-ARIA in HTML にルールが追加されて5つに
2014年6月26日付で Using WAI-ARIA in HTMLが更新されました。前回の2013年10月3日版では3つのルールが定められていましたが、今回はさらに2つのルールが追加され、5つになっています。
それぞれのルールはこんな内容です。
- 分かりやすさを重視してかなり意訳しています。正確な内容は原文を参照ください。日本語訳(
imagedrive.github.io
)もありますが、現時点ではひとつ古い2013年10月3日版に対応したものとなっています。
- 1. WAI-ARIAの
role
,state
,property
を使う前に、まずはネイティブなHTMLの要素や属性の使用を検討する。 - 2. ネイティブのセマンティクスを変更しない。 例:
<h1 role="button">heading button</h1>
ではなく<h1><button>heading button</button></h1>
とする。 - 3. クリックやタップなど操作可能なウィジェットはすべてキーボード操作が可能でなければならない。
- 4. フォーカス可能かつ視認可能な要素に
role="presentation"
とaria-hidden="true"
を指定してはならない。 - 5. すべてのインタラクティブな要素は accessible nameを持っている必要がある。
第4のルールについては、今年2月のアクセシビリティBlogの記事 Using WAI-ARIA in HTMLのEditor's Draftに第4のルールが追加(accessibility.mitsue.co.jp
)にて解説がありますが、禁止される条件に visible であることが追加されました。
コード例にあるように display: none;
されている場合などは aria-hidden="true"
しても構いません。
第5のルールもコード例を見たほうが分かりやすいと思いますが、例えば一行入力欄 input[type="text"]
に対して適切な形でlabel
要素を使えば accessible name を持つ状態になります。
ところで、さり気なく
のように "equivalent" という括弧書きがありますが、これはどういう意味なのでしょうか。
WCAG 2.0 では達成基準3.3.2「ラベル又は説明文」を達成できる実装方法のひとつにG167がありますが、サイト内検索のように入力欄とボタンが隣接している場合は、ボタンが入力欄に対するラベルと見なしてもよいとされています。
おそらく、このように明示的にラベル付けする必要のない例外的なケースを指しているのかと思われます。