ARIAメーターノードにはアクセス可能な名前が必要です
ルールID:
aria-meter-name
ルールセット:
axe-core 4.10
ユーザーへの影響:
ガイドライン:
WCAG 2.1 (A), WCAG 2.0 (A), WCAG 2.2 (A), EN 301 549
修正方法
正しいマークアップソリューション
aria-meter-name
ルールには、テスト基準を満たす3つのマークアップ パターンがあります。
<div role="meter" id="alb" aria-labelledby="labeldiv"></div>
<div role="meter" id="combo" aria-label="Aria Name">Name</div>
<div role="meter" id="title" title="Title"></div>
-
role="meter"
の各要素が次のいずれかの特性を持つことを確認します。- 空でない
aria-label
属性。 -
aria-labelledby
を、スクリーン リーダーのユーザーが認識できるテキストを含む要素を指します。
- 空でない
誤ったマークアップソリューション
aria-meter-name
ルールには、テスト基準を満たさない4つのマークアップ パターンがあります。
<div role="meter" id="empty"></div>
<div role="meter" id="alempty" aria-label=""></div>
<div role="meter" id="albmissing" aria-labelledby="nonexistent"></div>
<div role="meter" id="albempty" aria-labelledby="emptydiv"></div>
<div id="emptydiv"></div>
なぜ重要なのか
スクリーン リーダーのユーザーは、 role="meter"
を持たない要素の目的を判別できません。
ルールの説明
Ariaメーター要素には、スクリーン リーダー ユーザー向けに目的地、目的、機能、またはアクションを明確に説明する識別可能なテキストが必要です。
仕組みについて (簡単に言うと)
role="meter"
を持つすべての要素をチェックして、識別可能でアクセス可能な名前が付けられていることを確認します。