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

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

  • 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

修正方法

正しいマークアップソリューション

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>

なぜ重要なのか

セマンティック ロールを持つすべての要素に、アクセス可能な名前も設定されていることを確認します。セマンティック ロールには次のものが含まれます。

  • チェックボックス
  • メニュー
  • メニュー項目チェックボックス
  • ラジオボタン型メニュー項目
  • ラジオボタン
  • ラジオグループ
  • スイッチ

ルールの説明

すべてのARIAトグル フィールドにアクセス可能な名前が付けられていることを確認します。

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

ARIAトグル フィールドにはアクセス可能な名前があります。

リソース

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

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

GitHub で axe-core に貢献する

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

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

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

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

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