A11y HTML
Der Name steht im HTML, nicht im Bild
Feld, Schaltfläche, ARIA-Attribut: drei Stellen, an denen HTML den Namen liefert.
HTML statt Bild
Der Name steht im HTML
Gleiche Optik, anderer Name.
Vorher
- E-Mail-Adresse · nur Text daneben
- Menü-Symbol · ohne Wort
- aria-labell · Tippfehler
Das Vorleseprogramm sagt„Eingabefeld“
Nachher
- label for · verbunden
- aria-label · Menü öffnen
- aria-label · korrekt geschrieben
Das Vorleseprogramm sagt„E-Mail-Adresse, Eingabefeld“
Aus dem Prüfbericht
Drei Stellen, drei Befunde
Kritisch Das Feld hat keinen Namen Regel label
Ein Text steht über dem Feld, ist aber nicht verbunden. Erst label mit for macht ihn zum Namen des Felds.
Kritisch Die Schaltfläche hat keinen Namen Regel button-name
Ein Symbol allein ergibt keinen Namen. Ein Wort im Button oder aria-label liefert ihn.
Kritisch Das ARIA-Attribut ist verschrieben Regel aria-valid-attr
aria-labell kennt kein Browser. Der Tippfehler kostet den ganzen Namen; aria-label schreibt sich mit einem l.
Zum Mitnehmen
Das Formular, korrigiert
Zwei Änderungen im HTML. Kein JavaScript, kein neues Aussehen.
Korrektur in 2 Schritten ansehen
Beschriftung und Feld verbinden
Das for-Attribut zeigt auf die id des Felds. Erst dann wird der sichtbare Text zum Namen.
KorrekturvergleichSchritt 1 · HTML Vorher
<span>E-Mail-Adresse</span> <input type="email" name="email">Nachher
<label for="email">E-Mail-Adresse</label> <input id="email" type="email" name="email">Markierte Zeilen wurden geändert
So prüfen Sie es Klicken Sie auf „E-Mail-Adresse“. Springt der Cursor ins Feld, stimmt die Verbindung.
Den Tippfehler im Attribut beheben
Ein unbekanntes Attribut wird stillschweigend ignoriert. Der Name fehlt dann komplett.
KorrekturvergleichSchritt 2 · HTML Vorher
<button type="button" aria-labell="Menü öffnen"> <svg aria-hidden="true"><use href="#icon-menu"></use></svg> </button>Nachher
<button type="button" aria-label="Menü öffnen"> <svg aria-hidden="true"><use href="#icon-menu"></use></svg> </button>Markierte Zeilen wurden geändert
So prüfen Sie es Tab auf die Schaltfläche. Ein Vorleseprogramm sagt jetzt „Menü öffnen, Schaltfläche“.