WAI-ARIAを意識したタブパネルのマークアップを考えてみる【アクセシビリティ】【HTML5】

HTML5の新たな属性に、支援テクノロジー向けに使うことができるroleコンテンツ属性aria-*コンテンツ属性があります。

しかし、これらの属性は、HTML5から登場したものではなく、以前からWAI-ARIAで定義されている属性です。

WAI-ARIA

WAI-ARIAとは、Web Accessibility Initiative Accessible Rich Internet Applicationsの略で、WAI-ARIA Overviewから引用すると...

WAI-ARIA, the Accessible Rich Internet Applications Suite, defines a way to make Web content and Web applications more accessible to people with disabilities. It especially helps with dynamic content and advanced user interface controls developed with Ajax, HTML, JavaScript, and related technologies.

訳すと、WebコンテンツおよびWebアプリケーションを障がいのあるユーザにとってよりアクセシブルにする方法を定義するもので、特にAjaxやJavaScriptなどで作られたRIA(Rich Internet Applications)にフォーカスしたものです。

参考

タブパネル(WAI-ARIAでマークアップ)

今回は、タブパネルを考えていきます。

タブパネルとは、下記リンクにあるようなUIのことです。

jQuery UI - Tabs Demos & Documentation

ソースコードを見てみると、大体がul要素やdiv要素を用いています。そのため、大雑把にHTMLで表すと下記のようになります。

<!-- タブ部分 -->
<ul>
<li>Windows</li>
<li>Mac OS X</li>
<li>Linux</li>
</ul>

<!-- パネル部分 -->
<div>Windowsは、マイクロソフトのオペレーティング システムまたはオペレーティング環境で、1985年11月に初めてリリースされた。</div>
<div>アップルのMacintoshコンピュータ用の現行オペレーティングシステム (OS) である。バージョン9まで続いたそれまでのMac OSの後継として、BSD UNIXベースで新たに作られた。</div>
<div>Linuxとは、一般的にはUNIXライクなコンピュータ用オペレーティングシステム(OS)の一群を指し、厳密にはその中核となる部分であるカーネルのことである。</div>

当然ながら、これだけでは、WAI-ARIAを用いていませんので、WAI-ARIAを追加していきます。使うのがまずrole属性。roleを日本語役にすると「役割」です。role属性で要素に役割を付加していきます。

roleの定義(WAI-ARIAでマークアップ)

今回は、タブパネルですので、用いるroleは下記です。4.4. ロール(role)の定義参照

role="application"
アプリケーションとして宣言されたリージョン
role="tab"
tabpanelの見出し
role="tablist"
tabpanel要素へのリファレンスとなっているtab要素のリスト
role="tabpanel"
tabに関連付けられたリソースのコンテナ

最初のrole="application"は、アプリケーションのコンテンツを作成しますので、applicationといて定義します(そうでない場合はrole="document")。これらを追加していきます。

<div role="application">
<!-- タブ部分 -->
<ul role="tablist">
<li role="tab">Windows</li>
<li role="tab">Mac OS X</li>
<li role="tab">Linux</li>
</ul>
<!-- パネル部分 -->
<div role="tabpanel">Windowsは、マイクロソフトのオペレーティング システムまたはオペレーティング環境で、1985年11月に初めてリリースされた。</div>
<div role="tabpanel">アップルのMacintoshコンピュータ用の現行オペレーティングシステム (OS) である。バージョン9まで続いたそれまでのMac OSの後継として、BSD UNIXベースで新たに作られた。</div>
<div role="tabpanel">Linuxとは、一般的にはUNIXライクなコンピュータ用オペレーティングシステム(OS)の一群を指し、厳密にはその中核となる部分であるカーネルのことである。</div>
</div>

role属性で要素の役割を付加しました。しかし、これだけで十分ではありません。要素のstate(ステート)、つまり状態を表現しなくてはなりません。

state(状態)

なぜ「state(状態)」を表現しなくてはならないか?

理由は、UAには、どのようにページ上で変化したかを把握する方法がありません。ですので、スクリーンリーダーなどを使っているユーザにとって、ページ上の状態を知らせる必要があります。

今回は、タブパネルですので、どのパネルが今ページ上に表示されているかを表現しなければなりません。

stateの定義(WAI-ARIAでマークアップ)

用いるstateは下記です。5.5.4. 関係属性参照

aria-controls
現在の要素によってコンテンツまたは存在が制御されている要素を特定する。(例:ツリービュー、チェックボックス、タブ)
aria-labelledby
現在の要素をラベル付けする要素を特定する。

これらの値は、同じ文書内の1つまたは複数の要素のIDに対するリファレンスを含んだ空白スペース区切りのリストですので、id属性を付加しなければなりません。

aria-controlsを追加

まず、aria-controlsを先に追加します。タブ部分にaria-controls属性をパネル部分にid属性を追加。

