Barrierefreies Webdesign: Guide + praktische Tipps

Warum barrierefreies Webdesign allen etwas bringt

Stell Dir vor, du betrittst ein Geschäft und nachdem sich die Tür öffnet, steht dort eine meterhohe Mauer im Weg. Du könntest zwar darüber klettern, aber vermutlich würdest du das Geschäft verwirrt und frustriert wieder verlassen. Das ist schlecht für dich und schlecht für das Geschäft. Und noch schlimmer: Menschen, die körperlich beeinträchtigt sind, hätten vermutlich gar keine Möglichkeit das Geschäft zu betreten.

Im Web ist es nicht anders. Millionen von Menschen erleben täglich digitale Barrieren, wenn sie auf Websites unterwegs sind. Vor allem Menschen mit Seh- oder Hörbeeinträchtigungen, motorischen Einschränkungen oder kognitiven Beeinträchtigungen sind davon betroffen.

Barrierefreie Websites bieten eine Reihe von Vorteilen, sowohl für die Nutzer als auch für die Betreiber der Websites:

‍

Erweiterte Zielgruppe: Barrierefreie Websites ermöglichen es Personen mit unterschiedlichen Fähigkeiten und Einschränkungen, auf die Inhalte zuzugreifen. Dadurch wird die Zielgruppe erheblich erweitert und die Reichweite der Website erhöht.
Verbesserte Benutzererfahrung: Eine barrierefreie Website bietet eine bessere Benutzererfahrung für alle Nutzer, nicht nur für Nutzer mit Einschränkungen. Dies kann dazu beitragen, das Engagement der Nutzer zu steigern und ihre Zufriedenheit zu erhöhen. Um bei dem Beispiel der Mauer zu bleiben: Selbst wenn du es geschafft hättest über die Mauer zu springen, so wäre dir ein Einkauf ohne Hindernislauf vermutlich trotzdem lieber.
Verbesserung der SEO: Barrierefreie Websites können von Suchmaschinen besser indexiert werden, da sie klar strukturierten Inhalt und semantisch korrekten Code enthalten. Dies kann zu einer verbesserten Sichtbarkeit und Platzierung in den Suchergebnissen führen.

‍

Die Prinzipien von barrierefreiem Webdesign

Worauf kommt es bei der Gestaltung von barrierefreien Websites an? Diese Frage beantworten die sogenannten Web Content Accessibility Guidelines (WCAG). Sie sind die international anerkannten Richtlinien, die darauf abzielen, das Web zugänglicher zu machen.

Die WCAG werden von der World Wide Web Consortium (W3C) entwickelt und regelmäßig aktualisiert. Sie gliedern sich in vier Prinzipien, die als "POUR" bekannt sind:

‍

Wahrnehmbar (Perceivable): Die Inhalte müssen für alle Benutzer wahrnehmbar sein, einschließlich solcher mit Seh- oder Hörbeeinträchtigungen. Das bedeutet, dass Informationen auf verschiedenen Arten verfügbar sein müssen, damit alle sie verstehen können. Zum Beispiel sollten Bilder auf Websites auch mit Text beschrieben werden, damit Menschen, die nicht sehen können, wissen, was auf dem Bild ist.
Bedienbar (Operable): Websites sollten so gestaltet sein, dass sie für jeden einfach zu bedienen sind, auch wenn jemand keine Maus benutzen kann. Das bedeutet, dass man alles auf der Website auch nur mit der Tastatur erreichen können sollte.
Verständlich (Understandable): Die Inhalte und die Bedienung der Website müssen für alle Benutzer verständlich sein. Das betrifft auch Menschen, die zum Beispiel Schwierigkeiten beim Lesen haben. Wenn die Sprache kompliziert ist, verstehen manche Leute vielleicht nicht, worum es geht.
Robuste Technik (Robust): Die Website muss auf verschiedenen Geräten und mit verschiedenen Hilfsmitteln wie Screenreadern funktionieren. Das bedeutet, dass die Technik hinter der Website robust sein muss, damit sie überall funktioniert.

‍

Barrierefreiheit gestalten: Einfache Tipps für die Praxis

Um die oben genannten Prinzipien für eine barrierefreie Website zu erfüllen, hat die WCAG konkrete Maßnahmen für Designer und Entwickler ausgearbeitet. Dieser Maßnahmenkatalog ist sehr lang und hat mich am Anfang ziemlich überfordert. Deshalb habe ich hier die wichtigsten Punkte zusammengefasst.

Das Beste daran: Die Maßnahmen erfordern in der Regel keine umfangreichen Codeänderungen und können daher relativ schnell umgesetzt werden. Sie können einen spürbaren Unterschied in Bezug auf die Barrierefreiheit Ihrer Website machen und die Benutzererfahrung verbessern.

‍

