Barrierefreie Page gestalten

Eine barrierefreie Page können alle nutzen: Menschen, die einen Screenreader verwenden, die schlecht sehen, die Bewegungen auf dem Bildschirm meiden oder die einfach in der Sonne aufs Handy schauen. Vieles erledigt LinkHarbor automatisch, einiges liegt in deiner Hand. Dieser Artikel zeigt, worauf du achten solltest.

#Was LinkHarbor automatisch macht

• Hat ein Besucher in seinem System „Bewegung reduzieren“ eingeschaltet, laufen Hintergrundvideos nicht, und Scroll- und Parallax-Effekte sowie Hover-Animationen sind abgeschaltet
• Der Block „Überschrift“ wird als echte Überschrift ausgegeben, an der sich Screenreader orientieren
• Bilder aus den Blöcken „Bild“ und „Galerie“ bekommen deinen Alt-Text als Beschreibung
• Hast du keine eigene Textfarbe für Buttons gewählt, wählt LinkHarbor sie passend zur Button-Farbe

#Alt-Texte für Bilder

Ein Alt-Text beschreibt, was auf einem Bild zu sehen ist. Screenreader lesen ihn vor, und er erscheint, wenn ein Bild nicht lädt.

Block „Bild“

Feld „Alt-Text“ im Block-Editor.

Block „Galerie“

Pro Bild ein „Alt-Text“ mit bis zu 200 Zeichen.

• Beschreibe den Inhalt, nicht die Datei: „Cappuccino mit Latte Art auf einem Holztisch“ statt „IMG_2041“
• Bei Bildern mit Text gehört der Text in den Alt-Text
• Halte dich kurz – ein Satz reicht meistens

Wo du die Felder findest, steht in Die kostenlosen Blöcke im Detail und Inhalts-Blöcke.

#Struktur mit Überschriften

Gliedere längere Pages mit dem Block „Überschrift“ statt mit großem Text. Screenreader-Nutzer springen von Überschrift zu Überschrift und finden so schnell, was sie suchen – etwa „Öffnungszeiten“ oder „Kontakt“.

#Klare Linktitel

• Jeder Link sollte für sich verständlich sein: „Speisekarte als PDF“ statt „Hier klicken“
• Vermeide gleich lautende Titel für verschiedene Ziele
• Emojis am Anfang eines Titels werden vorgelesen; setze sie sparsam ein

Mehr zu Links in Links anlegen und gestalten.

#Kontrast und Lesbarkeit

• Achte auf genug Kontrast zwischen Text und Hintergrund, besonders bei hellen Pastellfarben
• Liegt Text über einem Hintergrundbild oder -video, nutze im Theme die „Overlay-Deckkraft“, damit er lesbar bleibt
• Kein wichtiger Text nur im Bild – Besucher mit Screenreader können ihn nicht lesen
• Wähle eine gut lesbare Schrift und keine zu kleine Schriftgröße für Textblöcke

Farben, Hintergrund und Schrift stellst du im Theme ein, siehe Design.

#Custom CSS mit Bedacht

Mit Custom CSS kannst du fast alles verändern – auch Dinge, die für Barrierefreiheit wichtig sind. Blende keine Fokus-Rahmen aus, verkleinere Text nicht zu stark und teste die Page nach Änderungen auch mit der Tastatur. Siehe Custom CSS.

#Selbst testen

1. Schalte auf deinem Handy den Screenreader ein (VoiceOver auf dem iPhone, TalkBack auf Android) und höre dir deine Page an
2. Vergrößere die Schrift in den Systemeinstellungen und prüfe, ob alles lesbar bleibt
3. Schau dir die Page bei hellem Licht und im dunklen Modus an