<div role="application">
<!-- タブ部分 -->
<ul role="tablist">
<li aria-controls="panel1" role="tab">Windows</li>
<li aria-controls="panel2" role="tab">Mac OS X</li>
<li aria-controls="panel3" role="tab">Linux</li>
</ul>
<!-- パネル部分 -->
<div id="panel1" role="tabpanel">Windowsは、マイクロソフトのオペレーティング システムまたはオペレーティング環境で、1985年11月に初めてリリースされた。</div>
<div id="panel2" role="tabpanel">アップルのMacintoshコンピュータ用の現行オペレーティングシステム (OS) である。バージョン9まで続いたそれまでのMac OSの後継として、BSD UNIXベースで新たに作られた。</div>
<div id="panel3" role="tabpanel">Linuxとは、一般的にはUNIXライクなコンピュータ用オペレーティングシステム(OS)の一群を指し、厳密にはその中核となる部分であるカーネルのことである。</div>
</div>

aria-labelledbyを追加

続いて、aria-labelledbyを追加していきます。タブ部分とパネル部分を関連づけるためにレベル付けのため開いているパネルを示すためにaria-labelledbyをパネル部分に追加します。

<div role="application">
<!-- タブ部分 -->
<ul role="tablist">
<li id="tab1" aria-controls="panel1" role="tab">Windows</li>
<li id="tab2" aria-controls="panel2" role="tab">Mac OS X</li>
<li id="tab3" aria-controls="panel3" role="tab">Linux</li>
</ul>
<!-- パネル部分 -->
<div id="panel1" aria-labeledby="tab1" role="tabpanel">Windowsは、マイクロソフトのオペレーティング システムまたはオペレーティング環境で、1985年11月に初めてリリースされた。</div>
<div id="panel2" aria-labeledby="tab2" role="tabpanel">アップルのMacintoshコンピュータ用の現行オペレーティングシステム (OS) である。バージョン9まで続いたそれまでのMac OSの後継として、BSD UNIXベースで新たに作られた。</div>
<div id="panel3" aria-labeledby="tab3" role="tabpanel">Linuxとは、一般的にはUNIXライクなコンピュータ用オペレーティングシステム(OS)の一群を指し、厳密にはその中核となる部分であるカーネルのことである。</div>
</div>

キーボードで操作できるようにする

ここまでやってきても、使えないUIでは意味がありません。僕が見てきたタブパネルは、マウスで操作可能でもキーボードでの操作ができないという使えないUIなのがほとんどでした。

WAI-ARIAだけではなくWCAG 2.0では、下記のようなガイドラインの記述があります。

ガイドライン 2.1 キーボード操作可能: すべての機能をキーボードから利用できるようにする。

また、下記のような達成基準もあります。

2.1.1 キーボード操作: コンテンツのすべての機能は、個々のキーストロークに特定のタイミングを要することなく、キーボード・インタフェースを通じて操作可能である。ただし、その根本的な機能が利用者の動作による始点からの終点まで続く一連の軌跡に依存して実現されている場合は除く。 (レベルA)

2.1.2 フォーカス移動: キーボード・インタフェースを用いてキーボード・フォーカスをそのウェブページのあるコンポーネントに移動できる場合、キーボード・インタフェースだけを用いてそのコンポーネントからフォーカスを外すことが可能である。さらに、その操作が修飾キーを伴わない矢印キー、修飾キーを伴わない Tab キー、又はフォーカスを外すその他の標準的な方法で可能な場合を除き、キーボード・フォーカスをそのコンポーネントから外す方法を利用者に知らせる。 (レベルA)

そこで役立つのがtabindex属性です。

<div role="application">
<!-- タブ部分 -->
<ul role="tablist">
<li id="tab1" aria-controls="panel1" role="tab"  tabindex="0">Windows</li>
<li id="tab2" aria-controls="panel2" role="tab"  tabindex="0">Mac OS X</li>
<li id="tab3" aria-controls="panel3" role="tab"  tabindex="0">Linux</li>
</ul>
<!-- パネル部分 -->
<div id="panel1" aria-labeledby="tab1" role="tabpanel">Windowsは、マイクロソフトのオペレーティング システムまたはオペレーティング環境で、1985年11月に初めてリリースされた。</div>
<div id="panel2" aria-labeledby="tab2" role="tabpanel">アップルのMacintoshコンピュータ用の現行オペレーティングシステム (OS) である。バージョン9まで続いたそれまでのMac OSの後継として、BSD UNIXベースで新たに作られた。</div>
<div id="panel3" aria-labeledby="tab3" role="tabpanel">Linuxとは、一般的にはUNIXライクなコンピュータ用オペレーティングシステム(OS)の一群を指し、厳密にはその中核となる部分であるカーネルのことである。</div>
</div>

以上でWAI-ARIAを意識したタブパネルのマークアップの完成です。HTML5(正確に言うと、HTML4.01やXHTML1.0でも可能)では、こういう形でマークアップされていくと思います。

今後

WAI-ARIAは、HTML5から使うのかというと決してそうではありません。現在、リリースされているブラウザの多くがWAI-ARIAをサポートしています。

しかし、WAI-ARIAはXHTML1.1のモジュールとして想定したものでした。それに対応していないHTML4.01やXHTML1.0では、文法エラーが起こります。しかし、文法エラーが起こるからといって使わないというのは間違いです。WAI-ARIAを使うことに何もデメリットはありません。

ですので、要素のセマンティックスさの不足を補うためにも、要素に役割を定義していってください。

デモ

今回の一応デモページを用意していますので、マウスとキーボードで操作してみてください。ちなみにjQueryのソースコードはめちゃくちゃなので、jQueryは参考になりません(汗)。

デモページ