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

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

Accessibility testing for dev teams - No experience required

Find and fix up to 80% of accessibility issues with axe DevTools Pro. Get started with your free trial today. No credit card needed.

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 指南

  • 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 指南

  • 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" アクセシブルな名前がなければ、その目的を判別できません。

スクリーン リーダーのユーザーは、識別可能でアクセス可能なテキスト名がないと、画像の目的を理解できません。画像のタイトルは、画像自体に関する参考情報のみを提供することができます。ボタンなどの名前のないアクション可能なグラフィック イメージには、コントロールとして使用することを意図している場合、非テキスト コンテンツの宛先、目的、機能、またはアクションが明確に説明されていません。

ルールの説明

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

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

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

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

リソース

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

GitHub で axe-core に貢献する

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

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

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

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

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