［連載］植木 真の「JIS X 8341-3:2010　『逆引き』徹底解説」
第12回：JIS X 8341-3:2010 実践　＜その4＞ リンク

JIS X 8341-3:2010の『逆引き』徹底解説、4回目となる今回は「リンク」をテーマにお届けします。

■リンクに関する達成基準

まず最初に、JIS X 8341-3:2010の達成基準のうち、リンクに関するものを挙げてみましょう。

• 7.2.4.4 文脈におけるリンクの目的に関する達成基準［等級A］
• 7.2.4.9 リンクの目的に関する達成基準［等級AAA］
• 7.1.1.1 非テキストコンテンツに関する達成基準［等級A］
• 7.1.4.1 色の使用に関する達成基準［等級A］
• 7.2.4.7 視覚的に認識可能なフォーカスに関する達成基準［等級AA］
• 7.2.1.1 キーボード操作に関する達成基準［等級A］
• 7.2.1.3 キーボード操作に関する例外のない達成基準［等級AAA］
• 7.4.1.2 プログラムが解釈可能な識別名，役割及び設定可能な値に関する達成基準［等級A］

細かく見ていけば、これ以外にも関係してきそうな達成基準が幾つかありますが、まずは最低限これだけあるということを頭に入れておいてください。最低限といっても八つもありますから、もうお腹いっぱいですよね。でも、大丈夫。半分以上は皆さんなら「あたりまえ」にやっていることばかりだと思います。身構えなくても大丈夫です。

■リンクの目的

まずは、リンクテキストに関する達成基準から見ていきましょう。リンクテキストに関する達成基準には、等級Aの7.2.4.4と等級AAAの7.2.4.9があり、その要求レベルによって二段階に分かれています。

7.2.4.4 文脈におけるリンクの目的に関する達成基準
それぞれのリンクの目的が，リンクのテキストだけから，又はプログラムが解釈可能なリンクの文脈をリンクのテキストと合わせたものから解釈できなければならない。ただし，リンクの目的が一般的にみて利用者にとってあいまい（曖昧）な場合は除く。

＜引用元： JIS X 8341-3:2010「7 ウェブコンテンツに関する要件」より＞

7.2.4.9 リンクの目的に関する達成基準
それぞれのリンクの目的がリンクのテキストだけから特定できるメカニズムが利用可能でなければならない。ただし，リンクの目的が一般的にみて利用者にとってあいまい（曖昧）な場合は除く。

＜引用元： JIS X 8341-3:2010「7 ウェブコンテンツに関する要件」より＞

リンクテキストに求められるのは、「リンクの目的がリンクテキストだけから特定」できること、つまりリンク先がどういうウェブページなのかが分かるような文言であることです。等級Aと等級AAAの違いは、等級AAAでは「リンクテキストだけ」で分かるようにする必要があるのに対して、等級Aでは「リンクのテキストだけから、又は･･･」となっていて、「プログラムが解釈可能なリンクの文脈をリンクのテキストと合わせたもの」でリンクの目的を特定できればそれでもよいという点です。

例えば、「リンクの目的がリンクテキストだけから特定」できないリンクテキストとしては、「こちら」、「ここをクリック」、「一覧」、「詳細」などが挙げられます。皆さんは、これらのリンクテキストだけで、そのリンク先がどういうウェブページなのか分かりますか？

スクリーンリーダーによっては、そのウェブページにあるリンクテキストだけを抜き取って一覧にする機能を持っているものがあります。そうすると、前後の文脈が全くない状態になり、もし「一覧」とか「詳細」というリンクがあったとしたら、そのリンク先がどういうウェブページなのか全くわからないでしょう。また、スクリーンリーダーのユーザーは、Tabキーでフォーカスを順に移動させていくという場面もあります。そのような場合も、やはり「一覧」とか「詳細」としか読み上げなかったら、そのリンク先に行くかどうかを判断できないでしょう。

