Im nachfolgenden Text geben wir Ihnen 7 Tipps, um das Internet barrierefrei zu machen, an die Hand. Jeder Tipp enthält Links zu weiteren hochwertigen Informationen zum betreffenden Thema.
1. Bedienung
Die Inhalte Ihrer Website sollten so gestaltet sein, dass sie mithilfe der Tabulatortaste und den Pfeiltasten der Tastatur und ohne Maus zu erreichen sind. Geben Sie Links aussagekräftige Titel. Nennen Sie den Link zu einer Seite über Screenreader also besser „Was ist ein Screenreader“ anstatt „Klicken Sie hier“. Dies erleichtert zum einen sehgeschädigten Menschen, die Ihre Website mit einem Screenreader navigieren, die Bedienung. Zum anderen optimieren Sie Ihre Website damit gleichzeitig für Suchmaschinen.
2. Text
Für eine gut strukturierte, barrierefreie Website sollten Sie beim Schreiben eines Blogartikels auf die korrekte Verwendung von HTML-Elementen achten. Setzen Sie <h1> bis <h6>-Tags ein, um eine klare Hierarchie der Überschriften zu schaffen, und nutzen Sie <p>-Tags, um den Text in gut lesbare Absätze zu gliedern. Für Aufzählungen oder geordnete Listen sind <ul>, <ol>, und <li>-Tags ideal. Bilder sollten mit <img>-Tags und aussagekräftigen alt-Texten versehen werden, damit sie für alle Nutzer zugänglich und von Suchmaschinen lesbar sind. Verwenden Sie außerdem <a href="">-Tags für interne und externe Links mit beschreibendem Text, um die Orientierung zu erleichtern und die Nutzererfahrung zu verbessern.
Die Texte Ihrer Website sollten darüber hinaus kurz und leicht verständlich formuliert sein, sodass Ihre Inhalte von Menschen mit unterschiedlicher Bildung, Intellekt und Erfahrung sowie von Menschen mit Konzentrationsschwierigkeiten verstanden werden können. Achten Sie außerdem darauf, dass Ihre Website-Besucher die Möglichkeit haben, den Text zu vergrößern. Dies stellen Sie sicher, indem Sie für Schriften relative Einheiten (em, rem) anstatt statische Einheiten (px, pt) verwenden.
3. Bilder
Ein essenzieller und relativ einfach umzusetzender Tipp, um das Internet barrierefrei zu machen, bezieht sich auf Bilder im Internet. Menschen mit Sehschwächen profitieren von gut formulierten alt-Texten. Sie können von Screenreadern gelesen werden und werden immer dann dargestellt, wenn das Bild nicht angezeigt werden kann oder dies vom Browser verhindert wird.
alt-Textes am Bild einer Braillezeile.
<img decoding="async"
src="braille-computeranzeige.jpg"
alt="Eine blinde Person nutzt einen Computer mit einer Braillezeile"
/>
4. Farben
Verwenden Sie nicht nur Farben, um wichtige Informationen oder Unterscheidungen darzustellen. Farbenblinde Nutzer oder Menschen mit einer Rot-Grün-Sehschwäche können dies nicht wahrnehmen. Links zum Beispiel sollten sich nicht nur durch eine andere Farbe vom normalen Text abheben, sondern auch durch weitere Merkmale. Im Internet sind Links normalerweise unterstrichen. Wenn Ihnen diese Darstellung nicht gefällt, können Sie mit der CSS-Eigenschaft border eine ähnliche Unterstreichung erstellen und zusätzlich eigene Stile hinzufügen. Dies ist ein weiterer wichtiger Schritt, um das Internet barrierefrei zu machen.
Weiterführende Links:
5. Formulare
Um das Internet barrierefrei zu machen, sollten bei Formularen wichtige Felder und Hinweise nicht nur durch Farben gekennzeichnet werden. Verwenden Sie zusätzlich Symbole oder Text, damit farbenblinde Nutzer alle Informationen verstehen können. Achten Sie darauf, dass alle Formularelemente und Hinweise für Screenreader zugänglich sind, indem Sie klare Labels und ARIA-Attribute verwenden, um die Barrierefreiheit zu gewährleisten. Achten Sie außerdem auf die logische Reihenfolge der Eingabefelder und formulieren Sie aussagekräftige Beschriftungen (z.B. E-Mail Adresse eingeben). Testen Sie das Springen zum nächsten Eingabefeld mithilfe der Tabulator-Taste (⭾).
Weiterführender Link:
6. Videos und Animationen
Um Videos und Animationen im Internet barrierefrei zu gestalten, sollten Untertitel hinzugefügt werden, die alle gesprochenen Inhalte und Geräusche wiedergeben. Auch eine Audiodeskription ist wichtig, um visuelle Elemente zu beschreiben, die für das Verständnis relevant sind. Texttranskripte bieten eine weitere Möglichkeit, den Inhalt zugänglich zu machen und sind besonders für blinde Nutzer hilfreich.
Steuerungselemente wie Play, Pause und Lautstärke sollten gut sichtbar, per Tastatur bedienbar und für Screenreader zugänglich sein. Vermeiden Sie automatische Wiedergabe, da dies Nutzer mit Screenreader oder kognitiven Einschränkungen beeinträchtigen kann. Blinkende und flackernde Animationen sollten ebenfalls vermieden werden, um Menschen mit Epilepsie und Konzentrationsschwierigkeiten zu schützen.
Achten Sie auf hohe Farbkontraste, um das Internet barrierefrei zu machen und eine klare, leicht verständliche Sprache, um den Inhalt für sehbehinderte und kognitiv eingeschränkte Nutzer gut lesbar zu machen. Zusätzlich sollte es eine Option geben, Animationen anzuhalten oder zu deaktivieren, damit Nutzer mit Aufmerksamkeitsproblemen ungestört navigieren können.
7. HTML und CSS
Bei der Formatierung des Contents sollten HTML und CSS getrennt voneinander angelegt werden, sodass eingeschränkte Nutzer die CSS-Styles im Browser deaktivieren können. Ihre Inhalte sollten auch bei deaktivierten CSS-Styles, Scripts, Applets zugänglich sein.
7.1 CSS in Mozilla Firefox deaktivieren
- Öffnen Sie die gewünschte Webseite in Firefox.
- Drücken Sie die Taste Alt, um die Menüleiste einzublenden (falls sie nicht sichtbar ist).
- Wählen Sie Ansicht > Webseiten-Stil > Kein Stil.
Die Seite wird nun ohne CSS-Formatierungen angezeigt.
7.2 CSS in Google Chrome deaktivieren
In Google Chrome gibt es keine direkte Option, CSS über das Menü zu deaktivieren. Sie können jedoch CSS in Chrome mithilfe der Developer Tools deaktivieren:
- Öffnen Sie die gewünschte Webseite in Chrome.
- Drücken Sie F12 oder Strg + Umschalt + I (Windows) bzw. Cmd + Opt + I (Mac), um die Developer Tools zu öffnen.
- Wechseln Sie zum Sources-Tab.
- Klicken Sie oben rechts auf das Zahnrad-Symbol ⚙️, um die Einstellungen zu öffnen.
- Scrollen Sie nach unten zu den Rendering-Einstellungen und aktivieren Sie die Option „Disable CSS“ (CSS deaktivieren).
Nun wird die Seite ohne CSS-Formatierungen angezeigt. Diese Ansicht ist besonders hilfreich für Barrierefreiheits- und Usability-Überprüfungen.
7.3 CSS in Microsoft Edge deaktivieren
- Öffnen Sie die gewünschte Webseite in Edge.
- Drücken Sie F12 oder Strg + Umschalt + I (Windows) bzw. Cmd + Opt + I (Mac), um die Entwickler-Tools zu öffnen.
- Wechseln Sie zum Sources-Tab.
- Klicken Sie oben rechts auf das Zahnrad-Symbol ⚙️, um die Einstellungen zu öffnen.
- Scrollen Sie nach unten zu den Rendering-Einstellungen und aktivieren Sie die Option „Disable CSS“ (CSS deaktivieren).
Die Seite wird jetzt ohne CSS angezeigt, was ideal ist, um die reine HTML-Struktur zu überprüfen oder Barrierefreiheitstests durchzuführen.
7.4 CSS in Apple Safari deaktivieren
- Öffnen Sie Safari und gehen Sie zu Safari > Einstellungen in der Menüleiste.
- Gehen Sie zum Tab „Erweitert“ und aktivieren Sie die Option Menü „Entwickler“ in der Menüleiste anzeigen.
- Öffnen Sie die gewünschte Webseite.
- Klicken Sie in der Menüleiste auf „Entwickler“ und wählen Sie „Stile deaktivieren“.
Safari zeigt die Seite nun ohne CSS-Formatierung an. Diese Ansicht eignet sich besonders gut für Barrierefreiheits- und Usability-Überprüfungen.
7 Tipps für barrierefreie Websites: Quellen
W3C Web Accessibility Initiative (WAI)
Die W3C WAI ist die zentrale Quelle für internationale Standards zur Barrierefreiheit im Web, darunter die Web Content Accessibility Guidelines (WCAG). Diese Richtlinien bieten umfassende Anleitungen zur Umsetzung barrierefreier Websites.
Website: W3C WAI
MDN Web Docs (Mozilla Developer Network)
MDN Web Docs ist eine der umfassendsten und meistgenutzten Ressourcen für Webentwickler und Designer. Die Plattform wird von Mozilla bereitgestellt und bietet Dokumentation, Tutorials und Beispiele zu Web-Technologien wie HTML, CSS, JavaScript und weiteren Webstandards. Sie ist besonders wertvoll für alle, die barrierefreie Websites erstellen möchten, da sie gut verständliche Anleitungen und Beispiele für die richtige Verwendung von semantischem HTML, ARIA-Attributen und CSS zur Verbesserung der Zugänglichkeit bietet.
Website: MDN Web Docs