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 dev 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 ルールの一覧 を参照する

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

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

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

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