ARIAトグルフィールドにはアクセシブルな名前があります

ルールID: aria-toggle-field-name
ルールセット: axe-core 4.10
ユーザーへの影響: 深刻
ガイドライン: WCAG 2.1 (A), WCAG 2.0 (A), WCAG 2.2 (A), 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)
  • 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

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

修正方法

正しいマークアップ方法

aria-toggle-field-name には検証基準に合格する5つのマークアップパターンが含まれます:

<!-- checkbox -->
<div id="pass1" role="checkbox">Newspaper</div>
 
<!-- menuitemcheckbox -->
<ul role="menu">
    <li id="pass2"
        role="menuitemcheckbox"
        aria-label="Word wrap"
        aria-checked="true"></li>
</ul>
 
<!-- menuitemradio -->
<p id="pass3Label">Sans-serif</p>
<ul role="menu">
    <li id="pass3"
        role="menuitemradio"
        aria-labelledby="pass3Label"
        aria-checked="true"></li>
</ul>
 
<!-- radio -->
<div role="radiogroup">
    <div id="pass4"
        role="radio"
        aria-checked="false"
        tabindex="0"
        title="Regular Crust"></div>
</div>
 
<!-- switch -->
<div id="pass5"
    role="switch"
    aria-checked="true"
    aria-label="Toggle blue light:">
    <span>off</span>
    <span>on</span>
</div>

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

aria-toggle-field-label には検証基準に不合格になるマークアップパターンが5つ含まれます:

<!-- checkbox -->
<div id="fail1" role="checkbox" aria-labelledby="does-not-exist"></div>
 
<!-- menuitemcheckbox -->
<ul role="menu">
	<li id="fail2" role="menuitemcheckbox" aria-checked="true"></li>
</ul>
 
#3 <!-- menuitemradio -->
<ul role="menu">
	<li id="fail3" role="menuitemradio" aria-checked="true"></li>
</ul>
 
#4 <!-- radio -->
<div role="radiogroup">
	<div id="fail4" role="radio" aria-checked="false" tabindex="0"></div>
</div>
 
#5 <!-- switch -->
<div id="fail5" role="switch" aria-checked="true">
	<span></span>
	<span></span>
</div>

なぜ重要なのか

すべてのセマンティックなロールを持つ要素がアクセシブルなラベルも持っていることを確認します。セマンティックロールには以下が含まれます:

  • checkbox
  • menu
  • menuitemcheckbox
  • menuitemradio
  • radio
  • radiogroup
  • switch

ルールの説明

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

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

ARIA トグル欄にアクセシブルな名前が存在します。

リソース

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

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

GitHub で axe-core に貢献する

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

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

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

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

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