また、障害のない人のユーザーテストをやっていても、情報を探しているときに自然と目で追っているのは、青字でアンダーラインのついたリンクであることが少なくありません。そのときも「一覧」、「詳細」とか「こちら」だけだと、そのリンク先の内容が想像できずに前後の文脈を確認するという作業が必要になります。

そのため、ユーザーがそのリンク先に行くべきかどうかを素早く判断できるようにするために、まずはリンク先が分かるようにリンクテキストを記述するということが求められます。そこで達成基準の要件となっているのが、まずは「リンクの目的がリンクテキストだけから特定」できるようにすることなのです。

とはいえ、現実的にはどうしてもリンクテキストに十分な文字数のスペースを割けないことがあります。例えば、ブログのインデックスページでは、いくつもの記事の前段部分が並んでいて、最後に「続きを読む」というリンクテキストがよく使われています。理想を言えば、「『記事のタイトル』の続きを読む」というようにすればよいのでしょうが、見た目にもやや冗長になってしまう感が否めません。また、トップページに「新着情報」、「トピックス」、「お知らせ」というセクションがあり、それぞれに「一覧」というリンクがある場合も、理想としては「新着情報の一覧」、「トピックスの一覧」とすればよいのでしょうが、スペースを無駄に使ってしまいますし、やはり見た目に冗長になってしまいます。

画面を見ているユーザーであれば、前後の文脈や視覚的なレイアウト配置などによって、「続きを読む」や「一覧」だけでもリンク先を特定することができます。そこで、画面を見ていないユーザーでも、それと同じように前後の文脈が確認できればよいとしたのが等級Aの達成基準なのです。ただし、スクリーンリーダーで前後の文脈を確認することができるようにするためには、HTMLのウェブページであればその文脈がマークアップで示されていることが重要です。それが「プログラムが解釈可能なリンクの文脈」というわけです。

■プログラムが解釈可能なリンクの文脈

では、「プログラムが解釈可能なリンクの文脈」というのは、一体何のことでしょうか。『WCAG 2.0 解説書』を見ると、「プログラムが解釈可能なリンクの文脈」を提供するための実装方法がいくつか挙げられています。

• WCAG 2.0 解説書｜達成基準2.4.4 の実装方法及び不適合事例 - 文脈におけるリンクの目的
• G53: リンクテキストとそれが含まれている文章中のテキストとを組み合わせて、リンクの目的を特定する
• H77: リンクテキストとそれが含まれているリスト項目とを組み合わせて、リンクの目的を特定する
• H78: リンクテキストとそれが含まれているパラグラフとを組み合わせて、リンクの目的を特定する
• H79: リンクテキストとそれが含まれているデータセル及び関連づけられた見出しセルとを組み合わせて、リンクの目的を特定する
• H80: リンクテキストとその直前にある見出し要素とを組み合わせて、リンクの目的を特定する

実はこれ以外にも、「H33: title属性を用いて、リンクテキストの文言を補足する」や「H81: 入れ子になったリスト項目にあるリンクテキストとその親のリスト項目とを組み合わせて、リンクの目的を特定する」といった実装方法もあるのですが、これらは現時点ではスクリーンリーダーによるサポート状況が十分とはいえないため、達成基準を満たすことのできる実装方法とはいえません。

ここで挙げた実装方法のうち、最もよく使われるのは「H80: リンクテキストとその直前にある見出し要素とを組み合わせて、リンクの目的を特定する」でしょう。先に例に挙げた「続きを読む」というリンクの場合、それぞれのブログ記事のタイトルが見出し要素（<h1>～<h6>要素）でマークアップされていれば、スクリーンリーダーの多くは[Shift]＋[H]キーでそのリンクの前にある見出しの記事タイトルを確認することができます。同じように、「一覧」というリンクもその前にある「新着情報」、「トピックス」、「お知らせ」が見出しとしてマークアップされていれば、それぞれが何の「一覧」なのかを確認できます。

