ARIA Accessibility
Was von Ihrem ARIA wirklich ankommt
Name, Rolle, Zustand: fünf ARIA-Fehler, die den Bildschirm nicht verändern.
ARIA
Was von Ihrem ARIA ankommt
Fünf Fehler, kein Pixel anders.
- 5
- ARIA-Fehler auf der Seite
- 0
- sichtbare Änderungen
- 12 von 12
- Angaben nach der Korrektur
Name, Rolle, Zustand: alles kommt aus Attributen, die stimmen müssen.
Aus dem Prüfbericht
Fünf Stellen, fünf Befunde
Kritisch Der Button hat keinen Namen Regel button-name
Sein einziges Kind ist aria-hidden. Damit bleibt vom Namen nichts. aria-label liefert das Wort.
Kritisch aria-checked an einem Bild Regel aria-allowed-attr
Ein role="img" kennt keinen Auswahlzustand. Das Attribut wird ignoriert oder falsch vorgelesen.
Kritisch aria-labl ist kein Attribut Regel aria-valid-attr
Ein verschriebener Name wird stillschweigend übergangen. Der ganze Name geht verloren.
Kritisch aria-expanded="maybe" ist kein Wert Regel aria-valid-attr-value
Nur true und false sind gültig. Alles andere ist kein Zustand.
Zum Mitnehmen
Fünf Attribute, korrigiert
Jede Korrektur ist ein Attribut. Der Bildschirm bleibt gleich.
Korrektur in 2 Schritten ansehen
Name und Attributname korrigieren
aria-label heißt aria-label. Das Wort im Attribut wird zum Namen der Schaltfläche.
KorrekturvergleichSchritt 1 · HTML Vorher
<button type="button" id="tausch"> <span aria-hidden="true">⇄</span> </button> <button type="button" aria-labl="Wetterkarte öffnen"> <span aria-hidden="true">▦</span> </button>Nachher
<button type="button" id="tausch" aria-label="Start und Ziel tauschen"> <span aria-hidden="true">⇄</span> </button> <button type="button" aria-label="Wetterkarte öffnen"> <span aria-hidden="true">▦</span> </button>Markierte Zeilen wurden geändert
So prüfen Sie es Tab auf beide Schaltflächen. Ein Vorleseprogramm nennt bei jeder ihren Namen.
Zustände nur dort, wo sie erlaubt sind
Ein Bild hat keinen Auswahlzustand. aria-expanded trägt true oder false, verborgene Bereiche sind hidden.
KorrekturvergleichSchritt 2 · HTML Vorher
<div role="img" aria-label="Karte 1948" aria-checked="true"></div> <button type="button" aria-expanded="maybe">Schichtnotiz öffnen</button> <div aria-hidden="true"><a href="/ringkarte">Ringkarte</a></div>Nachher
<div role="img" aria-label="Karte 1948, ausgewählt"></div> <button type="button" aria-expanded="false">Schichtnotiz öffnen</button> <div hidden><a href="/ringkarte">Ringkarte</a></div>Markierte Zeilen wurden geändert
So prüfen Sie es Drücken Sie Tab über die Schichtnotiz hinaus. Der Fokus überspringt den verborgenen Link.