スライドするコンテンツがアクセシブルなサイト

JavaScriptを利用してコンテンツを切り替えるサイトをよく見かけるようになってきましたが、これはうまいなあと思ったサイトがあったので紹介します。

紹介するサイトは「snap! -- オシャレなフィルムカメラをゆったり楽しむ本」です。フィルムカメラに関するムックのサイトみたいですね。ナビゲーションリンクをクリックするとコンテンツがスライドしていきます。これ自体はJavaScriptで実現していて、MooTools用のプラグインであるImage Menuと似たような仕組みです。

こういうサイトを見ると、ついJavaScriptを無効にしてアクセスし直してしまうのですが、このサイトで感心したのはそのときの挙動です。JavaScriptが無効な場合でもコンテンツがスライドします。一瞬、JavaScriptがまだ有効になっているのかと確認してしまいました。

仕組み的には、各コンテンツを含むそれぞれのdiv要素にIDを指定しておき、ナビゲーションリンクでフラグメント識別子を使ってそれらにリンクしています。各コンテンツが横並びになるようにCSSを定義してあり、コンテンツ全体を含むdiv要素には幅と高さを指定した上でoverflow: hiddenを指定しています。そのため、コンテンツ全体を含むdiv要素がちょうど小窓のような感じになり、各コンテンツへ飛んだときにそれがスライドしているように見えるようです。

これにはCSSだけでもこういう見せ方があったかと思わされました。文字サイズによってはコンテンツが読めなくなってしまうので、その辺りを工夫すれば、よりアクセシブルなサイトもできそうですね。