ひとつのページに同じラベルのリンクが複数存在する場合 (その2)

2009年の10月に「ひとつのページに同じラベルのリンクが複数存在する場合」という記事を書きました。ある Web ページ内に同じ文言を持つリンクが複数あって、それらのリンクの飛び先が異なる場合、<a> 要素の title 属性を使うことをご紹介したものです。

ショッピングサイトやカタログサイトの商品一覧、ニュースサイトやブログの記事一覧などで、「詳しく見る」「続きを読む」といったリンクラベルが並んでいるのをよく目にしますが、その多くは、スクリーンリーダー (音声読み上げソフト) を使用している視覚障害者がキーボード操作 ([Tab]キー) によってリンク箇所だけを辿ると、各々のリンクの違い (何についての「詳細」や「続き」なのか、どこにジャンプするのか) を判別できないという問題があります。幅広いユーザーに対してよりよいアクセシビリティを提供するためには、視覚的にリンクの文脈を瞬時に把握できるユーザーには冗長ではないシンプルなリンクラベルを提示する一方で、視覚的にリンクの文脈を瞬時に把握できないユーザーに対しては、そのリンク箇所を読み取るだけでユニークネス (他のリンク箇所と異なるそのリンクの具体的な内容) を理解できるようにすることが大切です。

以上が、この話題のもともとの問題意識です。

<a> 要素の title 属性はベストな解決策ではない

ただし、(先の記事でご紹介した) <a> の title 属性を使ってリンクのユニークネスを表現するという手法は、ベストな解決策ではないというのが現状です。支援技術の対応状況がまちまち (title 属性の内容を読み上げないスクリーンリーダーがあったり) だからです。

Web アクセシビリティに関する世界標準のガイドラインである WCAG 2.0 (日本の JIS X834-3:2010 の達成基準としても採用されている指針です) の解説書 (Understanding WCAG 2.0) にも、下記の記述があります。

注記 : title 属性へのアクセスにおける多くのユーザーエージェントに制約があり、コンテンツ制作者はこのテクニックの適用において注意しなくてはならない。このため、コンテンツ制作者には テクニック C7: CSSを用いて、リンクテキストの一部を非表示にする (CSS) や H30: a 要素のリンクの目的を説明するテキストリンクを提供する (HTML) が推奨される。

WCAG 2.0 解説書 (Understanding WCAG 2.0)「文脈におけるリンクの目的/達成基準 2.4.4 を理解する」の、「達成基準を満たすことのできる実装方法」より引用。

リンクラベルの一部を視覚的に非表示にする

上記で引用した注記を考慮しつつ :

...のふたつを両立させるには、CSS の「オフレフト (off-left)」というテクニックを使うのも一考です。

たとえば記事一覧のページで、「記事の全文」というリンクラベルが並んでいるとします。これらは外観上は同じラベルのリンクなのですが、その実体は「記事 xxx の全文」としたい、としましょう (xxx の部分に具体的な記事タイトルを入れることで、リンクのユニークネスを表現すると想像してみてください)。「xxx」の部分を、「<span class="off-left">xxx</span>」という具合にマークアップして、CSS で「.off-left {position:absolute; left:-9999em;}」という具合に設定します。こうすることで、外観上は「記事の全文」とシンプルでありながらも、スクリーンリーダーは「記事 xxx の全文」と読み上げることが可能になります。リンクラベルの一部を視覚的に非表示にするわけですが、「visibility:hidden;」や「display:none;」のように本当に消してしまうわけではなく、あくまでもブラウザの表示枠の外にはみ出させる、という考えかたです。

リンクラベルのユニークネスはどのくらい厳密に求められるか

ところで、JIS X8341-3:2010 の箇条 7.2.4.4 (達成基準等級 A) を見ると、下記の記述があります。

7.2.4.4 文脈におけるリンクの目的に関する達成基準

それぞれのリンクの目的が、リンクのテキストだけから、又はプログラムが解釈可能なリンクの文脈をリンクのテキストと合わせたものから解釈できなければならない。(後略)

(強調は筆者による)

リンクラベルが具体性を欠いていても (厳密にユニークでなくても)、スクリーンリーダーなど支援技術が文脈 (リンクおよびその前後関係) を読み取ることができるようになっていればよい、ということになりますね。もっともこの場合、リンクが、ユニークネスを理解できる手がかりとなる他の表現と、同じ段落 (あるいは同じリスト、同じテーブル) に含まれていなければならないという制約があります (参照 : WCAG 2.0 実装方法集「F63: 達成基準 2.4.4 の不適合事例 - リンクと関係のないコンテンツにおいてのみ、リンクの文脈を提供している」)。

そして、箇条 7.2.4.9 (達成基準等級 AAA) になると、下記のように規定されています。

7.2.4.9 リンクの目的に関する達成基準

それぞれのリンクの目的がリンクのテキストだけから特定できるメカニズムが利用可能でなければならない。(後略)

(強調は筆者による)

上記2つの箇条を読み比べて明確にわかることは、つまり結局のところ、リンク箇所を読み取るだけでユニークネス (他のリンク箇所と異なるそのリンクの具体的な内容) を理解できるほうが、アクセシビリティの観点でより優れているということです。達成基準 A のレベルを満たすことが目標であればさほどユニークネスにこだわらなくてよい、という考えかたもあろうかと思いますが、それでもソースコード上の制約条件はあるわけですし、上記で触れたオフレフトというテクニック自体とても簡単に実装できますので、であればリンク箇所は各々、それだけでユニークネスを持つようにコーディングすべきだろうなと思います。