Stellt sicher, dass jedes ARIA-Umschaltfeld einen zugänglichen Namen hat

Blind Sehbehindert Hören Mobilität
WCAG 2.2 Level A
Von Menschen für Menschen geschrieben und recherchiert
Foto des Experten
Ritvik Shrivastava
Fachmännisch überprüft von
Kommentare: 0
Ihre gesamte Domain
Erhalten Sie detaillierte Anweisungen, wie Sie jedes Barrierefreiheitsproblem auf Ihrer Website beheben können

Die WCAG verlangt, dass alle Umschaltfelder einen zugänglichen Namen haben.

Warum es wichtig ist

Es ist entscheidend, dass jedes Element mit einer semantischen Rolle auch einen zugänglichen Namen hat, um Benutzer zu unterstützen, die auf unterstützende Technologien angewiesen sind. Zu den semantischen Rollen gehören:

  • Checkbox
  • Menu
  • Menuitemcheckbox
  • Menuitemradio
  • Radio
  • Radiogroup
  • Switch

Behebung des Problems

Entwickler müssen sicherstellen, dass jedes ARIA-Umschaltfeld einen zugänglichen Namen hat.

Gutes Codebeispiel

Die Regel aria-toggle-field-name enthält fünf Markup-Muster, die die Testkriterien erfüllen:

Codebeispiel
<!-- Checkbox --> <div id="pass1" role="checkbox">Zeitung</div><!-- Menuitemcheckbox --> <ul role="menu"> <li id="pass2" role="menuitemcheckbox" aria-label="Zeilenumbruch" aria-checked="true"></li> </ul><!-- Menuitemradio --> <p id="pass3Label">Serifenlos</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="Reguläre Kruste"></div> </div><!-- Schalter --> <div id="pass5" role="switch" aria-checked="true" aria-label="Blaues Licht umschalten:"> <span>aus</span> <span>ein</span> </div> Kopieren

Schlechtes Codebeispiel

Die Regel aria-toggle-field-label enthält fünf Markup-Muster, die die Testkriterien nicht erfüllen:

Codebeispiel
<!-- Checkbox --> <div id="fail1" role="checkbox" aria-labelledby="existiert-nicht"></div><!-- Menuitemcheckbox --> <ul role="menu"> <li id="fail2" role="menuitemcheckbox" aria-checked="true"></li> </ul><!-- Menuitemradio --> <ul role="menu"> <li id="fail3" role="menuitemradio" aria-checked="true"></li> </ul><!-- Radio --> <div role="radiogroup"> <div id="fail4" role="radio" aria-checked="false" tabindex="0"></div> </div><!-- Schalter --> <div id="fail5" role="switch" aria-checked="true"> <span></span> <span></span> </div> Kopieren

Testfälle

Weitere Beispiele finden Sie in der ATC-Regelbibliothek von W3C auf GitHub.