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

ルールID: input-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 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

緊急
▼
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

  • 5.C: 必須: The combination of the accessible name, accessible description, and other programmatic associations (e.g., table column and/or row associations) describes each input field and includes all relevant instructions and cues (textual and graphical).

EN 301 549 Guidelines

  • 9.4.1.2: 必須: Name, Role, Value

修正方法

正しいマークアップ方法

11個のマークアップパターンが input-button-name の検証基準に合格します:

<form action="#">
    <input type="button" id="pass1" value="Button Name" />
    <input type="button" id="pass2" aria-label="Name" />
    <input type="button" id="pass3" aria-labelledby="labeldiv" />
    <input type="button" id="pass4" value="Name" aria-label="Aria Name" />
    <input type="submit" id="pass5" />
    <input type="submit" value="Something" id="pass6" />
    <input type="reset" id="pass7" />
    <input type="reset" value="Something" id="pass8" />
    <input type="button" title="Something" id="pass9" />
    <input type="submit" title="Something" id="pass10" />
    <input type="reset" title="Something" id="pass11" />
</form>

不適切なマークアップ方法

5つのマークアップパターンが input-button-name の検証基準に不合格になります:

<form action="#">
    <input type="button" id="fail1" />
</form>
 
<form action="#">
    <input type="button" id="fail2" aria-label="" />
</form>
 
<form action="#">
    <input type="button" id="fail3" aria-labelledby="nonexistent" />
</form>
 
<form action="#">
    <input type="button" id="fail4" aria-labelledby="emptydiv" />
    <div id="labeldiv">Button label</div>
    <div id="emptydiv"></div>
</form>
 
<form action="#">
    <input type="submit" value="" id="fail5" />
</form>
 
<form action="#">
    <input type="reset" value="" id="fail6" />
</form>

なぜ重要なのか

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

スクリーン・リーダーのユーザーは、認識できるアクセシブルなテキストによる名前がなければ、画像の目的を把握することができません。画像の title は、画像そのものに対する補足的な情報しか提供しないかもしれません。ボタンなどの名前のないアクション可能なグラフィック画像には、コントロールとして使用されることを意図している場合、非テキストコンテンツに対する移動先、目的、機能またはアクションの明確な説明がありません。

ルールの説明

入力ボタンに認識可能なテキストが存在することを確認します。

input-button-name というルールは、入力ボタンが認識可能なテキストを持つことを確実にするため、button-name というルールと機能を分けています。入力ボタンの名前に関連するアドバイスは button 要素にとっては不適切でした。

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

入力ボタンには認識可能なテキストが存在しなければなりません。

リソース

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

GitHub で axe-core に貢献する

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

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

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

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

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