skipリンクは少なくとも表示にすべき

アクセシビリティに関する有益な情報を発信されている456 Berea Streetですが、「Skip links need to be at least temporarily visible」というエントリーが公開されていたのでそれの和訳をしましたので紹介します。

サイトのナビゲーションのためにマウスを使わない人のためにskipリンクを用意しているサイトが多数ある。それはメインコンテンツに素早くジャンプできることから非常に便利なものです。

しかし、一つの問題は、skipリンクを非表示にしていることです。skipリンクが有益であることがわかり、それらをサイトに加えるが、開発者かデザイナーはそれらを皆あるいは皆だがスクリーン・リーダ・ユーザのいずれかに見せないようにしているのが奇妙に思える。

両方の場合では、CSSを切らなければ、スキップ・リンクは視覚的にいつでも隠されます。アクセシブルではない。

Bad: display:none;

この場合のskipリンクは大抵非表示になります(CSSがサポートされていないブラウザでは表示されます。)。display:none;は、この要素を存在しないよう振舞うという意味ですので、表示されないし、プリントアウトもされないければ、読み上げもされない。

Bad: Off-left

この場合は、CSSがサポートされていないブラウザ、またはスクリーンリーダ・ユーザーのみ有効です。それらはOff-leftのテクニックがあるビューポートの可視領域外、または異形で位置します。

skipリンクはこれでCSSを無効にせずに使用するのにおいて技術的に可能になりますが、それらが存在することを理解するのは非常に難しいかもしれません。得る唯一のビジュアル・フィードバックは、何もページにタブで移動するとき、起こるように思えないということです。ブラウザのステータスバーで注意深く見れば、あなたは、スキップ・リンクのターゲットを見てもよい。しかし、通常、それはあなたに十分に伝えないでしょう。

Better: Visible on focus

表示されているskipリンクが使うことができない場合、キーボードフォーカスで視覚的になり、リンクを使うことができる。そのように、それらから利益を得る人々に非表示にしておきません。