ARIA入力フィールドにはアクセシブルな名前が必要です

ルールID: aria-input-field-name
ルールセット: axe-core 4.7
ユーザーへの影響: 深刻
ガイドライン: WCAG 2.1 (A), WCAG 2.0 (A), Trusted Tester
 

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)
  • Trusted Tester

WCAG 達成基準 [WCAG 2.1 (A)]

  • 4.1.2: 必須: Name, Role, Value

WCAG 達成基準 [WCAG 2.0 (A)]

  • 4.1.2: 必須: Name, Role, Value

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).

修正方法

正しいマークアップ方法

aria-input-field-label というルールには検証基準に合格する6つのマークアップパターンが含まれます:

<!-- combobox -->
<div id="pass1" aria-label="country" role="combobox">England</div>
 
<!-- Select a color: -->
<div id="pass2" role="listbox" aria-labelledby="pass2Label">
    <div role="option">Orange</div>
</div>
 
<!-- searchbox -->
<p id="pass3Label">Search currency pairs:</p>
<div id="pass3"
    role="searchbox"
    contenteditable="true"
    aria-labelledby="pass3Label"></div>
 
<!-- slider -->
<div id="pass4"
    role="slider"
    aria-label="Choose a value"
    aria-valuemin="1"
    aria-valuemax="7"
    aria-valuenow="2"></div>
 
<!-- spinbutton -->
<div id="pass5"
    role="spinbutton"
    aria-valuemin="0"
    aria-valuemax="10"
    aria-valuenow="8"
    aria-label="Enter quantity:"></div>
 
<!-- textbox -->
<label id="foo">
    foo
    <div id="pass6" role="textbox" aria-labelledby="foo"></div>
</label>

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

aria-input-field-label というルールには検証基準に不合格になる10個のマークアップパターンが含まれます:

<!-- aria-label with empty text string -->
<div id="fail1" aria-label=" " role="combobox">England</div>
 
<!-- The label does not exist. -->
<div id="fail2" aria-labelledby="non-existing" role="combobox">England</div>
 
<!-- The implicit label is not supported on div elements. -->
<label>
    first name
    <div id="fail3" role="textbox"></div>
</label>
 
<!-- explicit label not supported on div elements -->
<label for="fail4">first name</label>
<div role="textbox" id="fail4"></div>
 
<!-- combobox -->
<div id="fail5" role="combobox">England</div>
 
<!-- listbox -->
<div id="fail6" role="listbox" aria-labelledby="label-does-not-exist">
    <div role="option">Orange</div>
</div>
 
<!-- searchbox -->
<div id="fail7"
    role="searchbox"
    contenteditable="true"
    aria-labelledby="unknown-label"></div>
 

<!-- slider -->
<div id="fail8"
    role="slider"
    aria-valuemin="1"
    aria-valuemax="7"
    aria-valuenow="2"></div>
 
<!-- spinbutton -->
<div id="fail9"
    role="spinbutton"
    aria-valuemin="0"
    aria-valuemax="10"
    aria-valuenow="8"></div>
 
<!-- textbox -->
<label>foo
    <div id="fail10" role="textbox"></div>
</label>

なぜ重要なのか

この新しいルールは、すべてのARIA入力欄にアクセシブルな名前が存在することを確認します。次の入力欄ロールには、アクセシブルな名前が必ず存在しなければなりません:

  • combobox
  • listbox
  • searchbox
  • slider
  • spinbutton
  • textbox

ルールの説明

すべてのARIA入力欄にアクセシブルな名前が存在することを確認します。

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

ARIA入力欄にアクセシブルな名前があります。

リソース

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

関連するコース情報はありません。

GitHub で axe-core に貢献する

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

Was this information helpful?

You have already given your feedback, thank you..

Your response was as follows:

Was this information helpful?
Date/Time feedback was submitted: