リンクテキストをスクリーンから隠したいときに、どんな方法が最もアクセシブルなのでしょうか。
Yahoo! User Interface Blogより
もう3ヶ月ほど前のことですが、Yahoo! User Interface Blogで面白い取り組みをしていました。Empty Links and Screen Readersという記事です。その取り組みとは、リンクテキストをスクリーンから隠すための方法を1つ1つ検証し、どの方法がアクセシブルなのかを調査するというものです。
Yahooが調べたのは以下のリンクです。
- 通常のテキストとそれに対するリンク
- テキストもtitle属性もないリンク
- title属性はあるが、テキストがないリンク
- テキストの代わりに空白を入れたリンク
これらのリンクに次のCSSを当てます。
- 特に指定しない
- offscreen
- visibility: hidden
- display: none
（ちなみに、offscreenのコードはこのようなものです。）
.hogehoge { position: absolute; left: -9999em; }
このCSSをそれぞれのリンクに割り当てます。そのHTMLはEmpty links test casesに掲載されています。
次にこのHTMLを2名の熟練したスクリーンリーダーユーザとアクセシビリティに詳しいデベロッパー1名にスクリーンリーダーを使って読んでもらいます。スクリーンリーダーは1つではなく、3つの異なったブラウザを用います。この状況で上記のHTMLは読み上げられるのかを検証したということです。
この取り組みから得られる教訓
この結果に関しては上記のブログの表を参照してください。アクセシビリティに詳しい方は想像がつくかもしれませんが、それぞれのスクリーンリーダーによって得られる結果が異なってくることが分かります。
その上で、記事はWebデベロッパーがリンクテキストをスクリーンから隠したい場合のアクセシビリティを次のようにまとめています。
- リンクには常に適切なテキストを用い、文脈において意味のあるテキストを使うこと。もし、リンクを隠したい場合にはoffscreenを使うこと。
- display: noneを用いてリンクを隠そうとすると、スクリーンリーダーによっては読み上げられないことがある。
- テキストを用いずにhref属性のみでリンクを使おうとしないこと。スクリーンリーダーによってはhref属性のURLを読み上げることがある。
- リンクを隠す場合に、visibility: hiddenを使わないこと。スクリーンリーダーによってはtitle属性を無視したり、URLを読み上げたりする。
- テキストの代わりにスペースを用いないこと。スクリーンリーダーによっては、URLを読み上げたり、リンクがあることを伝えたりする（しかし、リンクテキストは読み上げない）。
- リンクテキストの代わりにtitle属性を用いた場合も、すべてのスクリーンリーダーユーザが使えるとは結論付けられない。
そもそもリンクテキストを空白にすることはあるのか？
記事の冒頭で触れられていますが、これはmicroformatsのinclude-patternにおいてリンクテキストを空白で使用する可能性があるというのが事の発端のようです。
アクセシビリティというと、AjaxやFlashのようなリッチなコンテンツについてはよく言われるのですが（前回書いたWAI-ARIAについての現状におけるメモもその一種です）、microformatsにもまだまだ課題はあるようです（以前はmicroformats.biz >> accessibilityで書かれている議論もありました）。
