A11Y – 1
Web A11Y Cookbook
Manuel Matuzović
Dokumente strukturieren
Die natürliche Sprache definieren
Dies ist ein deutschsprachiger Text mit einem technical term in English.
This is a quote in English.
Beschränkung der Zeilenbreite mittels ch
Für beste Lesbarkeit gilt bei der grafischen Gestaltung von Textblöcken, dass die Zeilenlänge maximal 45–75 Zeichen betragen sollte, um ungewollte Zeilensprünge zu verhindern und Ermüdung beim Lesen längerer Texte vorzubeugen. Die optische Distanz, die das Auge beim Zeilensprung zurücklegen muss, wird dabei als Sakkadenweg bezeichnet. Auf breiten Bildschirmen sollte aus diesem Grund die Breite des Textblocks manuell beschränkt werden.
Seiten strukturieren
Formular-Landmarks erstellen
Den Hauptinhalt strukturieren
Beispielartikel als „section“ definiert
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
Inhalte verlinken
Verschiedene Zustände von Links
Die möglichen Zustände von Links sind: unvisited, visited, hovered, active und focus (focus-visible).
Dies ist ein normaler Text. Beispiel für einen externen Link.
Download-Link mit Icon
Test-Link-Download (PDF 12 KB)
Zugängliche Verlinkung eines SVG
Verlinkung einer Gruppe von Elementen
Dieser Text steht anstelle der Headline des Teasers.
Vorname Nachname Link
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Dieser Text steht anstelle der Headline des Teasers.
Vorname Nachname Link
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Dieser Text steht anstelle der Headline des Teasers.
Vorname Nachname Link
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
/formu