これが「プログラムが解釈可能なリンクの文脈」です。少し言いかえると「スクリーンリーダーが解釈可能なリンクの文脈」と言ってもよいかもしれません。これ以外では、例えば「AccSellメールマガジンの詳細はこちら。」という文章があって、「こちら」だけがリンクの場合、「G53: リンクテキストとそれが含まれている文章中のテキストとを組み合わせて、リンクの目的を特定する」という実装方法もよく適用されるでしょう。この実装方法は、スクリーンリーダーで「こちら」というリンクにフォーカスしたときに、そのリンクが含まれている文や前後を読むキー操作をすることによって、文全体を確認すればそのリンク先がどういうページなのかが分かる場合のことを指しています。

日本語のスクリーンリーダー全てが上記の実装方法を十分にサポートしているとは言い切れない状況もありますが、いずれかの実装方法によって「プログラムが解釈可能なリンクの文脈」を提供できていれば実用上の問題はないと考えてよさそうです。サポート状況の詳細については、WAIC（ウェブアクセシビリティ基盤委員会）の「アクセシビリティ・サポーテッド（AS）情報」を参照してください。

参考リンク

• アクセシビリティ・サポーテッド（AS）情報｜7.2.4.4 文脈におけるリンクの目的に関する達成基準 (等級A)

ただし、このリンクテキストはJIS準拠やアクセシビリティだけでなく、SEO（検索エンジン最適化）の観点からもあわせて考慮しておく必要があるでしょう。検索ロボットがこのリンクテキストをリンク先のページのキーワードとして用いているという話もあるようです。また、先にも述べたように、画面を見ているユーザーもリンクテキストだけを目で追っていることが少なくありません。

そういったこともあわせて考えると、可能なかぎり「リンクの目的がリンクテキストだけから特定」できるようにするのがベストであり、JIS X 8341-3:2010の達成基準でいえば等級AAAの「7.2.4.9 リンクの目的に関する達成基準」をベースにしたほうがよさそうです。そして、どうしてもリンクテキストだけではリンク先を特定できないときだけ、等級Aの「7.2.4.4 文脈におけるリンクの目的に関する達成基準」に沿って、「プログラムが解釈可能なリンクの文脈」を提供するようにするというのがよいでしょう。

実際に「WCAG 2.0 解説書」の「達成基準2.4.4 の実装方法及び不適合事例」にある実装方法の一覧でも、等級AAAに相当する「G91: リンクの目的を説明したリンクテキストを提供する」、「H30: a 要素のリンクの目的を説明するテキストリンクを提供する」が最初に挙げられており、WCAGワーキンググループによって推奨されています。

■リンク画像の代替テキスト

さて、リンクといえば、テキストリンクだけでなく、画像のリンクもありますよね。画像の場合には、<img>要素のalt属性に記述する代替テキストが、ここでいうリンクテキストになります。

7.1.1.1 非テキストコンテンツに関する達成基準
利用者に提示されるすべての非テキストコンテンツには，同等の目的を果たす代替テキストを提供しなければならない。（以下、略）

＜引用元： JIS X 8341-3:2010「7 ウェブコンテンツに関する要件」より＞

リンク画像の場合、基本的には画像にある文言をそのまま代替テキスト（つまり、リンクテキスト）として記述すればよいでしょう。そして、それだけでは「リンクの目的がリンクテキストだけから特定」できない場合には、やはり「プログラムが解釈可能なリンクの文脈」を提供することが求められます。また、イメージマップの場合には、ホットスポットである<area>要素のalt属性に記述する代替テキストが、ここでいうリンクテキストということになります。

参考リンク

• G94: 非テキストコンテンツに対して、それと同じ目的を果たし、同じ情報を提供する、簡潔な代替テキストを提供する
• H30: a 要素のリンクの目的を説明するリンクテキストを提供する
• H37: img 要素の alt 属性を用いる
• H24: イメージマップの area 要素に代替テキストを提供する

■段落中のテキストリンクの色

さて、次はリンクの見た目に関する達成基準を二つほど紹介し

つづきはメルマガで……。