富士通のサイトのようなブロック・スキップを時には表示させ、時には非表示にする実装[js]

ブロック・スキップなりスキップリンクなりですが、WCAG 2.0では、下記のように書かれています。

2.4.1 ブロック・スキップ: 複数のウェブページ上で繰り返されているコンテンツのブロックを通過できるメカニズムが利用可能である。(レベル A)

WCAG 2.0で書かれているので、当然ながらJIS X 8341-3:2010の7.2.4.1で記述されている。

ブロック・スキップをサイト制作にどこに設置しているでしょうか?僕は、これまで、ロゴのすぐ下辺りに設置をしていたのですが、WCAGなどのガイドラインを読んでいると、どうやらこれは良くない。

Techniques for WCAG 2.0で実装方法を確認すると下記のような記述がある。

G1: メインコンテンツエリアへ直接移動するリンクを各ページの先頭に追加する

ということは、ページの最上部が良いとのことなので、ブロック・スキップをページの最上部に設置するようになりました。

設置はよいのですが、このブロック・スキップを表示させているでしょうか?非表示にしているでしょうか?

サイトのデザインによれば、ブロック・スキップを非表示にしている場合が多いのではないかと思っているのですが、ブロック・スキップは「見えている」ことが大事のようです。

実際に、Techniques for WCAG 2.0に「リンクが画面に表示されていることが必要である。」と記述されています。

注記:キーボードで操作している利用者(スイッチの利用者を含む)、キーボード・ストロークを遅めにしている利用者、画面拡大ソフトウェアの利用者、画面を見ている人と一緒に作業しているスクリーンリーダーの利用者、キーボードだけで操作している利用者、及び音声認識ソフトウェアの利用者にとっては、リンクが画面に表示されていることが必要である。

また、下記のサイトなどでも論じられています。

しかしながら、デザイン上、表示させたくないと思う人は多いと思いますが、良いかどうか分かりませんが、ブロック・スキップを時には視覚的に見せ、時には見せないように実装しているサイトがあります。これは、9月2日で行われたセミナー「規格の策定者が解説する JIS X 8341-3:2010」でも紹介されていました。富士通のサイトです。

富士通 http://jp.fujitsu.com/

Tabキーを押すとブロック・スキップが表示され、離れると非表示になります。

僕は、これはガイドラインの達成基準をちゃんと満たし、さらにデザインの意向にも沿っている実装方法だと思っています。

んで、この実装方法は、jQueryで簡単に行うことができます。

HTMLは下記のような感じになります。body要素のすぐ近くに設置します。

<div id="blockskip">
<a href="#contents">このページの本文へ移動</a>
</div>

この方法は、フォーカスされた場合に、表示される意味のあるCSSを追加し、ブラーされた時にCSSを外すという実装なのですが、その時にCSSには、非表示の意味となるdisplay: none;のようなプロパティを指定してはいけません。

この場合は、フォントサイズもブロックの高さも1pxとして、目につきにくいようにします。

#blockskip{
    height: 1px;
    font-size: 1px;
}

そして、フォーカスされた時に、追加するCSSを指定します。

.show{
    font-size: 0.88em;
    height: 20px;
    width: 100%;
    display: block;
}

そして、jQueryは下記のようになります。

$(function(){
    $("#blockskip a").focus(function(){
        $(this).addClass("show");
    });
    $("#blockskip a").blur(function(){
        $(this).removeClass("show");
    });
});

これで、ブロック・スキップを時には表示させ、時には非表示にすることができます。

セミナーでも、言われていましたが、これが良いかどうかは分かりません。しかし、要件を満たし、デザインの意向に沿う素晴らしいソリューションだと僕は思っています。