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
Casandra Visser
Autor
Yotam Flohr
Forscher
Ritvik Shrivastava
Fachmännisch überprüft von
Kommentare:
0
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.