WCAG 2.1 2.4.4「リンクの目的 (コンテキスト内)」の検品について

品質管理スタッフ 小稗

アクセシビリティに関する検品について、今回はWCAG 2.1の2.4.4「リンクの目的 (コンテキスト内)」という項目を取り上げたいと思います。

該当の達成基準2.4.4項目についてはWeb Content Accessibility Guidelines (WCAG) 2.1(ウェブアクセシビリティ基盤委員会による日本語訳)のページで確認できます。

達成基準の日本語訳は「それぞれのリンクの目的が、リンクのテキスト単独で、又はリンクのテキストとプログラムによる解釈が可能なリンクのコンテキストから判断できる。」となっており、解説書の表現を借りると「利用者がリンクを辿りたいかどうか決めることができるように」リンクテキストを記載するか、前後の文脈でリンク先が判断できることを求めています。

なお、前後の文脈によるリンク先の判断をNGとする、達成基準2.4.9「リンクの目的 (リンクのみ)」という項目が存在します。こちらは難易度が高いレベルAAAに位置づけされており、当社の標準対応(レベルA相当)では対象外となっています。

検品の方法

リンクテキストの妥当性を検品するにあたっては、コンテンツの意味や文脈を追っていく必要があるため機械的なチェックが難しいケースが多く、品質管理部門のスタッフによる目視チェックが中心となります。

当社内での検品時には前工程から原稿がインプットされますので、原稿と一致したリンクテキストであるか比較するチェックを行っています。リンクテキストとリンクパスが一覧化されているという点でファイルリストを参照するケースもあります。どのドキュメントを正とするかは前工程からのインプット次第で変わります。

原稿にあたるドキュメントが指示されず、検品対象ページのリンクテキストを正とする場合もあります。その場合は、テストサイト上で実際にページ遷移し、遷移先のページタイトルと文字列ないし意味が一致しているかを確認します。遷移先ページの検品がすでに終了している場合はこの方法が妥当となります。

なお、解説書では「リンクとタイトルが一致する又は極めて似ていることは、グッドプラクティス」であると記されています。リンクテキストと遷移先ページのタイトルが完全一致することが前提になる場合に限っては、機械的なチェックも可能になる認識です。

様々な実装状況への対応

リンクテキストの表現について、検品方法と合わせて2件ほど例示してみます。

「詳しくはこちら」といったテキストの「こちら」をリンク化して詳細ページへ誘導する実装はよく見られるパターンだと思います。この場合、「こちら」のリンクで遷移するページ内容について、「こちら」の前後の文脈で読み取ることができるかどうかがポイントになります。例えば「本サービスの導入事例についてはこちら」というテキストであれば、ユーザーには「こちら」の指し示す意味が伝わる文脈といえるでしょう。検品時には、前後の文脈から遷移先の判断が可能かを確認しています。

なお、上記例に関する達成方法集ではリンクの後にそのリンクを理解するために必要な情報を置いてしまうと、音声読み上げ環境を使用しているユーザーには分かりにくくなってしまうと指摘されています。達成基準は満たしていますが配慮したい内容という位置づけです。

また、img 要素をリンクに含んでいる場合、代替テキストがリンクテキストの役割を果たします。画像の意味と同等のテキストを記載することで、必要十分な内容になると思います。検品では適切に代替テキストが記載されているか、意味内容を含めて確認します。

上記を含んだ実装例については、達成方法集に一覧化されていますのでご参考にしてください。