Dieser Beitrag beleuchtet zentrale Aspekte der digitalen Barrierefreiheit. Durch die Umsetzung dieser Maßnahmen können Webseitenbetreiber eine inklusivere digitale Umgebung schaffen – zugänglich für alle Nutzergruppen.
- Alternativtexte für Bilder
- Lesbarer Text
- Tastaturzugänglichkeit
- Farbkontraste
- Untertitel für Video und Transkripte für Audio
- Konsistente Navigation
- Semantisches HTML und ARIA Landmarks
- Fazit
Alternativtexte für Bilder
Webseitenbesucher mit eingeschränkter oder fehlender Sehfähigkeit nutzen Screenreader, um sich Webseiten anzusehen. Diese Software wandelt den Bildschirminhalt in gesprochene Sprache oder Braille-Schrift um. Bilder und andere nicht-textuelle Inhalte werden vom Screenreader beschrieben. Dazu nutzt die Software die Alternativtexte, welche vom Webseitenersteller zum jeweiligen Bild hinzugefügt wurden.
Wurde zum Bild eines roten Sneakers beispielsweise der Alternativtext „Roter Sneaker mit beiger Sohle und weißen Streifen an der Seite“ hinzugefügt, wird der Screenreader an der Stelle, an welcher das Bild erscheint, ausgeben: „Bild: roter Sneaker mit beiger Sohle und weißen Streifen an der Seite.“ Wie ein guter Alternativtext für Bilder und andere Elemente aussehen kann, beschreibe ich euch im Blogbeitrag „Gute Alternativtexte für Webseitenelemente„.
Lesbarer Text
Webseiten, insbesondere solche mit vielen Inhalten, sind zugänglicher und benutzerfreundlicher, wenn der Text knapp gehalten ist.
Von entscheidender Bedeutung für die Lesbarkeit sind Schriftart, Textgröße und Zeilenabstand. Vermieden werden sollten Schriftarten, die von manchen Nutzern schwer lesbar sind, weil manche Buchstaben einander zu ähnlich oder zu verziert sind.
Im Blogbeitrag „Schriftarten für barrierefreie Webseiten“ gehe ich näher auf verschiedene Fonts ein.
Bezüglich der Textgröße sollten auf Webseiten möglichst relative Größenangaben wie „rem“ genutzt werden. Die Schriftgröße eines Elements ist dabei nicht festgelegt, sondern ändert sich je nach Bildschirmgröße (zum Beispiel beim Zoomen).
Der Zeilenabstand (line-height) beeinflusst, wie gut Text lesbar ist. Zu wenig Abstand macht den Text gedrängt, zu viel lässt ihn auseinanderfallen. Auch hier empfiehlt es sich, auf relative Einheiten zurückzugreifen.
Tastaturzugänglichkeit
Menschen mit körperlichen Behinderungen ist es manchmal nicht möglich, eine Maus zur Navigation einer Webseite zu nutzen. In diesem Fall ist es unerlässlich, dass Webseiten so gestaltet sind, dass sie problemlos über die Tastatur gesteuert werden können.
Die wichtigsten Steuerungen wie die Tabulatortaste zum Vorwärtsgehen und die Tabulatortaste + Umschalttaste zum Rückwärtsgehen sollten daher funktionstüchtig sein.
Im Übrigen ist die Tastaturzugänglichkeit nicht nur für Menschen mit Behinderung profitabel. Auch Menschen mit temporären Einschränkungen, wie einem gebrochenen Arm oder Webseitenbesucher, die Tastaturkürzel aus Effizienzgründen nutzen, sind auf diese Funktion angewiesen.
Im Beitrag „Webseiten über die Tastatur steuern“ lernen Sie die wichtigsten Tastaturkürzel kennen.
Farbkontraste
Ein angemessener Farbkontrast zwischen Text und Hintergrund hilft sehbehinderten Nutzern, insbesondere denjenigen, die farbenblind sind. Ein hoher Kontrast zwischen Hintergrund und Text kann die Sichtbarkeit und allgemeine Zugänglichkeit Ihrer Website erheblich verbessern.
Untertitel für Video & Transkripte für Audio
Untertitel, also in einem Video eingeblendete Textzeilen, welche die gesprochene Sprache, Geräusche oder andere relevante Inhalte wiedergeben, sind nicht nur für Menschen mit Hörbehinderung, sondern auch für Nicht-Muttersprachler oder Zuschauer, die keinen Ton nutzen können – zum Beispiel, weil sie im Bus oder in der Bahn sitzen – hilfreich.
Videos mit Untertiteln werden besser gefunden & sind auf Social Media beliebter, Sie verbessern also zugleich auch SEO und Reichweite.
Eine Textversion zum Beispiel eines Podcasts bietet die gleichen Vorteile für Audio-Formate.
Konsistente Navigation
Die Navigationselemente einer Webseite sollten einheitlich und vorhersehbar sein, um Menschen mit kognitiven Einschränkungen oder Nutzern von assistiven Technologien die Orientierung auf einer Webseite zu erleichtern.
- Verständliche Label wie Startseite, Kontakt oder Über uns
- Navigation sollte auf jeder Seite gleich aussehen
- Keine plötzlichen Änderungen in Reihenfolge oder Design
- Anzeigen, wo der Nutzer sich befindet (zum Beispiel durch Breadcrumb-Navigation oder farbliche Hervorhebung)
Semantisches HTML und ARIA Landmarks
Die Verwendung von semantischem HTML – also aussagekräftigen HTML-Elementen, die ihre Funktion beschreiben – ermöglicht es Betrachtern und Benutzern von Bildschirmlesegeräten, die verschiedenen Bereiche einer Webseite besser zu interpretieren. So verleihen Überschriften-Elemente (<h1>, <h2>, <h3> usw.) einer Webseite einerseits eine Struktur und andererseits können zum Beispiel Screenreader eine Webseite strukturierter an den Nutzer ausgeben.
Können keine herkömmlichen HTML-Elemente verwendet werden, helfen ARIA-Label (ARIA steht für Accessible Rich Internet Application) die Seite noch besser zu strukturieren. Sie helfen blinden oder sehbehinderten Nutzern, sich schneller auf einer Seite zu orientieren und direkt zu wichtigen Bereichen zu springen.
Mit dem Aria-Attribut role=“main“ beispielsweise kann ein Nutzer die Navigation überspringen und direkt zum Huaptinhalt navigieren.
Fazit
Digitale Barrierefreiheit ist kein optionales Extra, sondern eine essenzielle Voraussetzung für eine inklusive und nutzerfreundliche Webseite. Durch die Berücksichtigung von Alternativtexten für Bilder, gut lesbarer Typografie, Tastaturzugänglichkeit, ausreichenden Farbkontrasten sowie Untertiteln und Transkripten wird sichergestellt, dass Inhalte für alle Nutzergruppen – unabhängig von ihren individuellen Bedürfnissen – zugänglich sind.