実践Webアクセシビリティ

アクセシブルなリンクの実装：リンクテキスト、アイコンリンク、外部リンクへの対応

Tags: アクセシビリティ, リンク, HTML, ARIA, 実装

はじめに

ウェブサイトにおけるリンクは、情報を探索し、異なるページ間を移動するための基本的な要素です。しかし、その実装方法によっては、特定のユーザーにとって情報の取得や操作が困難になる場合があります。特に、スクリーンリーダーを利用するユーザー、キーボードのみで操作するユーザー、認知特性のあるユーザーなどが、リンクのアクセシビリティが低いことで影響を受ける可能性があります。

この課題に対し、本記事では、リンクのアクセシビリティを高めるための具体的な実装方法に焦点を当てて解説します。適切なリンクテキストの設定、アイコンのみで構成されるリンクへの対応、外部リンクやファイルへのリンクに関する考慮事項など、実践的なコード例を交えながらステップバイステップでご紹介します。

なぜリンクのアクセシビリティが必要か

リンクの目的が明確であることは、すべてのユーザーにとって重要ですが、特に以下のような状況でその重要性が際立ちます。

アクセシブルなリンクの実装は、ユーザーが迷うことなく、効率的に目的のページに到達できるようにするために不可欠です。

具体的な実装方法

1. 適切なリンクテキストの設定

リンクテキストは、リンク先の内容や目的を端的に示す必要があります。文脈から切り離されても意味が通じるようなテキストを設定することが重要です。

悪い例:

<p>詳しい情報はこちらをご覧ください。<a href="/details">こちら</a></p>
<p><a href="/contact">お問い合わせ</a>はここをクリック。</p>
<p>製品の機能については<a href="/features">詳細を見る</a>。</p>

これらの例では、「こちら」「ここをクリック」「詳細を見る」といったテキストが使われています。リンクテキストだけを見ても、リンク先が何であるか分かりません。

良い例:

<p>詳しくは<a href="/details">製品の詳しい情報</a>をご覧ください。</p>
<p><a href="/contact">お問い合わせ</a>はこちらのページから。</p>
<p>製品の機能については<a href="/features">製品機能の詳細</a>をご確認ください。</p>

このように、リンクテキスト自体がリンク先の内容を説明するように修正します。

2. アイコンのみのリンクへの対応

デザイン上、テキストを含まずアイコンのみでリンクを表現する場合があります（例: ソーシャルメディアのアイコン、カートアイコンなど）。この場合、視覚的な情報を持たないユーザー（スクリーンリーダーユーザーなど）のために、アイコンの意味を伝える代替テキストを提供する必要があります。

方法1: aria-label 属性を使用する

aria-label 属性は、要素のアクセシブルな名前（アクセシブルネーム）を提供します。これは、要素のコンテンツ（この場合はアイコン）の代わりとしてスクリーンリーダーに読み上げられます。

<a href="https://twitter.com/example" aria-label="Twitter">
  <img src="/images/twitter-icon.svg" alt="">
</a>

<a href="/cart" aria-label="カートを見る">
  <svg aria-hidden="true" focusable="false" role="img">
    <!-- SVG path for cart icon -->
  </svg>
</a>

注意点:

方法2: 視覚的に非表示のテキストを追加する

CSSを使って要素を視覚的に非表示にする手法です。スクリーンリーダーは非表示でない要素を読み上げるため、このテキストを読み上げます。

<a href="https://facebook.com/example">
  <img src="/images/facebook-icon.svg" alt="">
  <span class="visually-hidden">Facebook</span>
</a>

<a href="/cart">
  <svg aria-hidden="true" focusable="false" role="img">
    <!-- SVG path for cart icon -->
  </svg>
  <span class="visually-hidden">カートを見る</span>
</a>

