ARIAコマンドにはアクセス可能な名前が必要です

ルールID: aria-command-name
ルールセット: 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 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)
  • Trusted Tester
  • 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

Trusted Tester ガイドライン

  • 6.A: The purpose of each link or button can be determined from any combination of the link/button text, accessible name, accessible description, and/or programmatically determined link/button context.

EN 301 549 ガイドライン

  • 9.4.1.2: Name, Role, Value

修正方法

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

aria-command-name テスト基準を満たす4つのマークアップパターンがあるルールです。 

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

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

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

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

  1. role="link"、 role="button"、または role="menuitem" の各要素が次のいずれかの特性を持つことを確認してください。

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

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

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

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

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

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

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

なぜ重要なのか

スクリーンリーダーのユーザーは、アクセシブルな名前を持たない role="link"、 role="button"、または role="menuitem" の要素の目的を判別できません。

ルールの説明

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

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

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

リソース

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

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

GitHub で axe-core に貢献する

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

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

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

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

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