ボタンには、プログラムで決定可能なテキストが必要です

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

Need accessibility training?

Deque University offers an extensive curriculum of self-guided online courses for every skillset and experience level.

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 Guidelines

  • 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 Guidelines

  • 9.4.1.2: 必須: Name, Role, Value

修正方法

各 button 要素および role="button" が付与された要素に次のいずれかの特徴があることを確認します:

  • スクリーン・リーダーのユーザーが認識可能な内部テキスト
  • 空ではない aria-label 属性
  • スクリーン・リーダーのユーザーが認識可能なテキスト (例: display: none; あるいは aria-hidden="true" ではない) を含む要素を参照しているaria-labelledby
  • role="presentation" あるいは role="none" (ARIA 1.1) で、タブ順序に含まれていない (tabindex="-1")

<input type="button"> に次のいずれかの特徴があることを確認します:

  • 空ではない value 属性
  • 空ではない aria-label 属性
  • スクリーン・リーダーのユーザーが認識可能なテキスト (例: display: none; あるいは aria-hidden="true" ではない) を含む要素を参照しているaria-labelledby

<input type="submit">、<input type="reset"> に次のいずれかの特徴があることを確認します:

  • 空ではない aria-label 属性
  • スクリーン・リーダーのユーザーが認識可能なテキスト (例: display: none; あるいは aria-hidden="true" ではない) を含む要素を参照しているaria-labelledby
  • 空ではない、または指定されていない value 属性。ブラウザーは value 属性が指定されていない場合、リセットおよび送信ボタンにはデフォルトの値を付与します

なぜ重要なのか

スクリーン・リーダーのユーザーはアクセシブルな名前がない button の目的を認識することができません。

認識できる、アクセシブルなテキストの名前がないと、スクリーン・リーダーのユーザーにボタンとして使用されている画像の目的を伝える方法がありません。画像の title は画像についての補足的な情報しか提供できません。ボタンなどの操作可能なグラフィック画像の場合、名前がないと、コントロールとして使用されることを想定している非テキストコンテンツの遷移先、目的、機能または動作明確な説明がありません。

ルールの説明

ボタンには遷移先、目的、要素、または動作をスクリーン・リーダーのユーザーに明確に伝える認識可能なテキストがなければなりません。

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

すべてのボタンを確認し、認識できるアクセシブルな名前が存在することを確認します。

リソース

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

GitHub で axe-core に貢献する

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

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

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

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

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