In unserem letzten Blogbeitrag haben wir ja schon erläutert, warum manuelles Testing beim Thema Barrierefreiheit zwingend notwendig ist. In diesem Artikel gehen wir genauer auf die einzelnen Elemente ein, die dringend beachtet werden sollen.
Besonders Designentscheidungen beeinflussen, ob eine Webseite für alle Menschen zugänglich ist oder nicht. Viele Unternehmen vernachlässigen jedoch diese wichtigen Aspekte, wie z. B. Farbkontraste und Navigationsstrukturen. Das führt dazu, dass Menschen mit beispielsweise Farbsinnstörungen die Inhalte schwer oder gar nicht nutzen können. In diesem Beitrag schauen wir uns einige Details an, die man in puncto Design einer Webseite beachten sollte und geben praxisnahe Tipps zur Umsetzung.
Farbschemata in der Barrierefreiheit
Viele Unternehmen legen großen Wert auf ihre Corporate Identity und die damit verbundenen Farben. Allerdings sind nicht alle Markenfarben gut lesbar bzw. für Menschen mit Sehbeeinträchtigungen geeignet. Besonders problematisch sind Farbkombinationen mit zu geringem Kontrast, die für Menschen mit Farbsehstörungen kaum unterscheidbar sind.
Die Web Content Accessibility Guidelines (WCAG) definieren hierfür klare Kontrastwerte für Texte und grafische Elemente:
- WCAG AA: Mindestkontrast von 4,5:1 für normalen Text und 3:1 für großen Text. Dies bedeutet, dass der Helligkeitsunterschied zwischen Textfarbe und Hintergrundfarbe groß genug sein muss, damit der Text für Menschen mit Sehbeeinträchtigungen lesbar ist.
- WCAG AAA: Erhöhte Anforderungen mit einem Mindestkontrast von 7:1 für normalen Text. Diese Stufe wird für Inhalte empfohlen, die besonders gut zugänglich sein sollen, beispielsweise für ältere Menschen oder Nutzende mit starken Sehbehinderungen.
Je nach der jeweiligen Zielgruppe und dem Anwendungsbereich sollte das Ziel sein, mindestens AA-Standards zu erfüllen. Um die Kontraste zu überprüfen, gibt es praktische Tools:
- Desktop-Programm: TPGi Color Contrast Checker
- Online-Tool: WebAIM Contrast Checker
„Skippable Content“ und sinnvolle Strukturen
Neben den Kontrasten ist es auch wichtig sogenannte Skip Navigation Links zu integrieren. Dies sind spezielle Links am Seitenanfang, die es Nutzenden ermöglichen, direkt zum Hauptinhalt zu springen. Besonders für Screenreader-Nutzende ist das eine große Erleichterung, da sie sich so nicht durch lange Navigationsmenüs bewegen müssen.
Auch gut strukturierte Überschriften (H1-H6) sowie Landmarken wie <nav>, <main>, <section> oder <aside> sind extrem hilfreich. Sie bieten eine semantische Struktur, die es assistiven Technologien erleichtert, wichtige Bereiche der Webseite zu erkennen und anzusteuern.
Interaktive Elemente für Web Accessibility
Nutzende, die auf die Tastatur angewiesen sind, navigieren mit der Tab-Taste durch eine Seite. Eine logische Tab-Reihenfolge ist somit entscheidend, damit interaktive Elemente in der richtigen Reihenfolge angesteuert werden.
„Keyboard Traps“ sollten unbedingt vermieden werden. Tastaturnutzende sollten sich niemals in einem Element “gefangen” fühlen, aus dem sie nicht mehr herausnavigieren können. Besonders Pop-ups oder modale Fenster können solche “Traps” verursachen, wenn sie nicht korrekt programmiert sind.
Wichtig ist außerdem, dass Buttons klar beschriftet sein. So sollte beispielsweise statt „Hier klicken“ „Formular absenden“ oder ähnliches bevorzugt werden. Zudem benötigen Formulare klare Labels, die dessen Funktion eindeutig beschreiben, wie “E-Mail-Adresse” oder “Telefonnummer”. Platzhaltertexte allein reichen nicht aus, da sie verschwinden, sobald der Nutzende mit der Eingabe beginnt. Zudem sollten Labels immer mit den zugehörigen Eingabefeldern verknüpft sein, beispielsweise durch das HTML-Element <label for=”id-des-feldes”>. Error-Meldungen sollten textlich und visuell verständlich sein.
Wie gestaltet man barrierefreie Inhalte?
Einfache Sprache und verständliche Texte
Texte sollten in einer klaren und einfachen Sprache verfasst sein, sodass sie für möglichst viele Menschen verständlich sind. Komplexe Satzstrukturen und verschachtelte Formulierungen können es erschweren, Informationen schnell zu erfassen. Ebenfalls sollten Fachbegriffe vermieden oder, falls sie notwendig sind, mit einer kurzen Erklärung versehen werden.
Alt-Texte für Bilder
Bilder sollten immer eine aussagekräftige Alt-Beschreibung haben, die den Inhalt des Bildes kurz und genau beschreibt. Das ist vor allem wichtig für Screenreader-Nutzende, die sich auf alternative Texte verlassen, um den Kontext eines Bildes zu erfassen. Beispielsweise sollte ein Bild von einer Katze nicht einfach mit “Katze” beschrieben werden, sondern mit “Schwarze Katze sitzt auf einer Fensterbank und blickt nach draußen”.
Dynamische Inhalte und ihre Herausforderungen
Interaktive Elemente wie Hover-Effekte, Pop-ups oder Animationen können problematisch sein, wenn sie nicht korrekt barrierefrei umgesetzt werden. Nutzende mit motorischen Einschränkungen oder Screenreadern können Schwierigkeiten haben, solche Inhalte zu verstehen oder zu steuern. ARIA-Attribute (Accessible Rich Internet Applications) helfen, dynamische Inhalte für assistive Technologien verständlicher zu machen. Beispielsweise kann das Attribut aria-live genutzt werden, um Screenreadern mitzuteilen, dass sich ein bestimmter Bereich dynamisch aktualisiert. Aber Achtung, die Nutzung von ARIA-Labels ist noch kein Muss, und muss gekonnt sein, damit die Labels wirklich hilfreich sind. Ebenso sollten interaktive Elemente mit einer klaren Tastatursteuerung versehen werden, sodass sie auch ohne Maus bedienbar sind.
Unterstützung beim Thema Barrierefreiheit suchen
Solltest du nicht genau wissen, welche Anpassungen an deiner Website bis Juni noch erforderlich sind, empfehlen wir, einen Accessibility Audit durchführen zu lassen. Mit unserer umfassenden Erfahrung und gezielten Analysen können wir dabei helfen, digitale Angebote barrierefrei zu gestalten und maßgeschneiderte Empfehlungen zur Verbesserung der Zugänglichkeit bereitzustellen. Unser Audit gibt dir einen klaren Überblick über bestehende Barrieren und zeigt konkrete Maßnahmen auf, um deine Webseite für alle Nutzenden zugänglich zu machen.
Fazit: Warum eine barrierefreie Seite ganzheitlich gedacht werden muss
Barrierefreiheit im Web ist lange kein Nice-to-have mehr, sondern enorm wichtig für eine inklusive digitale Umgebung. Durch ein gut durchdachtes Design, strukturierten Code und die Berücksichtigung verschiedener Nutzerbedürfnisse können Webseiten die gesetzlichen Anforderungen erfüllen und auch die Nutzererfahrung für jeden verbessern. Eine gute Barrierefreiheit sorgt letztlich für eine breitere Erreichbarkeit und eine bessere Usability für alle.