```css
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

この visually-hidden クラスは、要素を画面上から完全に消しつつ、スクリーンリーダーからは認識できるようにするためのCSSテクニックです。多くのCSSフレームワークに含まれています。

どちらの方法を選択するかは状況によりますが、aria-label はHTMLをシンプルに保てる利点があります。

3. 外部リンクやファイルリンクへの対応

ユーザーがリンクをクリックした際に、現在のサイトを離れる場合（外部リンク）や、HTML以外のファイルが開かれる場合（PDF, Word文書, 画像ファイルなど）は、事前にその旨をユーザーに伝えることが親切です。これにより、予期しないウィンドウやアプリケーションの起動を防ぎ、ユーザーの混乱を避けることができます。

方法1: リンクテキストに補足情報を追加する

最もシンプルで分かりやすい方法です。

<a href="https://www.w3.org/WAI/" target="_blank">W3C Web Accessibility Initiative (WAI) (新しいウィンドウで開く)</a>
<a href="/documents/manual.pdf">製品マニュアル (PDF)</a>

方法2: 視覚的に非表示のテキストを追加する

テキスト全体に補足情報を入れたくない場合に有効です。

<a href="https://developer.mozilla.org/ja/" target="_blank">
  MDN Web Docs
  <span class="visually-hidden">(新しいタブで開く)</span>
</a>
<a href="/images/logo.png">
  サイトロゴ画像
  <span class="visually-hidden">(PNGファイル)</span>
</a>

方法3: aria-label または aria-describedby を使用する

aria-label はリンクテキストを完全に置き換えてしまうため、既存のリンクテキストに補足情報を加えたい場合は aria-describedby が適しています。

まず、補足情報となる要素を作成し、一意のIDを付けます。次に、リンク要素に aria-describedby 属性でそのIDを指定します。

<a href="https://ja.react.dev/" target="_blank" aria-describedby="new-window-info">Reactドキュメント</a>
<span id="new-window-info" class="visually-hidden">(新しいタブで開きます)</span>

<a href="/data/report.xlsx" aria-describedby="filetype-info">四半期レポート</a>
<span id="filetype-info" class="visually-hidden">(Excelファイル)</span>

これにより、スクリーンリーダーはリンクテキストを読み上げた後に、関連付けられた説明 (aria-describedby で参照される要素の内容) を読み上げます。「Reactドキュメント (新しいタブで開きます)」のように聞こえます。

target="_blank" 使用時の注意:

target="_blank" を使用して新しいタブやウィンドウでリンクを開く場合、セキュリティ上の問題（opener APIへのアクセス）とアクセシビリティ上の問題（新しいウィンドウが開いたことに気づきにくい、元のウィンドウに戻りにくいなど）が発生する可能性があります。セキュリティ問題の対策として、必ず rel="noopener noreferrer" を同時に指定してください。

<a href="https://example.com/" target="_blank" rel="noopener noreferrer">外部リンク (新しいタブで開く)</a>

アクセシビリティの観点からは、新しいウィンドウで開くことをユーザーに明示することが重要です。前述の補足情報の追加方法を組み合わせて使用します。

実装時の注意点やよくある落とし穴

テスト方法

実装したリンクのアクセシビリティをテストするには、以下の方法があります。

  1. キーボード操作での確認: マウスを使わず、Tabキーでページ上のすべてのリンクを順にフォーカスできるか確認します。Shift+Tabで逆順に移動できるかも確認します。フォーカスされた際に、そのリンクが視覚的にどこにあるかすぐに分かりますか？ EnterキーやSpaceキーでリンクをアクティブにできますか？
  2. スクリーンリーダーでの確認: NVDA (Windows), VoiceOver (macOS/iOS), TalkBack (Android) などのスクリーンリーダーを使用してページを読み上げさせます。特に、リンクを単独で読み上げさせた場合（多くの場合、スクリーンリーダーのショートカットでリンクリストを表示できます）に、リンクの目的が正確に伝わるかを確認します。アイコンリンクの代替テキスト、外部リンクやファイルリンクの補足情報が正しく読み上げられますか？
  3. アクセシビリティ評価ツールの利用: Lighthouse (Chrome開発者ツール), Axe (ブラウザ拡張機能) などの自動評価ツールを実行します。これらのツールは、コントラスト比の問題や、一部のARIA属性の誤用など、基本的な問題を検出してくれます。ただし、自動ツールだけでは不十分であり、必ず手動でのテストを併用してください。
  4. コードレビュー: HTMLやARIA属性が正確に使用されているか、チーム内でレビューを行います。

まとめ

リンクはウェブサイトの基盤であり、そのアクセシビリティはサイト全体の使いやすさに直結します。適切なリンクテキストの使用、アイコンリンクへの代替テキストの提供、外部リンクやファイルリンクに関するユーザーへの配慮は、実装に少し手間がかかるかもしれませんが、多くのユーザーにとってサイトの利用体験を大きく向上させます。

本記事で紹介した具体的な実装方法やテスト方法を参考に、あなたのウェブサイトのリンクを、より多くの人々にとってアクセスしやすいものにしてください。継続的な改善が重要です。