ArticleSetze Mitgefühl in die Tat um, indem du diese 8 barrierefreien Designfehler vermeidest

Barrierefreies Design respektiert die Einzigartigkeit aller Menschen, unabhängig von Alter und Fähigkeiten. Es beginnt mit der Erkenntnis, dass nicht alle Menschen so sind wie Sie.

Um unterschiedliche Benutzer optimal bedienen zu können, ist es unerlässlich, alle Arten von Menschen zu verstehen und sich in sie hineinzuversetzen. Die Einhaltung der WCAG 2.0 AA-Richtlinien macht Inhalte für ein breiteres Spektrum von Menschen mit Behinderungen zugänglich, einschließlich Blindheit und Sehbehinderung, Taubheit und Hörverlust, Lernbehinderungen, kognitive Einschränkungen, Bewegungseinschränkungen, Sprachbehinderungen oder Lichtempfindlichkeit. Um sicherzustellen, dass Sie jeden Benutzer bedienen, der Ihre Website besucht, vermeiden Sie diese acht barrierefreien Designfehler.

1. Tastaturfallen

Einige Menschen, die Hilfstechnologien verwenden, verlassen sich auf sichtbare Aktionen auf dem Bildschirm. Gutes Design stellt daher sicher, dass alle mit der Navigation verbundenen Inhalte sichtbar sind. Achten Sie darauf, die Elemente logisch anzuordnen (von links oben nach rechts unten), damit die Benutzer den Inhalt verstehen und fundierte Entscheidungen zur Navigation treffen können.

Tipps:

• Hauptinhalt: Erwägen Sie, Benutzern eine Möglichkeit zu bieten, die Navigation auf oberster Ebene einfach zu überspringen, um auf den Hauptinhalt zuzugreifen.
• UI-Muster: Befolgen Sie die Semantik gängiger Muster wie Toggle, Tabs, Tables, Modal Windows und ARIA-Attribute.
• Hover-Nutzung: Verbergen Sie keinen Text oder Aktionen hinter einem Hover-Zustand. Wenn ein Nur-Tastatur-Benutzer nicht sehen kann, dass Inhalte/Schaltflächen vorhanden sind, kann er nicht durch die Seite navigieren.

Beispiel Nr. 1 für gute Skip-Links

Gute Skip-Links Beispiel #2

2. Unzureichender Farbkontrast

Ein unzureichender Farbkontrast beeinträchtigt die Fähigkeit der Menschen, Informationen visuell aufzunehmen. Stellen Sie sicher, dass zwischen Text und Hintergrund genügend Kontrast besteht, um sicherzustellen, dass der Text lesbar ist. Das Kontrastverhältnis zwischen Text und Texthintergrund sollte mindestens 4,5 zu 1 betragen. Wenn Ihr Text jedoch mindestens 24 Pixel oder 19 Pixel fett ist, sinkt das Minimum auf 3 zu 1.

Tipps:

• Farbpaletten: Achten Sie auf Primärfarben. Beachten Sie außerdem die Anforderungen an den Farbkontrast, wenn Sie Farben auswählen.
• Verlassen Sie sich nicht nur auf Farbe: Verwenden Sie Kombinationen aus Form, Farbe und Text (nicht nur eine für sich), um Bedeutung zu vermitteln, und seien Sie konsistent. Stellen Sie mindestens zwei Indikatoren bereit, damit Personen, die Farben nicht leicht unterscheiden können, Ihre Inhalte dennoch verstehen können.
• Ausnahmen: Texte, Textabbildungen, Bilder und Logos, die zum Verständnis des Inhalts nicht erforderlich sind oder reine „Dekoration“ darstellen.

Beispiel für unzureichenden Kontrast

3. Text in Bildern

Vermeiden Sie Bilder von Texten, die gelesen werden sollen. Verwenden Sie echten Text, der mit CSS gestaltet ist, statt einer bildbasierten Textpräsentation. In Situationen, in denen Bilder von Text verwendet werden müssen, muss der Alternativtext denselben Text enthalten, der im Bild dargestellt wird.

Tipps:

• Diagramme, Charts, Tabellen: Verwenden Sie echten Text in Datenvisualisierungen. Wenn echter Text nicht möglich ist, ist eine textuelle Darstellung der wesentlichen Informationen, die das Bild vermittelt, unerlässlich. Beispiel: Lange Beschreibung oder Listenansicht.
• Ausnahmen: Logos, Markenelemente und Grafiken mit guten beschreibenden Textalternativen.

Beispiel für guten Text im Bild

4. Versteckte Fokuszustände

