リンクは、色に依存しない方法で周囲のテキストと区別する必要があります

ルールID: link-in-text-block
ルールセット: axe-core 4.10
ユーザーへの影響: 深刻
ガイドライン: WCAG 2.1 (A), WCAG 2.0 (A), WCAG 2.2 (A), Trusted Tester, EN 301 549
 

Start building more accessible experiences

Axe DevTools Pro helps dev teams find and fix up to 80% of accessibility issues while coding. No experience required. Get started with your free trial today.

Compliance Data & Impact

User Impact

深刻
Minor
Critical

Disabilities Affected

  • ロービジョン
  • 色覚障害

Standard(s)

  • WCAG 2.1 (A)
  • WCAG 2.0 (A)
  • WCAG 2.2 (A)
  • Trusted Tester
  • EN 301 549

WCAG 達成基準 [WCAG 2.1 (A)]

  • 1.4.1: 必須: Use of Color

WCAG 達成基準 [WCAG 2.0 (A)]

  • 1.4.1: 必須: Use of Color

WCAG 達成基準 [WCAG 2.2 (A)]

  • 1.4.1: 必須: Use of Color

Trusted Tester Guidelines

  • 13.A: 必須: Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.

    修正方法

    • すべてのリンクの名前がアクセシブルであることを確認しましょう。リンクテキストがスクリーン・リーダーには認識されない、リンクのラベルが重複している、もしくはリンクがフォーカスできない可能性があります。

    • すべてのリンクがプログラムによるフォーカスを受け取れるようにします。例えば、デバイス固有のイベントは避けるようにします (例: onmouseover)。

    • すべてのリンクテキストをスクリーン・リーダーで認識できるようにするため、リンクテキストを非表示にしてはなりません (例えば、display: nonearia-hidden="true" で)。

    • すべてのリンクが確実にプログラムによるフォーカスを受け取れるようにするため、onmouseover()mouseover()hover()onmouseout()mouseout() などのデバイス固有の JavaScript イベントを避けるようにします。これらを、onfocus()focus()onblur()、や blur() などのデバイスに依存しないイベントに置き換えます。

    • リンクがプログラムによるフォーカスの対象であるとき、スタイルの変更を抑えるためにリンクのスタイルを変更しないようにします。リンクのスタイルを変更すると目の見えるキーボードユーザーがページのどこにいるかを把握する機能を取り除きます。さらに、a 要素と href 属性を使って本物のリンクを作っていることを確認します。

    ARIA 1.1 の Wiki Using aria-label for link purpose ページでは aria-label 属性を使って HTML のリンクの目的を説明する例を次の通り提供しています:

    <h4>Neighborhood News</h4>
     <p>Seminole tax hike: Seminole city managers are proposing a 75% increase in 
     property taxes for the coming fiscal year.
     <a href="taxhike.html" aria-label="Read more about Seminole tax hike">[Read more...]</a>
     </p> 
     <p>Baby Mayor: Seminole voters elect the city's youngest mayor ever by voting in 3 year
     old Willy "Dusty" Williams in yesterday's mayoral election.
     <a href="babymayor.html" aria-label="Read more about Seminole's new baby mayor">[Read more...]</a>
     </p>
    

    なぜ重要なのか

    • リンクは web サイトにとって基本的なコンポーネントであるため、アクセシブルではないリンク要素は、アクセシビリティに対する障壁となります。

    • Web ページを操作するためにキーボードだけを使用している (そしてマウスを使用しない) ユーザーは、プログラムでフォーカス可能なリンクしかクリックできません。プログラムによるフォーカスを受け取れないリンクはそのようなユーザーにとってアクセシブルではありません。

    • 目の見えるユーザーのように、スクリーン・リーダーのユーザーはリンク先を知る必要があります。内部のリンクテキストはこの情報を提供しますが、スクリーン・リーダーがアクセスできなければ、使用されることはありません。

    • 視覚障害のあるスクリーン・リーダーのユーザーや、マウスを使えない人を含むキーボードユーザーは、プログラムによるフォーカスを受け取れるリンクやフォーム要素しか操作できません。例えばマウスホバーフォーカスに依存する onmouseover イベントなど、他の種類のフォーカスのみで動作させるあらゆるイベントはキーボードユーザーにとってアクセシブルではありません。リンクとフォーム要素のみがデフォルトでキーボードフォーカスを受け取ります。リンクまたはフォームコンポーネントではない要素は、tabindex="0" を追加し、フォーカスを受け取れるように調整します。

    ルールの説明

    リンクテキストと画像の代替テキストは、リンクとして使われている場合、スクリーン・リーダーが認識できて、重複したラベルがなく、フォーカス可能でなければなりません。

    仕組みについて (簡単に言うと)

    すべてのリンクにアクセシブルな名前があることを確認します。

    リソース

    axe 4.10 ルールの一覧 を参照する

    この情報は役に立ちましたか?

    すでにフィードバックをいただきました、ありがとうございます。.

    あなたの回答は次のとおりです。

    この情報は役に立ちましたか?
    フィードバックが提出された日付/時刻: