ARIAツールチップノードにはアクセス可能な名前が必要です
ルールID:
aria-tooltip-name
ルールセット:
axe-core 4.10
ユーザーへの影響:
ガイドライン:
WCAG 2.1 (A), WCAG 2.0 (A), WCAG 2.2 (A), EN 301 549
Accessibility testing for dev teams - No experience required
Find and fix up to 80% of accessibility issues with axe DevTools Pro. Get started with your free trial today. No credit card needed.
Compliance Data & 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>
-
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 コースのページ (要登録)
関連するコース情報はありません。
axe 4.10 ルールの一覧 を参照する
この情報は役に立ちましたか?
すでにフィードバックをいただきました、ありがとうございます。.
あなたの回答は次のとおりです。
この情報は役に立ちましたか?
フィードバックが提出された日付/時刻:
フィードバックが提出された日付/時刻: