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

ルール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

Learn Web Accessibility

Subscribe to our extensive curriculum of online self-paced courses

Compliance Data & Impact

User Impact


▼
Minor
Critical

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

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

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

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

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