ARIAツールチップノードにはアクセス可能な名前が必要です

ルールID: aria-tooltip-name
ルールセット: axe-core 4.10
ユーザーへの影響: 深刻
ガイドライン: WCAG 2.1 (A), WCAG 2.0 (A), WCAG 2.2 (A), EN 301 549

Start building more accessible experiences

Axe DevTools Pro helps development 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

Disabilities Affected

  • 視覚障害
  • ロービジョン
  • 運動障害

Standard(s)

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

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

  • 4.1.2: Name, Role, Value

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

  • 4.1.2: Name, Role, Value

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

  • 4.1.2: Name, Role, Value

EN 301 549 ガイドライン

  • 9.4.1.2: Name, Role, Value

修正方法

正しいマークアップソリューション

aria-tooltip-name ルールには、テスト基準を満たす4つのマークアップパターンがあります。 

<div role="tooltip" id="al" aria-label="Name"></div>

<div role="tooltip" id="alb" aria-labelledby="labeldiv"></div>

<div role="tooltip" id="combo" aria-label="Aria Name">Name</div>

<div role="tooltip" id="title" title="Title"></div>

  1. role="tooltip" 各要素が次のいずれかの特性を持つことを確認します。

    • スクリーンリーダーユーザーが認識できる内部テキスト。
    • 空でない aria-label 属性。
    • aria-labelledby を、スクリーンリーダーのユーザーが認識できるテキストを含む要素を指します。

誤ったマークアップソリューション

aria-tooltip-name ルールには、テスト基準を満たさない4つのマークアップパターンがあります。 

<div role="tooltip" id="empty"></div>

<div role="tooltip" id="alempty" aria-label=""></div>

<div role="tooltip" id="albmissing" aria-labelledby="nonexistent"></div>

<div role="tooltip" id="albempty" aria-labelledby="emptydiv"></div>
<div id="emptydiv"></div>

なぜ重要なのか

スクリーンリーダーのユーザーは、 role="tooltip" を持たない要素の目的を判別できません。

ルールの説明

Ariaツールチップ要素には、スクリーンリーダーユーザー向けに目的地、目的、機能、またはアクションを明確に説明する識別可能なテキストが必要です。

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

role="tooltip" すべての要素をと共にチェックして、識別可能でアクセス可能な名前が付けられていることを確認します。

リソース

Deque University コースのページ (要登録)

関連するコース情報はありません。

GitHub で axe-core に貢献する

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

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

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

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

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