アクセシブルなアコーディオンパネルにするために考えなければならないこと

アコーディオンパネルとは、パネルをスムーズにスライドさせるUIのことで、 jQueryを勉強している人（してきた人）は、必ずといっていいほど、アコーディオンパネルを書いたことがある、もしくは、サンプルを見てきたのではないかと思います。

若干、自分で書いていて思うのですが、「今更、アコーディオンパネルかよ。」「そんなに新しいことでもないしなー。」とか。

実際のWebコンテンツにアコーディオンパネルを設置しているサイトがどれだけあるかは分かりません。その以前に、アコーディオンパネル自体が良いUIなのかどうかも分かりません。

アコーディオンパネルというのは、タブをクリックしたときに、非表示になっているパネルがスライドなどのアニメーション効果で開き、隠れていたコンテンツが表示されるというもので、このアニメーション効果が良いから、アコーディオンパネルを実装しているところもあるのではないかと思います。

しかし、前述した通り、jQueryの本には、必ずといっていいほど、アコーディオンパネルのサンプルはありますし、このブログでもそうですが、他のブログでもいろいろなアコーディオンパネルの紹介はあります。

しかし、多くの紹介されているアコーディオンパネルというのは、決して使えるものではないと感じています。

なぜ使えないか

なぜ決して使えるものではないということですが、下記のURL先のアコーディオンをご覧ください。作成者の方へ、勝手に例として挙げて申し訳ございません。

マウスで、タブをクリックすれば、動作します。全く問題はなく、何が使えないのかという風に感じた方も多いと思います。

その方は、もう一度さきほどのサイトにアクセスして、マウスを使わずに、キーボードのTabキーで操作してください。

キーボードで操作した場合に、パネルの開閉はできたでしょうか？できなかったはずです。

キーボードで操作できなければ使えないUIです。僕のいう「使えない」というのは、キーボードで操作したときに、キーボードで操作できないことをいいます。

WebアクセシビリティのガイドラインであるWCAG2.0（JIS X 8341-3:2010も同じく）には、 キーボード操作可能でなければならないと明記されています。

コンテンツのすべての機能は、個々のキーストロークに特定のタイミングを要することなく、キーボードインタフェースを通じて操作可能である。ただし、その根本的な機能が単にユーザの動作の終点に依存しておらず、ユーザの動作による軌跡に依存して実現されている場合は除く。（レベル A）

なぜキーボードで操作できなければならないかというと、 マウスを使うのがとても困難なユーザのためです。

キーボードで使えるようにしないと、アコーディオンパネルの開閉ができないません。そのため、マウスを使うのがとても困難なユーザにとって、そのコンテンツを利用することができません。

キーボードで操作できるようするためには、やはりフォーカスをあてるようにしなけばなりません。

例としてあげさせてもらったサイトのHTMLのマークアップは、下記のようになっています。

<dl>
<dt>Step.1</dt>
<dd>aaa</dd>
<dt>Step.2</dt>
<dd>aaa</dd>
<dt>Step.3</dt>
<dd>aaa</dd>
</dl>

これでは、フォーカスはあたりませんので、フォーカスをあてるようにするためには、シンプルにa要素を設置すればよいでしょう。

<dl>
<dt><a href="#">Step.1</a></dt>
<dd>aaa</dd>
<dt><a href="#">Step.2</a></dt>
<dd>aaa</dd>
<dt><a href="#">Step.3</a></dt>
<dd>aaa</dd>
</dl>

当然ながら、こうするとフォーカスをうけれることができるので、キーボードだけでパネルの開閉ができるようになります。

ここは、単に僕の思っていることなのです。シンプルにフォーカスをあてるようにするためには、a要素を設置するほうがいいですが、a要素が最もよいかというとちょっと微妙な感じがします。

無意味にa要素を指定するのはちょっと違うような気がするからです。なんとか、a要素を設置しないでフォーカスをあてれるようにするほうがよいのかなーと思いますので、指定したHTML要素にフォーカスをあてれるようなスクリプトを開発して、それを実装したほうがなんかよいような気もします。

何か、良い案でもあれば教えていただければ幸いです。