ボタンには識別可能なテキストが必要です

ルールID: button-name
ルールセット: axe-core 4.10
ユーザーへの影響: 緊急
ガイドライン: WCAG 2.1 (A), WCAG 2.0 (A), WCAG 2.2 (A), Section 508, 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)
  • Section 508
  • 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

Section 508 ガイドライン

  • 1194.22: Web based intranet and Internet Information & Applications
  • 1194.22 (a): A text equivalent for every non-text element shall be provided (e.g., via "alt", "longdesc", or in element content)

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

修正方法

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

button-name Theルールには、テスト基準を満たす5つのマークアップパターンがあります。 

<button id="text">Name</button>

<button id="al" aria-label="Name"></button>

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

<button id="combo" aria-label="Aria Name">Name</button>

<button id="buttonTitle" title="Title"></button>

  1. 各 button 要素と role="button" を含む要素が次のいずれかの特性を持つことを確認します。

    • スクリーンリーダーユーザーが認識できる内部テキスト。
    • 空でない aria-label 属性。
    • aria-labelledby を、スクリーンリーダーのユーザーが認識できるテキストを含む要素を指します。
    • role="presentation" または role="none" ARIA (ARIA 1.1)であり、タブ順序ではありません(tabindex="-1")。

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

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

<button id="empty"></button>

<button id="val" value="Button Name"></button>

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

<button id="albmissing" aria-labelledby="nonexistent"></button>

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

<button id="buttonvalue" value="foo" tabindex="-1"></button>

なぜ重要なのか

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

ルールの説明

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

input-button-name 規則は機能を button-name 規則から分離し、入力ボタンに識別可能なテキストが含まれるようにします。入力ボタンの名前に関するアドバイスは、ボタン要素には適していませんでした。

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

すべてのボタンをチェックして、識別可能でアクセスしやすい名前が付けられていることを確認します。

リソース

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

GitHub で axe-core に貢献する

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

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

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

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

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