Das Kriterium dahinter
4.1.2 Name, Rolle, Wert
Jedes Bedienelement muss preisgeben, was es ist, wie es heißt und in welchem Zustand es sich befindet.
Stufe A · EN 301 549 § 9.4.1.2
Warum es diese Prüfung gibt
Das ist das Kriterium, an dem eigene Komponenten scheitern. Ein als Checkbox gestyltes `div` sagt assistiver Technik nichts darüber, ob es angehakt ist.
Was sie üblicherweise auslöst
- fällt durchEin `<div>`-Umschalter ohne `role="switch"` und ohne `aria-checked`.
- fällt durchEin Icon-Button ohne zugänglichen Namen.
- fällt durchEin Akkordeon, dessen Kopf `aria-expanded` nie aktualisiert.
- fällt durchEin eigenes `<select>` ohne `role="combobox"` und ohne `aria-activedescendant`.
So beheben Sie es
- tunNehmen Sie das native Element, wo es eines gibt. `<button>`, `<input type="checkbox">` und `<select>` bringen all das von Haus aus mit.
- tunFür ein wirklich eigenes Widget folgen Sie dem passenden Muster der ARIA Authoring Practices, einschließlich Tastaturverhalten.
- tunHalten Sie die Zustandsattribute mit dem synchron, was auf dem Bildschirm steht.
Wie es gemeldet wird
A11ySignal meldet das mit der Schwere kritisch. Jedes fehlerhafte Element kommt mit seinem CSS-Selektor und dem Markup, das durchgefallen ist — Sie kommen also direkt zur Zeile, statt sie zu suchen. Deque veröffentlicht die Details auf Engine-Ebene:
https://dequeuniversity.com/rules/axe/4.13/aria-allowed-attr ↗
Prüfung umgesetzt in axe-core 4.13.0, © Deque Systems, MPL-2.0.
Weitere Prüfungen für 4.1.2
kritischarea-altAktive <area>-Elemente müssen einen Alternativtext besitzen.
kritischaria-hidden-bodyAria-hidden='true' darf nicht für den <body> des Dokumentes verwendet werden.
kritischaria-required-attrErforderliche ARIA-Attribute müssen bereitgestellt werden.
kritischaria-rolesVerwendete ARIA-Rollen müssen gültigen Werten entsprechen.
kritischaria-valid-attrVerwendete ARIA-Attribute müssen gültigen Namen entsprechen.
kritischaria-valid-attr-valueVerwendete ARIA-Attribute müssen gültigen Werten entsprechen.
kritischbutton-nameSchaltflächen müssen wahrnehmbaren Text enthalten.
kritischduplicate-id-ariaIDs, welche in ARIA und Lables genutzt werden, müssen einzigartig sein.
kritischinput-button-nameEingabeschaltflächen müssen wahrnehmbaren Text beinhalten.
kritischinput-image-alt<input type="image">-Elemente müssen einen Alternativtext besitzen.
kritischlabel<form>-Elemente müssen eine Beschriftung haben.
schwerwiegendaria-braille-equivalentaria-braille Attribute müssen ein non-braille Äquivalent haben.
schwerwiegendaria-command-nameARIA Befehle müssen einen zugänglichen Namen (accessible name) besitzen.
schwerwiegendaria-conditional-attrARIA-Attribute müssen entsprechend der Rolle des Elements verwendet werden.
schwerwiegendaria-hidden-focusARIA-hidden Elemente dürfen keine fokussierbaren Elemente beinhalten.
schwerwiegendaria-input-field-nameARIA-inputs müssen einen zugänglichen Namen (accessible name) besitzen.
schwerwiegendaria-prohibited-attrElemente dürfen nur erlaubte ARIA-Attribute verwenden.
schwerwiegendaria-roledescriptionNutze aria-roledescription für Elemente mit einer semantischen Rolle.
schwerwiegendaria-tab-nameARIA tab nodes must have an accessible name
schwerwiegendaria-toggle-field-nameARIA-toggle-Felder benötigen einen zugänglichen Namen (accessible name).
schwerwiegendaria-tooltip-nameARIA-tooltip-Knoten benötigen einen zugänglichen Namen (accessible name).
schwerwiegendframe-titleFrames müssen ein nichtleeres title-Attribut besitzen.
schwerwiegendframe-title-uniqueFrames müssen ein einzigartiges title-Attribut besitzen.
schwerwiegendlink-nameLinks müssen wahrnehmbaren Text beinhalten.
schwerwiegendnested-interactiveInteraktive Steuerelemente dürfen nicht verschachtelt (nested) werden.
schwerwiegendsummary-namesummary-Elemente müssen einen erkennbaren Text haben
geringaria-deprecated-roleVeraltete ARIA-Rollen dürfen nicht verwendet werden.