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 を持つ状態になります。
ところで、さり気なく
when it's Accessibility API accessible name (or equivalent) property has a value.

のように "equivalent" という括弧書きがありますが、これはどういう意味なのでしょうか。
WCAG 2.0 では達成基準3.3.2「ラベル又は説明文」を達成できる実装方法のひとつにG167がありますが、サイト内検索のように入力欄とボタンが隣接している場合は、ボタンが入力欄に対するラベルと見なしてもよいとされています。
おそらく、このように明示的にラベル付けする必要のない例外的なケースを指しているのかと思われます。