Die häufigsten Probleme bei der Barrierefreiheit von Websites und wie man sie erkennt
Eine Website kann für das interne Team perfekt funktionieren und dennoch für einige Nutzer erhebliche Schwierigkeiten bereiten.
Das Problem ist, dass viele Barrieren nicht offensichtlich sind, wenn man mit der Maus navigiert, den Bildschirm klar sieht und die Website genau so nutzt, wie sie intern getestet wurde.
Ändern Sie die Situation ein wenig.
Versuchen Sie, einen Kauf ohne Maus abzuschließen. Verwenden Sie nur die Tab-Taste. Zoomen Sie die Seite auf 200 %. Betrachten Sie ein Formular und stellen Sie sich vor, dass die Feldbezeichnungen von einem Screenreader vorgelesen werden.
Die Website beginnt, anders auszusehen.
Hier sind einige der Probleme, die Sie zuerst prüfen sollten.
Bilder ohne Alternativtext
Ein Produktbild, Diagramm, Icon oder Banner kann Informationen vermitteln, auf die ein Nutzer nicht zugreifen kann, wenn das Bild keine geeignete Textalternative besitzt.
WCAG 2.2 schreibt Textalternativen für nicht-textuelle Inhalte vor, wenn diese Informationen vermitteln oder eine Funktion haben. Rein dekorative Bilder werden anders behandelt und können von assistiven Technologien ignoriert werden.
Hier passiert ein sehr häufiger Fehler. Ein Team prüft, ob das alt -Attribut vorhanden ist und betrachtet das Problem damit als gelöst.
Die Qualität des Textes ist jedoch genauso wichtig.
Wenn das Bild ein Produkt zeigt, sollte die Beschreibung die für dieses Produkt relevanten Informationen enthalten. Wenn es sich um ein Diagramm handelt, hilft die bloße Bezeichnung „Diagramm“ dem Nutzer nicht dabei, die dargestellten Daten zu verstehen.
So führen Sie die Prüfung durch
Beginnen Sie mit Seiten, die viele Bilder enthalten. Die Startseite, Produktseiten, Blogartikel und Landingpages sind gute Ausgangspunkte.
Der Wawsome Accessibility Checker kann automatisch erkennbare Probleme wie fehlende oder unzureichende Alt-Texte bei Bildern identifizieren.
Bei Bildern, die bereits über einen alt -Text verfügen, ist dennoch eine manuelle Überprüfung erforderlich.
Unzureichender Kontrast
Hellgrauer Text auf weißem Hintergrund mag im Design dezent wirken. Für Menschen mit Sehschwäche kann er jedoch schwer lesbar sein.
Dieses Problem tritt häufig bei sekundären Texten, Platzhaltern, Schaltflächen, Menüs sowie bei deaktivierten oder inaktiven Elementen auf.
Die WCAG enthalten Kriterien für Textkontraste sowie für bestimmte grafische Elemente und Benutzeroberflächenkomponenten.
Der Kontrast muss am fertigen Produkt überprüft werden. Eine Designdatei mag zwar die korrekten Farben verwenden, doch in der finalen Umsetzung können abweichende Werte entstehen.
So führen Sie die Prüfung durch
Prüfen Sie die Farben für:
- Primär- und Sekundärtexte
- Links und Schaltflächen
- Fehlermeldungen und Benachrichtigungen
- Steuerelemente und interaktive Komponenten
- Hover- und Fokus-Zustände
- Diagramme oder Informationen, die durch Farben vermittelt werden
Beschränken Sie das Testen nicht nur auf die Startseite. Gerade bei Bezahlvorgängen und Formularen wirkt sich ein schlechter Kontrast oft besonders negativ für den Nutzer aus.
Formulare ohne klare Beschriftungen und Anweisungen
Formulare begegnen uns fast überall.
Ob Kontoerstellung, Angebotsanfragen, Rechnungszahlungen, Terminvereinbarungen oder Checkout-Prozesse – überall müssen Nutzer Daten in Felder eingeben.
Die WCAG schreiben vor, dass bei erforderlichen Eingaben Beschriftungen oder Anweisungen vorhanden sein müssen. Ziel ist es, sicherzustellen, dass Nutzer genau wissen, welche Informationen von ihnen erwartet werden.
Ein Platzhalter sollte nicht automatisch als Ersatz für eine korrekt implementierte Beschriftung betrachtet werden.
Und dann sind da noch die Fehlermeldungen.
„Ungültige Eingabe“ ist wenig hilfreich.
Nutzer müssen verstehen, was schiefgelaufen ist und was sie korrigieren müssen. Bei langen Formularen ist es umso wichtiger, das problematische Feld eindeutig zu kennzeichnen.
So führen Sie die Prüfung durch
Wählen Sie einen vollständigen Nutzerprozess aus und gehen Sie ihn von Anfang bis Ende durch.
Das könnte sein:
- Kontaktformular
- Kontoerstellung
- Kaufabwicklung
- Online-Terminbuchung
- Angebotsanfrage
- Anmeldung
- Passwort zurücksetzen
- Rechnungszahlung
Überprüfen Sie, ob jedes Feld eine klare Beschriftung hat und ob Fehlermeldungen verständlich sind, ohne dass man sich ausschließlich auf Farben verlassen muss.
Bei wichtigen Formularen können Tests mit Tastatur und Screenreader Informationen liefern, die ein Scanner nicht vollständig erfassen kann.
Navigation, die nicht mit der Tastatur funktioniert
Probieren Sie einen einfachen Test aus.
Legen Sie die Maus beiseite und drücken Sie die Tab-Taste.
Können Sie das Menü erreichen? Können Sie Untermenüs öffnen? Können Sie ein Produkt auswählen? Können Sie das Formular ausfüllen? Können Sie es absenden?
Die WCAG enthalten Anforderungen an die Tastaturzugänglichkeit und vermeiden Situationen, in denen der Fokus innerhalb einer Komponente gefangen bleibt.
Das Problem tritt häufig bei benutzerdefinierten Komponenten auf.
Dropdowns, Modals, Karussells, Datumsauswahlen und JavaScript-basierte Menüs funktionieren mit der Maus möglicherweise einwandfrei, verhalten sich aber bei der Bedienung über die Tastatur fehlerhaft.
So führen Sie den Test durch
Verwenden Sie die Tab-Taste, um vorwärts zu navigieren, und Umschalt + Tab, um rückwärts zu navigieren.
Folgen Sie der visuellen Fokus-Anzeige. Sie sollten jederzeit erkennen können, an welcher Stelle der Seite Sie sich befinden.
Testen Sie interaktive Komponenten mit der Eingabetaste, der Leertaste und den Pfeiltasten, sofern das Verhalten der Komponente dies erfordert.
Führen Sie den Test für die für das Unternehmen wichtigsten Abläufe durch. Anmeldungen, Bezahlvorgänge, Terminbuchungen und wichtige Formulare sollten zuerst geprüft werden.
Schaltflächen und Links ohne barrierefreie Namen
Ein Lupensymbol ist visuell leicht als „Suche“ zu erkennen.
Für assistierende Technologien benötigt das Symbol die notwendigen programmatischen Informationen, damit seine Funktion an den Nutzer kommuniziert werden kann.
Die WCAG befassen sich mit Name, Rolle und Wert von Benutzeroberflächenkomponenten. Ein Steuerelement ohne zugänglichen Namen kann bei der Verwendung assistierender Technologien sehr schwer zu bedienen sein.
Dieses Problem tritt häufig auf bei:
- Schaltflächen, die nur aus Symbolen bestehen
- Mobilen Menüs
- Schließen-Schaltflächen
- Videosteuerelementen
- Karussell-Elementen
- Social-Media-Buttons
- Benutzerdefinierten Komponenten
- Links mit vagen Texten wie „hier klicken“
Ein zugänglicher Name sollte den Zweck des Elements vermitteln.
So führen Sie die Prüfung durch
Sie können beginnen mit der Wawsome Accessibility Checker für automatisch erkennbare Probleme.
Verwenden Sie für wichtige Komponenten zusätzlich den Accessibility-Inspector Ihres Browsers oder testen Sie die Seite mit einem Screenreader.
Wenn der Nutzer nur „Schaltfläche“ hört, ohne zu erfahren, welche Funktion diese hat, sollte die Implementierung überprüft werden.
Falsche Überschriftenstruktur
Überschriften werden manchmal rein aus optischen Gründen verwendet.
Ein Textabschnitt erhält ein H2-Tag, weil die Größe passt. Ein anderer wird zu einem H4, weil es besser ins Layout passt. Mit der Zeit geht die semantische Struktur verloren.
Für Screenreader-Nutzer sind Überschriften eine effektive Möglichkeit, durch eine Seite zu navigieren.
Eine lange Seite mit Artikeln, rechtlichen Hinweisen, Dienstleistungen oder Produkten lässt sich deutlich einfacher erfassen, wenn die Überschriftenstruktur logisch aufgebaut ist.
So prüfen Sie es
Betrachten Sie die Gliederung der Seite.
Die Hauptüberschrift sollte das Thema klar benennen. Wichtige Abschnitte sollten in einer logischen Hierarchie gegliedert sein.
Wählen Sie eine Überschriftenebene nicht nach der gewünschten optischen Größe aus. Das visuelle Erscheinungsbild lässt sich über CSS steuern. Die Semantik sollte die Struktur des Inhalts beschreiben.
Dokumente und herunterladbare Dateien
Eine Website kann zwar gut strukturierte Seiten haben, aber dennoch ein nicht barrierefreies PDF bereitstellen, genau dann, wenn ein Nutzer die benötigten Informationen erreicht.
Dies kommt häufig im öffentlichen Sektor, im Bank- und Versicherungswesen, im Bildungswesen sowie im Gesundheitswesen vor.
Dokumente können Folgendes enthalten:
- Gescannte Bilder ohne verfügbaren Text
- Fehlerhafte Struktur
- Schwer auszufüllende PDF-Formulare
- Diagramme ohne Alternativtexte
- Falsche Lesereihenfolge
- Schlecht beschriebene Links
- Tabellen, die schwer zu interpretieren sind
Wenn ein Dokument Teil des für den Nutzer erbrachten Dienstes ist, sollte dessen Barrierefreiheit geprüft werden.
Videoinhalte ohne Untertitel
Videos werden zunehmend für Produktpräsentationen, Tutorials, Lerninhalte und die Kommunikation in sozialen Medien eingesetzt.
Wenn Informationen gesprochen vermittelt werden, benötigen Nutzer, die den Inhalt nicht hören können, eine entsprechende Alternative.
Untertitel sollten die gesprochenen Informationen präzise wiedergeben. Automatische Transkriptionen können bei der Erstellung helfen, das Ergebnis sollte jedoch vor der Veröffentlichung überprüft werden.
Wenn ein Video wichtige Informationen ausschließlich über visuelle Inhalte vermittelt, kann auch eine entsprechende Beschreibung der visuellen Informationen erforderlich sein.
Warum findet ein Scanner nicht alles?
Automatisierte Scans sind äußerst nützlich. Bei großen Websites können sie viel Zeit sparen und wiederkehrende Probleme aufdecken.
Der Wawsome Accessibility Checker kann viele automatisch erkennbare WCAG-Probleme identifizieren, darunter fehlende Alt-Texte, Kontrastfehler, fehlende Formularbeschriftungen, fehlerhafte Überschriftenstrukturen sowie bestimmte Probleme bei der Tastaturbedienung oder interaktiven Elementen.
Ein Tool kann erkennen, dass ein alt -Attribut vorhanden.
Es lässt sich nicht mit Sicherheit feststellen, ob dieser Text das Bild im Kontext der Seite tatsächlich beschreibt.
Es kann bestimmte strukturelle Probleme erkennen.
Es kann die Erfahrung eines Nutzers, der einen komplexen Prozess mit einem Screenreader durchläuft, nicht vollständig abbilden.
Deshalb kombiniert eine sinnvolle Barrierefreiheitsprüfung verschiedene Bewertungsarten.
Beginnen Sie mit den wichtigsten Abläufen
Wenn Ihre Website 5.000 Seiten umfasst, kann die manuelle Überprüfung jedes Elements schnell unüberschaubar werden.
Konzentrieren Sie sich zunächst auf die wesentlichen Nutzerpfade.
Prüfen Sie bei E-Commerce-Seiten die Produktseite, den Warenkorb und den Checkout.
Prüfen Sie bei Bankanwendungen den Login, Transaktionen und die wichtigsten von Kunden genutzten Dienste.
Im Gesundheitswesen sollten Sie sich auf die Terminbuchung, Formulare, das Patientenportal und den Informationszugang konzentrieren.
Im öffentlichen Sektor sollten Sie die Dokumenteneinreichung, Formulare, Zahlungen und den Zugang zu wichtigen Bürgerinformationen prüfen.
Weiten Sie die Prüfung anschließend auf den Rest der Website aus.
Die Auswirkungen auf die Nutzer sollten bestimmen, in welcher Reihenfolge Probleme behoben werden.
Wie kann Monitoring dabei helfen?
Nehmen wir an, Sie haben eine Prüfung abgeschlossen und das Team hat die wichtigsten Probleme behoben.
Zwei Wochen später wird eine neue Landingpage veröffentlicht. Das Marketing lädt neue Bilder hoch. Die Entwicklung ändert das Hauptformular. Weitere 50 Produkte werden hinzugefügt.
Die Website hat sich verändert.
Der Wawsome Accessibility Monitor kann Ihre Website kontinuierlich überwachen und Seiten bei erkannten Aktualisierungen erneut scannen, um so erkennbare Probleme zu identifizieren, die durch neue Inhalte oder Komponenten entstanden sind.
Bei einer regelmäßig aktualisierten Website sollten Barrierefreiheitsprüfungen fester Bestandteil des laufenden Website-Managements werden.
Was fangen Sie mit den gefundenen Problemen an?
Ein langer Bericht kann den Eindruck erwecken, dass jedes Problem in der gleichen Reihenfolge behoben werden muss.
In der Praxis hilft eine Priorisierung.
Manchmal vergessen wir, eine einfache Frage zu stellen: Was hindert den Nutzer daran, seine Aufgabe zu erledigen?
Ein Problem im Checkout-Prozess erfordert sofortiges Handeln, wenn es einen Kunden daran hindert, eine Bestellung abzuschließen.
Eine nicht zugängliche Schaltfläche in einem Terminbuchungsprozess kann einen Patienten daran hindern, einen Termin auszuwählen.
Ein Authentifizierungsproblem kann dazu führen, dass ein gesamtes Konto für einen bestimmten Nutzer unbrauchbar wird.
Nach der Auswirkung können Sie prüfen, wie häufig das Problem auftritt und wie viele Seiten davon betroffen sind.
An dieser Stelle wird der Bericht für das Entwicklungsteam wirklich nützlich. Probleme werden zu konkreten Aufgaben, die direkt in die Sprints zur Fehlerbehebung einfließen können.
Wie Wawsome Sie unterstützen kann
Falls Sie Ihre Website noch nicht überprüft haben, ist ein erster Scan ein praktischer Einstieg.
Der Wawsome Accessibility Checker kann automatisch erkennbare Probleme identifizieren und Ihnen einen ersten Überblick über die Bereiche verschaffen, die Aufmerksamkeit erfordern.
Nach dem Scan können die Ergebnisse durch manuelle Prüfungen für Kriterien ergänzt werden, die eine menschliche Bewertung erfordern.
Für Websites, die sich häufig ändern, bietet sich der Wawsome Accessibility Monitor an, um neu auftretende Probleme kontinuierlich zu verfolgen.
Für Funktionen, die direkt den Nutzern bereitgestellt werden, können Sie sich auch das Wawsome Accessibility Widgetansehen.
Entdecken Sie auch das gesamte Angebot an Wawsome-Barrierefreiheitsfunktionen.
FAQ
Wie kann ich prüfen, ob meine Website Barrierefreiheitsprobleme aufweist?
Beginnen Sie mit einem automatisierten Scanner für Probleme, die programmatisch erkannt werden können. Fahren Sie bei Bedarf mit manuellen Tests wichtiger Nutzerabläufe sowie Tests für Tastaturbedienung oder assistierende Technologien fort.
Kann mir ein Score sagen, ob meine Website barrierefrei ist?
Ein Score bietet einen Überblick über die vom Tool bewerteten Kriterien. Automatisierte Tools können die vollständige Barrierefreiheit einer Website nicht allein bestimmen.
Welche Barrierefreiheitsprobleme kann ich ohne technisches Wissen selbst erkennen?
Sie können einige einfache Prüfungen durchführen. Versuchen Sie, mit der Tastatur zu navigieren, zoomen Sie die Seite, prüfen Sie, ob Formulare klare Beschriftungen haben, und achten Sie auf den Textkontrast. Für technische Kriterien benötigen Sie geeignete Tools und Personen, die mit den WCAG vertraut sind.
Warum muss ich meine Website nach der Fehlerbehebung erneut prüfen?
Websites verändern sich. Eine neue Landingpage, ein Formular oder eine neue Komponente können neue Barrieren schaffen. Überwachung und erneute Tests sind nach relevanten Änderungen sinnvoll.
Wie sollte ich die gefundenen Probleme priorisieren?
Beginnen Sie mit Barrieren, die Nutzer daran hindern, wichtige Aktionen abzuschließen. Bezahlvorgänge, Authentifizierung, Terminbuchungen, Formulare und Zahlungen können sich direkt auf die Nutzer auswirken. Danach können Sie die verbleibenden Probleme nach Schweregrad und deren Häufigkeit auf der Website ordnen.
Ein guter Ausgangspunkt
Barrierefreiheit lässt sich viel einfacher verwalten, wenn man die konkreten Probleme sieht, die die eigene Website betreffen.
Scannen Sie die wichtigen Seiten, überprüfen Sie die Abläufe, die Nutzer abschließen können müssen, und legen Sie fest, welche Barrieren zuerst behoben werden sollten.
Ein Scanner hilft dabei, automatisch erkennbare Probleme zu identifizieren. Manuelle Tests vervollständigen das Bild dort, wo Kontext und menschliche Bewertung erforderlich sind.
Damit haben Sie bereits etwas Nützliches für das Team: echte Probleme, betroffene Seiten und einen klaren Ausgangspunkt für die Behebung.