Was die Norm sagt
Für alle Benutzerschnittstellen-Komponenten (einschließlich, aber nicht beschränkt auf Formularelemente, Links und von Skripten erzeugte Komponenten) können Name und Rolle programmatisch ermittelt werden; Zustände, Eigenschaften und Werte, die vom Benutzer gesetzt werden können, können programmatisch gesetzt werden; und Benachrichtigungen über Änderungen dieser Elemente stehen Benutzerprogrammen, einschließlich assistiver Technologien, zur Verfügung.
Warum das zählt
Das ist das Kriterium, an dem eigene Komponenten scheitern. Ein als Checkbox gestyltes `div` sagt assistiver Technik nichts darüber, ob es angehakt ist.
Wie ein Fehlschlag aussieht
- 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 A11ySignal es prüft
Bei jedem Scan laufen 29 automatische Prüfungen gegen dieses Kriterium.
kritischarea-altAktive <area>-Elemente müssen einen Alternativtext besitzen.
kritischaria-allowed-attrElemente dürfen nur erlaubte ARIA-Attribute verwenden.
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.