Die häufigsten BFSG-Fehler im Webdesign und wie du sie vermeidest

In diesem Beitrag zeige ich die 10 häufigsten Fehler im Webdesign, die gegen das BFSG verstoßen, und gebe praxisnahe Tipps, wie du sie vermeiden kannst.

Die 10 häufigsten BFSG-Fehler im Webdesign und ihre Lösung

Fehler 1: Fehlende Alternativtexte für Bilder

Problem: Bilder ohne Alternativtexte sind für blinde und sehbehinderte Menschen nicht zugänglich, da Screenreader keine Informationen über den Bildinhalt liefern können.

Lösung: Füge zu jedem relevanten Bild eine aussagekräftige Beschreibung im "alt"-Attribut hinzu. Der Alternativtext sollte den Inhalt und Zweck des Bildes verständlich wiedergeben. Bei dekorativen Bildern kann das Alt-Attribut leer bleiben.

Tools:

• WAVE Web Accessibility Evaluation Tool

• Axe Accessibility Checker

Fehler 2: Unzureichender Farbkontrast

Problem: Texte mit zu geringem Kontrast zum Hintergrund sind schwer lesbar, besonders für Menschen mit Sehschwächen oder Farbenblindheit.

Lösung: Verwende einen ausreichend hohen Kontrast zwischen Text- und Hintergrundfarben. Laut WCAG sollte das Kontrastverhältnis mindestens 4,5:1 betragen. Vermeide Pastelltöne oder zu helle Schriftfarben auf hellem Hintergrund.

Tools:

• WebAIM Contrast Checker

• Stark Plugin für Figma/Sketch

Fehler 3: Farbe als einziges Unterscheidungsmerkmal

Problem: Viele Websites nutzen ausschließlich Farben, um Informationen zu vermitteln, wie zum Beispiel grüne Buttons für „Okay“ und rote für „Abbrechen“. Dies kann für Menschen mit Farbenblindheit problematisch sein, da sie die Farbunterschiede oft nicht erkennen können. Besonders die Verwendung von Rot und Grün zur Darstellung von aktivem und inaktivem Zustand kann für betroffene Nutzer sehr ähnlich erscheinen.

Lösung: Ein effektiver Ansatz, um ein barrierefreies Design zu schaffen, ist die Integration von zusätzlichem Text und Symbolen, die den Status eines Elements klar anzeigen. So können Benutzer auch ohne Farberkennung erkennen, ob etwas aktiv oder inaktiv ist. Beispielsweise könnte ein grüner „Okay“-Button mit dem Text „Bestätigen“ und einem Häkchen-Symbol versehen werden, während der rote „Abbrechen“-Button mit dem Text „Abbrechen“ und einem Kreuz-Symbol versehen wird. Dadurch wird der Unterschied für alle Nutzer deutlich, unabhängig von ihrer Fähigkeit, Farben zu erkennen.

Tools:

• Coloraracle

• Toptal Color Blindness Simulator

Fehler 4: Fehlende Untertitel und Audiodeskriptionen in Medien

Problem: Videos ohne Untertitel oder Audiodeskriptionen sind für gehörlose und blinde Menschen nicht zugänglich.

Lösung: Erstelle Untertitel für alle Videos und biete Audiodeskriptionen für wichtige visuelle Inhalte an. Plattformen wie YouTube bieten automatische Untertitel, die manuell verbessert werden können.

Tools:

• YouTube Studio (Untertitelgenerator)

• Otter.ai

Fehler 5: Mangelnde Barrierefreiheit in der Navigation

Problem: Eine schlecht strukturierte Navigation erschwert es Menschen mit Seh- oder Motorik Einschränkungen, sich auf der Seite zurechtzufinden. Auch Screenreader-Nutzer können von einer unlogischen Fokusreihenfolge stark beeinträchtigt werden.

Lösung:

• Stelle sicher, dass die Hauptnavigation klar strukturiert ist und nicht zu viele Menüpunkte enthält.

• Alle interaktiven Elemente sollten per Tab-Taste erreichbar sein.

• Die Fokusreihenfolge muss logisch und nachvollziehbar sein.

• Hebe die aktive Fokusposition durch deutliche visuelle Stile hervor.

Tool:

• WebAIM Focus Indicator Checker 

Fehler 6: Keine skalierbare Schrift

Problem: Feste Schriftgrößen (z. B. in Pixeln) verhindern, dass Nutzer die Schrift problemlos vergrößern können, was für Menschen mit Sehschwächen problematisch ist.

Lösung: Verwende relative Einheiten wie rem oder em, sodass sich die Schriftgröße dynamisch anpassen kann.

Tools:

• Browser-Zoom-Funktion testen

• WCAG Guidelines zur Textskalierung

Fehler 7: Unklare Formulare und Fehlermeldungen

Problem: Formulare ohne klare Labels oder schlecht platzierte Fehlermeldungen sind für Menschen mit Seh- oder kognitiven Einschränkungen schwer nutzbar.

Lösung: Verwende gut sichtbare und eindeutige Labels für alle Formularelemente. Fehlermeldungen sollten deutlich sichtbar sein und genau erklären, was verbessert werden muss.

Tools:

• WAVE Web Accessibility Evaluation Tool

• Axe DevTools

Fehler 8: Unzureichend große Klickbereiche

Problem: Kleine Buttons und Links sind schwer zu treffen, insbesondere für Nutzer mit motorischen Einschränkungen oder Touchscreens.

Lösung: Stelle sicher, dass interaktive Elemente mindestens 44x44 Pixel groß sind, um eine einfache Bedienung zu ermöglichen.

Tool:

• Browser Developer Tools

Fehler 9: Bewegliche Inhalte ohne Pausen-Option

Problem: Animationen, Slider oder automatisch scrollende Inhalte können für einige Nutzer irritierend oder sogar unbenutzbar sein.

Lösung: Füge eine Möglichkeit hinzu, Animationen anzuhalten oder zu deaktivieren.

Fehler 10: Fehlende ARIA-Attribute für interaktive Elemente

Problem: Interaktive Elemente wie Dropdown-Menüs oder modale Fenster sind für Screenreader oft nicht verständlich, wenn sie nicht mit ARIA-Attributen versehen sind.

Lösung: Verwende sinnvolle ARIA-Attribute, um interaktive Elemente für Screenreader nutzbar zu machen. Beispielsweise helfen aria-expanded, aria-label oder role, um die Bedeutung und den Zustand von Elementen klarzumachen.

Tool:

• Lighthouse

Fazit

Barrierefreiheit im Webdesign ist keine komplizierte Zusatzaufgabe, sondern ein zentraler Bestandteil guter Usability. Wer diese 10 Fehler vermeidet, sorgt nicht nur für eine gesetzeskonforme Website, sondern verbessert auch die Benutzerfreundlichkeit für alle.

Nutze die genannten Tools und Best Practices, um deine Website auf Barrierefreiheit zu überprüfen und schrittweise zu verbessern. Starte noch heute damit, deine Inhalte zugänglich zu gestalten – deine Nutzer werden es dir danken! Falls du Unterstützung bei der Umsetzung benötigst, steht webnetz dir als erfahrene Online Marketing-Agentur jederzeit zur Seite. Kontaktiere uns für eine unverbindliche Beratung!

Viele Grüße

Julia