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がありますが、サイト内検索のように入力欄とボタンが隣接している場合は、ボタンが入力欄に対するラベルと見なしてもよいとされています。

おそらく、このように明示的にラベル付けする必要のない例外的なケースを指しているのかと思われます。