Alternative Texte (Alt-Text) für Bilder:
Alt-Texte sind normalerweise unsichtbar und erscheinen nur, wenn die Seite mit einem Screenreader vorgelesen wird. Solche Software beschreibt den Inhalt für Menschen mit Sehbehinderungen. Zudem dienen alternative Texte für ein verbessertes Google-Ranking. Es ist allerdings wichtig, dass die Alt-Texte präzise und aussagekräftig sind. Alle gängigen CMS-Systeme wie Wordpress, Webflow oder Squarespace bieten die Möglichkeit Alt-Texte einzufügen.
Farbkontraste überprüfen und anpassen: Ein angemessener Farbkontrast zwischen Text und Hintergrund verbessert die Lesbarkeit der Inhalte und trägt zur Zugänglichkeit der Website bei. Vor allem für Personen mit Farbsehschwäche ist dies wichtig. Es gibt Online-Tools, die dabei helfen können, wie z.B. den "Contrast Checker" von WebAIM.
Tastaturzugänglichkeit sicherstellen: Testen Sie, ob alle Interaktionen auf der Website auch mit der Tastatur durchgeführt werden können. Stellen Sie sicher, dass alle Links, Schaltflächen und Formularelemente per Tastatur erreichbar und bedienbar sind.
Klare und verständliche Linktexte verwenden: Vermeiden Sie nichtssagende Linktexte wie "Hier klicken" und verwenden Sie stattdessen beschreibende Texte, die den Zweck des Links klar machen. Zum Beispiel sollte der Linktext "Mehr über unsere Dienstleistungen erfahren" anstelle von "Hier klicken" verwendet werden. Dies ist besonders wichtig für Benutzer mit Screenreadern, da sie anhand der Linktexte den Inhalt und Zweck der verlinkten Ziele verstehen.
Untertitel bei Video und Audio: Wenn Ihre Website Videos enthält, fügen Sie Untertitel hinzu, um den Inhalt für gehörlose oder schwerhörige Nutzer zugänglich zu machen. Dies kann relativ schnell durch die Nutzung von Untertitelungstools oder -diensten erreicht werden.
Übersichtliche Struktur der Inhalte: Strukturieren Sie den Text auf der Website mit Überschriften in der richtigen Hierarchie (z. B. <h1> für die Hauptüberschrift, <h2> für Untertitel usw.), um die Lesbarkeit und die Navigation für Screenreader-Nutzer zu verbessern.
Schriftgröße anpassen:
Die Möglichkeit für Benutzer, die Schriftgröße anzupassen, ist entscheidend für Menschen mit Sehbeeinträchtigungen. Durch die Verwendung relativer Einheiten wie "em" oder "rem" anstelle von festen Pixelwerten können Benutzer die Schriftgröße an ihre Bedürfnisse anpassen, ohne dass das Layout der Website beeinträchtigt wird.
Formulare zugänglich machen:
Formulare sollten so gestaltet sein, dass sie für alle Nutzer zugänglich sind. Dazu gehört die Verwendung von klaren Beschriftungen und Anweisungen, die auch von Screenreadern interpretiert werden können, sowie die Implementierung von Validierungsfehlern in Textform, um Menschen mit Sehbehinderungen eine klare Rückmeldung zu geben.
Barrierefreie Navigation:
Eine konsistente und übersichtliche Navigation ist entscheidend für die Zugänglichkeit einer Website. Die Verwendung klarer Überschriften, Listen und Navigationsstrukturen erleichtert es allen Nutzern, sich auf der Website zurechtzufinden, insbesondere für Benutzer mit Screenreadern. Eine sogenannte „Breadcrumb-Navigation“ kann bei der Navigation von komplexen Seiten helfen.

Wer die vollständige Liste an Maßnahmen von der WCAG lesen möchte kann das hier tun: https://www.w3.org/TR/WCAG22/

‍

Hilfreiche Websites

‍

Eine Checkliste für Barrierefreiheit im Web

Was auch zu empfehlen ist, ist die interaktive Accessibility Checklist von Webflow. Hier könnt ihr die erfüllten Punkte einfach abarbeiten und durchstreichen:

https://webflow.com/accessibility/checklist

Teste Websites auf ihre Barrierefreiheit

Du möchtest testen wie es um die Barrierefreiheit einer bestimmten Website steht? Dann gib die URL der Website beim WAVE-Tool ein. Es dient dazu, die Barrierefreiheit von Websites zu überprüfen und Probleme zu identifizieren. Das WAVE-Tool analysiert eine Webseite und gibt Rückmeldungen zu verschiedenen Aspekten der Barrierefreiheit.

https://wave.webaim.org/

‍

Die richtige Schrift: Atkinson Hyperlegible Font

Der Atkinson Hyperlegible Font ist eine spezielle Schriftart, die von Braille Institute entwickelt wurde, um Menschen mit Sehbehinderungen das Lesen zu erleichtern. Diese Schriftart zeichnet sich durch ihre klaren, gut unterscheidbaren Buchstaben aus, die dazu beitragen sollen, die Lesbarkeit für Personen mit Sehbeeinträchtigungen zu verbessern.
https://brailleinstitute.org/freefont

‍

Farbkontraste prüfen: WebAIM Contrast Checker

Ein Online-Tool, mit dem du den Farbkontrast zwischen Text und Hintergrund auf einer Webseite überprüfen kannst.
https://webaim.org/resources/contrastchecker/

‍

Tipps, Tricks, Anleitung: Accessibility Developer Guide

Der "Accessibility Developer Guide" ist eine Initiative des "Access for all", der Schweizer Stiftung für Technologie. Er wird in Zusammenarbeit mit einer Reihe von renommierten Webagenturen entwickelt und gepflegt.
https://www.accessibility-developer-guide.com/

‍