Fokuszustände helfen Benutzern beim Navigieren und Verstehen, wo sie sich befinden. Verstecke sie niemals. Fokuszustände sind für Tastaturbenutzer wichtig. Es hilft ihnen zu verstehen, wo sie sich auf einer Seite befinden. Um Ihre Website zu testen, versuchen Sie, durch Ihre Seite zu navigieren und Ihren Fokus zu finden.

Tipps:

• Fokusstatus: Wenn Sie die Standardfokusstatus entfernen, stellen Sie sicher, dass Sie sie durch etwas ersetzen, das besser funktioniert als das, was Ihr Browser bietet.
• Eingabezustände : Überlegen Sie, was mit Beschriftungen passiert, wenn Sie sich auf eine Eingabe konzentrieren.
• Seitenaktionen: Definieren Sie klar die Fokusnebenwirkungen von Aktionen.

Versteckte Fokuszustände

Gute Fokuszustände

5. Verwirrende hierarchische Struktur

Schaffen Sie klare Beziehungen zwischen wahrnehmbaren und programmatisch bestimmbaren Inhalten. Entwerfen Sie Seiten, die semantisch sinnvoll sind, damit Entwickler sie vom Design in den Code übersetzen können und ein Screenreader die richtige Lesereihenfolge bestimmen kann.

Tipps:

• Semantik: Fügen Sie erforderliche Felder und Bezeichnungen in Formulare ein. Entwerfen Sie Tabellen mit Spaltenüberschriften.
• Logische Gruppierungen: Gruppieren Sie verwandte Elemente mit viel Platz oder Hintergrundfarben. Präsentieren Sie Informationen der Reihe nach, z. B. Prozessdiagramme oder Schritt-für-Schritt-Anleitungen.
• Progressive Disclosure: Design für direkte Manipulation. Präsentieren Sie die richtigen Dinge zur richtigen Zeit. Üben Sie progressive Offenlegung.
• Wegfindung: Erstellen Sie konsistente Hinweise für die Navigation. Verwenden Sie Überschriften, um klare Orientierungspunkte innerhalb der Seite zu erstellen.
• Konsistenz: Präsentieren Sie Dinge, die gleich sind, auf die gleiche Weise.
• Differenzieren: Unterschiedliche Inhaltstypen unterscheiden.

Schlechte Hierarchie

Gute Hierarchie

6. Übermäßige kognitive Belastung

Kommunizieren Sie Informationen, die leicht verständlich sind. Gestalten Sie Informationen so, dass sie für diejenigen, die mit Aufmerksamkeitsdefizit-Hyperaktivitätsstörung (ADHS) und Autismus oder Autismus-Spektrum-Störungen leben, leicht konsumierbar sind.

Tipps:

• Seien Sie prägnant: Verwenden Sie kurze Sätze und visuelle Hinweise, um Informationen voneinander zu trennen. Beispiel: Listen Sie Gruppen mit Zahlen oder Aufzählungszeichen auf.
• Minimieren Sie die kognitive Belastung: Erstellen Sie eine Erzählung, die Informationen zur richtigen Zeit am richtigen Ort präsentiert. Vermeiden Sie es, dichte Absätze mit Informationen zu präsentieren, die aufgebrochen werden können. Vermeiden Sie lange Linienmaßnahmen.

7. Undifferenzierte Hyperlinks

Links sind eines der am häufigsten verwendeten Elemente im Web und für die Navigation auf Websites oft von entscheidender Bedeutung. Links sollten wie Links aussehen, und nichts anderes sollte es tun. Benutzer können frustriert werden, wenn sie versuchen, auf Textphrasen oder Grafiken zu klicken, die wie Links aussehen, es aber nicht sind. Links sollten aus dem Kontext heraus sinnvoll sein.

Tipps:

• Werden Sie spezifisch: Verwenden Sie beschreibende Wörter für Schaltflächen anstelle von vager Terminologie, damit das Ergebnis vorhersehbar ist.
• Nicht unterstrichene Links: Der Linktext muss ein Kontrastverhältnis von 3:1 zum umgebenden Nicht-Linktext aufweisen.
• Verlassen Sie sich nicht nur auf die Farbe: Der Link muss sowohl beim Bewegen der Maus als auch beim Tastaturfokus einen „nicht farblichen Bezeichner“ darstellen. Bsp.: Schlagschatten, Skalierung, Übergänge/Transformationen, Farbänderungen oder Unterstreichungen.

Schlechte Hyperlinks

Gute Hyperlinks

8. Unleserliche Typografie

