Techniques for WCAG 2.0における達成基準 4.1.2 の不適合事例のF59の正しい実装方法【WAI-ARIA】

Techniques for WCAG 2.0は、一般的なことやHTMLやCSSやJavaScriptなどの実装方法に加え、不適合事例も掲載されています。

その中の不適合事例で、 F59: 達成基準 4.1.2 の不適合事例 − スクリプトを用いて、HTMLのdiv要素又はspan要素をユーザーインタフェースのコントロールにしているというのがあります。

HTMLの各要素にはそれぞれの意味や役割が定義されています。しかし、div要素やspan要素には、意味はあっても定義された役割がありません。下記のようなことはよく見かけたりします。

見た目はボタンのように見えるデザインですが、HTMLのソースコードは下記のようだったりします。

<div onclick="func();">
  Button
</div>

このdiv要素でボタンのように見えるためには、CSSでいくらでも見た目を変えることができます。しかし、ソースコードレベルで考えるとdiv要素はボタンの意味や役割を持っていません。そのため、このようにマークアップをしてしまうと、スクリーンリーダー等の支援技術では、 このようなボタン等のインターフェースにアクセスすることができないことがあったりするために、F59の不適合事例は、まさに上記のようなことを言っています。

チェックポイントでは、下記のように書かれています。

これらの要素がユーザーインタフェース・コントロールの役割を果たす場合は、コントロールの役割(role)が定義されている。

デザイン上、ボタンを表現するためには、div要素やspan要素を使わざるを得ない場合はあると思います。しかし、div要素やspan要素だけで表現してしまうとWCAG 2.0の要件を満たすことができません。

コントロールの役割(role)が定義しなくてはなりません。そこで、活躍するのがWAI-ARIAです。

WAI-ARIAのウィジェットロールのbuttonを使ってroleを定義します。

button (ロール(role))

下記は仕様書からの引用です。

クリックされたり押されたりした際に、ユーザが起こしたアクションを可能にする入力。 ボタンは主に、個別のアトミックアクションに使われる。ボタンの見た目を標準化することによって、ユーザーがこのウィジェットをボタンとして認識しやすくなり、ツールバーにコンパクトにまとめて表示できるようになる。

button (ロール(role))を定義することにより、そのため、UAはdiv要素やspan要素でもボタンと認識してくれるようになります。下記のようにrole属性を記述するだけです。

<div onclick="func();" role="button">
  Button
</div>

これでボタンのroleが定義されることにより、要件に適合されたボタンになります。ですが、これだけでは、キーボードでのフォーカスをとれないので、完全には適合するというわけではありません。 そのため、tabindex属性を加えるなり、スクリプトでその要素にちゃんとフォーカスがあたるように作れば、WCAG 2.0に完全に適合されたボタンができることになります。

関連エントリー

WAI-ARIAについては、下記エントリーでいろいろ書いていますので、ご参考ください。