これはWeb Accessibility Advent Calendar 2013 14日目の記事です。
とはいえアクセシビリティの概念的な側面には詳しくないので小手先の内容になってしまい、そうそうたる記事の中で恐縮。
JSで表示を制御するカルーセルについて、非JSの環境で使うためにはどうすればいいか今一度考えてみました。
非JS環境での一番の問題は、そもそもカルーセルは表示できる領域に対してコンテンツが多い場合に利用されるものなので、その中身をすべて表示するには領域が足りない、という点です。（あたりまえですが）
そんなわけでできるだけ他のデザイン要素に影響しない、カルーセルの領域の中で収まる代替表現が必要になります。
1つ目のサンプルではカルーセルのページを重ねて並べつつ、 マウスオーバーで広がるようにしています。
2つ目のサンプルは、カルーセルコンテンツ全体の覆っているAタグの擬似要素として"◯"を表示し、
カルーセルコンテンツ自体はabsoluteで重ね、
擬似要素をマウスオーバーすることでカルーセルの表示を切り替えています。
- JSの読み込みが完了するまで、一旦代替のデザインのほうが表示されてしまう
- カルーセルコンテンツごとにAタグでくくられているようなタイプでしか利用できない。（バナーの切り替え表示のようなもの）
- 1のほうは、一旦領域外にマウスを出さないと切り替えられないのが使いづらい
- 2のほうは、表示するカルーセルコンテンツを固定できないので、"◯"からマウスが離れるとデフォルトのページに戻ってしまう
- 非JS、非CSSで見た時に不要なナビゲーションをJSで要素追加しつつ擬似要素で表示した結果、キーボードでの操作が壊滅
ということで頑張ってみたものの正直微妙な結果…
11月頃accsell-meetupに参加したいさいに、音声ブラウザを使っているユーザーが、カルーセル要素について以下のように感じているという非常に興味深いお話がありました。
- カルーセルだと言われるまで気付かなかった。ただのコンテンツの羅列だと思っていた
- 次のスライドとかのナビゲーションが意味がわからない
- カルーセルのページを示す「◯」とか「1」とかのリンクも意味がわからない。
- 「◯」とか「1」をクリックしても、カルーセルの表示が切り替わっている、というのがわからない
カルーセルはあくまで特定の環境（それが視覚健常者という最もシェアの大きい環境であるとはいえ）でしか都合のいいデザインでしかないので、ご利用は計画的に。
2014年で消えるデザインの筆頭にもあがってますし、そろそろ別の表現歩法を考えたほうがいいかもしれません。