Using WAI-ARIA in HTML にルールが追加されて5つに

投稿

2014年6月26日付でUsing WAI-ARIA in HTML(W3C)が更新されました。前回の2013年10月3日版(W3C)では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(W3C)を持っている必要がある。

第4のルールについては、今年2月のアクセシビリティBlogの記事Using WAI-ARIA in HTMLのEditor's Draftに第4のルールが追加(accessibility.mitsue.co.jp)にて解説がありますが、禁止される条件に visible であることが追加されました。

コード例(W3C)にあるように display: none; されている場合などは aria-hidden="true" しても構いません。

第5のルールもコード例(W3C)を見たほうが分かりやすいと思いますが、例えば一行入力欄 input[type="text"] に対して適切な形でlabel要素を使えば accessible name を持つ状態になります。

ところで、さり気なく

when it's Accessibility API accessible name (or equivalent) property has a value.

2.5 Fifth rule of ARIA use(W3C)

のように "equivalent" という括弧書きがありますが、これはどういう意味なのでしょうか。

WCAG 2.0 では達成基準3.3.2「ラベル又は説明文」を達成できる実装方法のひとつにG167(W3C)がありますが、サイト内検索のように入力欄とボタンが隣接している場合は、ボタンが入力欄に対するラベルと見なしてもよいとされています。

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