Semantisches HTML
Semantisches HTML verwendet Elemente nach ihrer Bedeutung. Eine echte Schaltfläche bringt andere Eigenschaften mit als ein gestalteter Textblock.
Elemente entsprechend ihrer Aufgabe einsetzen
Semantisches HTML beschreibt Inhalte und Bedienelemente mit passenden HTML-Elementen. Überschriften strukturieren den Inhalt, ein Link führt zu einem Ziel und ein Button löst eine Aktion aus. Das gibt Browsern und assistiven Technologien Informationen über die Bedeutung der Oberfläche.
Soll in einem beispielhaften Portal eine Adresse gespeichert werden, ist dafür ein button vorgesehen. Ein optisch gleicher div-Block hat diese Bedeutung und die üblichen Tastaturfunktionen nicht automatisch. Ein a-Element mit passendem href eignet sich dagegen für den Weg zur Adressübersicht.
CSS bestimmt die Darstellung; die optische Größe eines Textes macht ihn noch nicht zur Überschrift. Semantisches HTML ist eine wichtige Grundlage, gewährleistet allein aber keine vollständig barrierefreie Anwendung. Beschriftungen, Zustände und tatsächliches Verhalten müssen ebenfalls passen.
Quellen
Verwandte Begriffe
- ARIAARIA ergänzt Informationen über Rollen, Zustände und Eigenschaften einer Oberfläche für assistive Technologien. Verhalten muss tatsächlich umgesetzt sein.
- ScreenreaderEin Screenreader erschließt digitale Inhalte über Sprache oder Braille. Aussagekräftige Struktur und Beschriftungen machen die Bedienung verständlich.
- TastaturbedienbarkeitTastaturbedienbarkeit ermöglicht Aufgaben ohne Maus. Entscheidend sind erreichbare Aktionen und ein verständlicher Weg durch die Oberfläche.
- FokusreihenfolgeDie Fokusreihenfolge bestimmt den Weg durch fokussierbare Elemente. Sie soll Bedeutung und Bedienbarkeit auch bei dynamischen Änderungen erhalten.
- FokusfalleIn einer Fokusfalle bleibt die Tastaturbedienung in einem Bereich stecken. Eine absichtliche Begrenzung im Dialog braucht einen bedienbaren Ausgang.
- Sprunglink zum HauptinhaltEin Sprunglink führt an wiederholter Navigation vorbei zum Hauptinhalt. Das Ziel muss auch für die anschließende Tastaturbedienung stimmen.
Beiträge zum Thema
Design & UX mit ASES
Nutzererlebnis, Oberflächen und Markenauftritt