Die meisten Informationen auf Websites werden durch Text kommuniziert, daher sollte die Schrift lesbar und gut lesbar sein. Dies hilft Menschen mit Sehbehinderung, Zeichen leicht zu erkennen. Es kann die Belastung des Lesens für jemanden mit einer Lernbehinderung verringern. Verwenden Sie eine saubere, einfache Typografie mit guten Abständen. Wenden Sie bequemes Kerning und Zeilenabstand an, um sicherzustellen, dass der Text leicht lesbar ist.

Tipps

• Geben Sie Benutzern die Kontrolle: Verhindern Sie nicht, dass Benutzer ihr eigenes Leseerlebnis anpassen, indem Sie die Textgröße auf eine kleinere Schriftgröße ändern. Sie können dies tun, indem Sie die Schriftgröße auf 100 % festlegen und relative Größen verwenden, um eine Hierarchie zwischen den Überschriften festzulegen. Text sollte noch zu 200 % lesbar sein.
• Reduzieren Sie Unterstreichungen, Kursivschrift und Großbuchstaben: Diese Buchstabenformen sind schwieriger zu erkennen und zu lesen.
• Langformatigen Text linksbündig ausrichten: Erstellen Sie konsistente Layouts mit linearen Pfaden, denen das Auge folgen kann.

Zoomen Sie auf 100 %

Ändern Sie die Größe Ihres Textes. Überprüfen Sie, ob Ihre Seite(n) für sehbehinderte und sehbehinderte Benutzer zugänglich und nutzbar sind. Ändern Sie die Textgröße und stellen Sie sicher, dass alles auf der Seite funktioniert. Wiederholen Sie dies, bis Sie einen Zoom von 200 % erreicht haben. Scheint einfach? Es ist.

Schritte zur Überprüfung Ihrer Typografie:

1. Öffnen Sie Ihren Browser und ändern Sie die Textgröße auf 200 Prozent. Klicken Sie auf „Ansicht“, wählen Sie „Zoom“ und klicken Sie dann entweder auf „Vergrößern“ (Strg/Befehlstaste ++), um die Textgröße zu vergrößern.
2. Sehen Sie sich an, wie der Inhalt auf dem Bildschirm reagiert hat. Alle Inhalte auf der Seite sollten weiterhin lesbar sein und keine Funktionalität sollte verloren gehen.
3. Überprüfen Sie, ob die Interaktionen noch funktionieren, ob sich der Text überschneidet, ob der wichtige Text abgeschnitten wurde oder ob der Text abgeschnitten wurde.

Zoomen Sie auf 200 %

Tipps:

1. Öffnen Sie Ihren Browser und ändern Sie die Textgröße auf 200 Prozent. Klicken Sie auf „Ansicht“, wählen Sie „Zoom“ und klicken Sie dann entweder auf „Vergrößern“ (Strg/Befehlstaste ++), um die Textgröße zu vergrößern.
2. Sehen Sie sich an, wie der Inhalt auf dem Bildschirm reagiert hat. Alle Inhalte auf der Seite sollten weiterhin lesbar sein und keine Funktionalität sollte verloren gehen.
3. Überprüfen Sie, ob Interaktionen noch funktionieren, ob sich Text überschneidet, ob wichtiger Text abgeschnitten wurde oder ob Text abgeschnitten wurde.

Ressourcen

Etwa jeder achte Mensch in den Vereinigten Staaten hat eine Behinderung. Wenn die Definition erweitert wird, um diejenigen einzuschließen, die mäßig beeinträchtigt sind, steigt diese Zahl auf fast eins von fünf.

Das Fehlen eines so großen Publikums schränkt die positiven Auswirkungen ein, die eine Website auf Ihr Unternehmen haben kann – ganz zu schweigen von der Fähigkeit Ihrer Marke, bei Menschen Anklang zu finden und Vertrauen zu wecken. Der Aufbau einer zugänglichen Website, die in so vielen Browsern und von so vielen Menschen wie möglich genutzt werden kann, kann Ihrem Unternehmen helfen – aber es ist auch einfach das Richtige. Deshalb haben wir ein paar andere Ressourcen zu diesem Thema zusammengestellt.

• Finden Sie heraus, warum es für Unternehmen wichtig ist, die Barrierefreiheit im Internet in Betracht zu ziehen (und eine Firmenklage zu vermeiden).
• Schalten Sie den Solving for B° Podcast über die Bedeutung der Barrierefreiheit im Internet ein.

Farbkontrast

• Web-AIM-Kontrastprüfer
• Färbbarer Kontrastprüfer

Struktur

• Headings Map Chrome-Erweiterung
• A11Y-Projektmusterbibliothek

Kredite

• A11Y-Projekt
• w3.org – WCAG 2.0
• w3.org- Standards & Übersicht
• Usability.org
• Barrierefreiheitsforschung bei IBM
• Carnegie Museen von PittsburghDisney.com gute Hierarchie