ARIAメーターノードにはアクセス可能な名前が必要です

ルールID: aria-meter-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

User Impact


Minor
Critical

Disabilities Affected

  • 盲目
  • 視力低下
  • 運動・器用さ

Standard(s)

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

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

  • 1.1.1: Non-text Content

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

  • 1.1.1: Non-text Content

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

  • 1.1.1: Non-text Content

    修正方法

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

    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>
    
    1. 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" を持つすべての要素をチェックして、識別可能でアクセス可能な名前が付けられていることを確認します。

    リソース

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

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

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

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

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