Barrierefreie Websites erstellen
Grundlagen: Definition von barrierefreiem Webdesign
Unter barrierefreiem Webdesign verstehen wir im Allgemeinen die Gestaltung und Entwicklung von Websites, die für alle Menschen nutzbar sind – unabhängig von individuellen Einschränkungen oder technischen Hilfsmitteln. Eine barrierearme Website ermöglicht es Nutzern mit Seh-, Hör-, Motorik- oder kognitiven Beeinträchtigungen, Inhalte problemlos zu erfassen und in ihnen zu navigieren.
Wir stellen damit also sicher, dass Websites, Apps oder Shops für alle Nutzer unter verschiedenen Bedingungen ohne große Hürden nutzbar sind. Bei der Erstellung sollten Webentwickler auf eine saubere, verständliche und unterstützende Code-Struktur achten.
Nach dem zweiten Teil der Serie, in dem es um Pflege von Inhalten ging, widmen wir uns dieses mal der technischen Seite von barrierearmen Websites.
Allgemeine Handlungsempfehlungen
Bei der technischen Umsetzung von Webapps und Websites gibt es ein paar Grundlagen, die zum Handwerk gehören.
Dabei spielen folgende Aspekte eine wesentliche Rolle:
- Semantik: Die Bedeutung von Inhalten durch die Verwendung der passenden HTML-Tags
- Erfassbarkeit von Inhalten: Die Beschriftung und Erklärung von Daten, Bildern oder interaktiven Elementen wie Links, Videos oder Buttons.
- Strukturierung: Die sinnvolle Zusammensetzung aller Bereiche einer Seite.
- Navigation: Eine einfache Bedienbarkeit und Erreichbarkeit aller Seiten und Inhalte.
- Form follows function: Das Design unterstützt die Nutzung und lenkt nicht von ihr ab. An erster Stelle stehe Benutzerfreundlichkeit und Funktionalität.
- Visuelle Darstellung: Kontraste und Farben werden so gewählt, dass sie sich voneinander abheben.
Grundvoraussetzung für barrierearme Websites ist die Einhaltung von Webstandards - allen voran dem HTML-Standard, CSS, JavaScript und WCAG. Webstandards sind verbindliche Richtlinien und Technologien, die die Entwicklung und Darstellung von Websites im Internet regeln. Sie werden von Organisationen wie dem World Wide Web Consortium (W3C) oder der Web Accessibility Initiative (WAI) entwickelt. Nur auf der Grundlage dieser Standards ist es überhaupt möglich, Websites, Apps oder Shops so zu erstellen, dass Browser, Suchmaschinen oder Assistenzsysteme wie Screenreader sie analysieren und verwerten können.
Struktur, Layout und Funktion einer Website werden dabei voneinander getrennt behandelt.
Semantik: Elemente mit Bedeutung
Semantisches HTML bildet das Fundament barrierefreier Websites. Es geht darum, HTML-Elemente entsprechend ihrer Bedeutung zu nutzen, anstatt lediglich optische Effekte zu erzielen. Beispielsweise sollte eine Überschrift immer mit <h1> bis <h6> ausgezeichnet sein, anstatt nur mit <div> und CSS groß dargestellt zu werden. Listen sollten mit <ul> oder <ol> und nicht einfach mit <br> strukturiert werden.
Durch semantisches HTML profitieren nicht nur sehende Nutzer, sondern auch Screenreader und Suchmaschinen, da die Struktur der Seite klar erkennbar ist. Dies verbessert sowohl die Barrierefreiheit als auch die SEO-Performance.
Layout-Elemente
Ein Seitenlayout dient der Unterteilung der Seite in bestimmte Bereiche, die meist von einem Design vorgegeben werden. Zu diesem Zweck gibt es eine Vielzahl von Elementen, die dem Bereich eine gewisse Bedeutung (Semantik) geben.
Layout-Elemente im Webdesign sorgen für eine klare Struktur und eine sinnvolle Anordnung von Inhalten. Sie helfen dabei, Inhalte hierarchisch zu gliedern, sodass Browser, Suchmaschinen und Assistenzsysteme die Bedeutung und Wichtigkeit der einzelnen Bereiche korrekt erfassen können. Ohne diese Struktur wäre der Code einer Website nur eine Ansammlung von Informationen ohne erkennbaren Zusammenhang.
Durch den Einsatz semantischer Layout-Elemente wird der Seitenaufbau standardisiert, mit einer Bedeutung versehen und in gewisser Weise auch maschinenlesbar.
Die zentralen Struktur-Elemente sind:
- Header
<header>: Der Kopf einer Website oder eines Inhaltsbereichs. Es wird in aller Regel benutzt, um Logo, Navigationen im Website-Header oder einleitende Informationen eines Inhaltsbereichs zu beschreiben. Es kann mehrere<header>auf einer Seite geben, jedoch nicht ineinander verschachtelt. - Footer
<footer>: Der Fußbereich einer Website oder eines Inhaltsbereichs. Der Footer enthält meistens allgemeine Informationen einer Website oder eines Inhaltsbereiches wie Kontaktinformationen, Links zu internen Seiten oder das Copyright. Es kann mehrere<footer>auf einer Seite geben, jedoch nicht ineinander verschachtelt. - Hauptinhalt
<main>: Der Hauptinhalt einer Website. Das<main>-Element umschließt den wichtigsten Teil der Seite und darf nur einmal im Dokument vorkommen. - Navigation
<nav>: Kennzeichnet einen Navigationsbereich. Das Element umschließt einen Bereich mit internen Links oder Verweisen zu anderen Seiten. Es kann mehrere<nav>auf einer Website geben, jedoch sollten damit nur wichtige Links gekennzeichnet werden. - Seiteninhalt
<aside>: repräsentiert einen beiläufigen oder unwichtigen Seiteninhalt. Das<aside>-Element wird in aller Regel für die Darstellung einer Seitenspalte benutzt. Semantisch gesehen steht er für Inhalt, der nur indirekt zum restlichen Inhalt gehört, also parallel zum Kontext betrachtet werden kann. Es können mehrere<aside>in einer Seite vorkommen. - Unabhängige oder alleinstehende Inhalte
<article>: Ein in sich geschlossener Inhalt, der unabhängig vom Rest der Seite betrachtet werden kann. Das <article>-Element repräsentiert nicht unbedingt nur (Zeitungs-)Artikel, sondern alle möglichen Inhalte, die für sich selbst stehen und kein einzelnes Kapitel in einem Dokument sind. Es kann mehrere<article>auf einer Seite geben - auch ineinander verschachtelt.<article>sollten mit einer Überschrift versehen und können weiter mit<header>und<footer>untergliedert werden. - Abschnitt, Kapitel oder Bereich
<section>: Allgemeine Unterteilung einer Seite oder eines Inhaltsbereichs, z.B. ein Kapitel oder eine thematische Gruppierung. Eine<section>ist kein in sich abgeschlossener Bereich – sie hat Bezug zu anderen Teilen der Seite. Es kann also mehrere<section>-Elemente auf einer Seite geben.
Eine<section>sollte eine Überschrift enthalten, die dessen Inhalt beschreibt oder einleitet.
Der div-Container
Ein <div>-Element hat keine bestimmte Bedeutung (Semantik) wie die obigen Elemente. In aller Regel kann es benutzt werden, wenn keines der anderen Elemente passen.
Der Einsatzbereich von <div> ist die Gruppierung von Elementen zum Zweck der Gestaltung. Dem Container wird per CSS und JavaScript eine Bedeutung gegeben.
<header>
<div class="container-center">
<img src="logo.png" alt="Logo">
<nav>…</nav>
<div class="user-menu">…</div>
</div>
</header>
In diesem kleinen Beispiel wird das <div class="container-center"> genutzt, um die Inhalte des Headers zu zentrieren, während der Hintergrund sich über die gesamte Breite des Bildschirms erstrecken kann. Das zweite <div class="user-menu"> beinhaltet alle möglichen Elemente für einen Login oder ein Menü für den angemeldeten Benutzer.
Das <div> ist das am häufigsten zu findende HTML-Element. Die Spezifikation dazu wird in etwa wie folgt beschrieben:
Das
<div>HTML-Element ist der generische Container für Flussinhalt. Es hat keine Auswirkung auf den Inhalt oder das Layout, bis es in irgendeiner Weise mit CSS gestylt wird. Als "reiner" Container repräsentiert das<div>-Element von sich aus nichts.
Wenn wir uns den letzten Satz aus dem Zitat ansehen, finden wir die entscheidende Aussage. Ein div repräsentiert nichts, es hat keine bestimmte Bedeutung und damit keine Semantik. Doch Semantik ist ein wichtiger Bestandteil von Barrierearmut. Screenreader, Bots oder Suchmaschinen-Crawler analysieren über die Semantik den Inhalt einer Seite. Damit erfassen sie Menüs, Links, Bilder oder unterscheiden zwischen wichtigen und unwichtigen Texten.
Manche Websites sind jedoch regelrechte div-Wüsten. Es gibt keine Struktur, Überschriften sind nicht als solche gekennzeichnet, sogar Links oder Buttons werden als div missbraucht. Und das ist ein großes Problem!
Kennzeichnung von Inhalten
So wie es Layout- oder Strukturelemente gibt, so gibt es auch die passenden Elemente, um Inhalte semantisch zu kennzeichnen.
Während Layout-Elemente die Struktur einer Webseite definieren, sorgen Inhaltselemente dafür, dass Informationen korrekt und sinnvoll ausgegeben werden. HTML bietet hierfür eine Vielzahl von Tags, die eine Vielzahl von verschiedenen Inhalten kennzeichnen und so deren Bedeutung für Browser, Suchmaschinen und Assistenzsysteme verständlich machen.
Ein zentrales Element sind Überschriften (<h1> bis <h6>), die eine klare Hierarchie schaffen und den Inhalt gliedern. Fließtexte werden mit <p> ausgezeichnet, während wichtige Begriffe mit <strong> oder <em> betont werden. Listen (<ul>, <ol>, <li>) helfen dabei, Informationen strukturiert darzustellen, und Tabellen (<table>, <tr>, <th>, <td>) eignen sich für tabellarische Daten.
In den folgenden Kapiteln werde ich aber nicht auf jedes einzelne Element eingehen, welches der HTML-Standard derzeit zu bieten hat. Hier geht es hauptsächlich um die Verbesserung der Barrierefreiheit und wie dieses Ziel erreicht werden kann.
Überschriften: Die Hierarchie einer Seite
Überschriften gliedern die Seite in eine Hierarchie, die sogenannte Outline. Es gibt insgesamt sechs Überschriftenebenen, beginnend mit <h1>, dem höchsten Level, und endend mit <h6>, dem niedrigsten Level.
Die wichtigste Überschrift <h1> sollte nur einmal pro Seite vorkommen, da sie das Thema dieser Seite enthält. Es ist jedoch auch kein Fehler, mehrere Überschriften des höchsten Levels auf einer Seite zu benutzen, wenn sie ähnlich wichtig sind.
Aus SEO-Gründen ist die Reihenfolge der Hierarchie auf der gesamten Seite unbedingt einzuhalten. Das bedeutet, dass keine Überschrift einer niedrigeren Hierarchie vor einer Überschrift höherer Hierarchie stehen sollte. Natürlich kann es immer Ausnahmen geben, bspw. wenn im Seitenkopf ein zentraler Suchbereich eingebunden ist, der seinen Inhalt nicht mit einer <h1> beschreibt.
Bitte beachte
Die standardmäßige Schriftgröße einer Überschrift sollte nicht über den Einsatz der richtigen Hierarchie entscheiden.
Während Überschriften eine klare inhaltliche Hierarchie schaffen, entfalten sie ihre volle Wirkung erst in Kombination mit den richtigen Struktur-Elementen. Besonders in <article> und <section> spielen sie eine zentrale Rolle, da diese Elemente eigenständige inhaltliche Blöcke darstellen, die jeweils eine eigene Überschrift benötigen.
Ein <article> steht für einen abgeschlossenen Inhalt wie einen Blogbeitrag, eine Nachricht oder ein Kommentar. Eine passende Überschrift macht sofort deutlich, worum es geht. <section> hingegen dient der thematischen Gliederung innerhalb eines Artikels oder einer Seite. Auch hier sollte jede Sektion eine Überschrift erhalten, um den Inhalt klar zu definieren und die Navigation für assistive Technologien zu erleichtern.
Beschriftungen: Das 1x1 der Zugänglichkeit
Damit Webinhalte für alle Nutzer zugänglich sind, benötigen viele Elemente eine aussagekräftige Beschriftung oder Beschreibung. Ohne diese zusätzlichen Informationen können Screenreader, Suchmaschinen und andere assistive Technologien den Inhalt oft nicht korrekt erfassen.
In den nächsten Abschnitten geht es um die technischen Details, Pflichtattribute und bewährte Methoden, um Webinhalte so zu kennzeichnen, dass sie für alle verständlich und nutzbar sind.
Alternativtexte für Bilder
Jede Grafik, die über das <img>-Tag angezeigt wird, hat das alt-Attribut zur Pflicht. Als Faustformel gilt, dass der Alt-Text die Grafik mit einfachen Worten wiedergibt. Handelt es sich z.B. um Cat Content, so sollte das Wort Katze auftauchen.
<img src="pfad/zur/grafik.jpg" alt="Eine weiße Katze auf einer grünen Wiese">
Tipp
Eine nützliche Hilfe zum Erstellen von Alt-Texten ist KI. Es gibt einige wenige hilfreiche Dienste, die teils kostenfrei benutzbar sind oder auch in das eigene CMS integriert werden können. Wer sich näher mit dem Thema KI und Alt-Texte beschäftigen möchte, dem sei der folgende Beitrag empfohlen.
Artikel lesen: Alt-Texte generieren mit Künstlicher Intelligenz
Links und Buttons
Die Beschriftungen für Buttons oder Links müssen aussagekräftig und leicht verständlich sein. Wenn nur ein Icon zu sehen sein soll, sollte ein Titel und - wenn möglich - ein Aria-Label vergeben werden.
<!-- einfacher Link -->
<a
href="link/zu/einem/anderen/artikel.html"
title="Einzelheiten über das Barrierefreiheitsstärkungsgesetz"
>Das Barrierefreiheitsstärkungsgesetz</a>
<!-- einfacher Submit-Button -->
<input
type="submit"
class="button button--primary"
value="Formular absenden"
>
<!-- einfacher Button mit zusätzlichem Title zur Unterstützung -->
<button
type="button"
id="js-load-comments"
class="button button--primary"
title="Lade die nächsten Kommentare nach"
>Weitere Kommentare</button>
<!-- Icon-Button mit Title und Aria-Label als Beschriftungsersatz -->
<button
type="submit"
class="button button--primary"
title="Formular absenden"
aria-label="Das Formular absenden"
>
<span
class="button__icon"
aria-hidden="true"
></span>
</button>
Hier verbirgt aria-hidden="true" das Symbol vor Screenreadern und der begleitende verborgene Text liefert die notwendige Beschreibung.
Grundsätzlich gilt, dass jeder Hinweis auf den Link oder die auszuführende Aktion hilfreich ist. Links oder Buttons, die nur ein Icon anzeigen, benötigen eine Beschreibung über den Titel oder ein Aria-Label-Attribut. Alternativ kann auch ein Text genutzt werden, der per CSS visuell versteckt wird.
<!-- Icon-Button mit Title und verstecktem Text -->
<button
type="button"
class="button button--primary"
title="Formular absenden"
>
<span
class="button__icon"
aria-hidden="true"
></span>
<span class="button__text button__text--visually-hidden">Formular absenden</span>
</button>
Wie Text über CSS optisch versteckt werden kann, aber für Screenreader weiterhin verfügbar ist, zeigt der Artikel "Inclusively Hidden" bei CSS-Tricks.
Icons
Icons kommen in vielen Facetten daher und können auf verschiedenen Wegen genutzt werden. Beliebte Bibliotheken wie Font Awesome oder Bootstrap nutzen skalierbare Web Fonts oder SVGs, aber auch normale Grafikformate wie PNG können Icons anzeigen. Größerer Beliebtheit erfreuen sich auch immer mehr Symbole aus dem UTF-8-Zeichensatz.
Analog zu den Beschriftungen für Links oder Buttons ist es auch hier ratsam, Beschreibungen den Symbolen hinzuzufügen.
<!-- Einbindung per img-Tag -->
<img
src="pfad/zur/grafik.png"
alt="Info-Symbol mit dem Buchstaben i">
<img
src="pfad/zu/anderem/vector-icon.svg"
alt="Hamburger-Icon mit 3 horizontalen Strichen">
<!-- Web Font von Font Awesome -->
<i
class="fa-brands fa-accessible-icon"
title="Rollstuhl-Symbol"
aria-label="Rollstuhl-Symbol"></i>
<!-- SVG -->
<svg
title="Haus-Symbol"
aria-label="Haus-Symbol"
role="img">
<path d="...">
</svg>
<!-- UTF-8-Icons -->
<span
title="E-Mail-Symbol"
aria-label="E-Mail-Symbol">✉</span>
Tabellen
Eine Tabelle repräsentiert strukturierte Daten, die in Zeilen und Spalten dargestellt werden können. Im einfachsten Fall werden damit zusammenhängende Key-Value-Paare in zwei Spalten und beliebig vielen Zeilen ausgegeben. Komplexere Daten haben entsprechend mehrere Spalten.
Gute Beispiele für die Nutzung von Tabellen sind Statistiken, Preistabellen oder auch Kalender. Tabellen sollten dagegen jedoch nicht als Layout-Hilfe eingesetzt werden!
Damit Screenreader oder Suchmaschinen-Bots die Tabelle nicht Zeile für Zeile auslesen müssen, um den Inhalt zu verstehen, sollte eine Zusammenfassung hinzugefügt werden, die am Anfang der Tabelle definiert wird.
<table>
<caption>Eine Auflistung an Personen mit Name, Adresse, Position und Kontaktdaten</caption>
<thead>
...
</thead>
<tbody>
...
</tbody>
</table>
Vor allem für Besucher mit Screenreadern erleichtert die Caption das Leben enorm, da nicht jede einzelnen Zeile ausgelesen werden muss. Der Benutzer bzw. die Benutzerin kann nach der Ansage der Beschreibung entscheiden, ob der Tabelleninhalt in Gänze vorgelesen werden soll.
Audio und Video
Damit Audio- und Video-Inhalte barrierefrei sind, müssen sie mit zusätzlichen Informationen versehen werden, die Nutzern mit Einschränkungen den Zugang ermöglichen. Das <audio>- und <video>-Element in HTML bietet verschiedene Möglichkeiten, Inhalte zugänglich zu machen. Eine der wichtigsten Maßnahmen ist die Bereitstellung von Untertiteln über das <track>-Element mit kind="captions". Dadurch können gehörlose oder schwerhörige Nutzer gesprochene Inhalte als Text lesen. Alternativ lassen sich Transkripte manuell bereitstellen, die nicht nur den Dialog, sondern auch wichtige Geräusche oder Musikbeschreibungen enthalten.
Für blinde oder sehbehinderte Nutzer ist eine audiovisuelle Beschreibung sinnvoll, die zusätzliche Informationen zur Handlung oder relevanten visuellen Elementen liefert. Diese kann entweder direkt in das Video integriert oder als separate Tonspur angeboten werden. Zudem hilft das aria-label- oder aria-describedby-Attribut, um assistiven Technologien eine aussagekräftige Beschreibung zum Medieninhalt zu liefern.
Webentwickler sollten außerdem darauf achten, dass Medien steuerbar und nicht automatisch abgespielt werden. Nutzer müssen die Wiedergabe mit Tastatur oder Screenreader starten, pausieren oder die Lautstärke anpassen können. Die Bereitstellung von mehreren Formaten (.mp4, .webm, .ogg) sorgt zudem für eine bessere Kompatibilität mit verschiedenen Geräten und Browsern.
<figure>
<video
controls
aria-label="Naturdokumentation über den Regenwald">
<!-- Verschiedene Videoformate für bessere Kompatibilität -->
<source src="regenwald.mp4" type="video/mp4">
<source src="regenwald.webm" type="video/webm">
<!-- Untertitel für gehörlose Nutzer -->
<track src="untertitel.vtt" kind="captions" srclang="de" label="Deutsch">
<track src="subtitles-en.vtt" kind="captions" srclang="en" label="English">
<!-- Audiodeskription für sehbehinderte Nutzer -->
<track src="audiodeskription.vtt" kind="descriptions" srclang="de" label="Deutsch (Audiodeskription)">
</video>
<!-- Transkript für Nutzer, die das Video nicht abspielen können oder möchten -->
<figcaption>
<p><strong>Transkript:</strong> Dieses Video zeigt beeindruckende Aufnahmen des Regenwalds, begleitet von Naturgeräuschen und Erklärungen zur Artenvielfalt...</p>
<a href="transkript.html">Vollständiges Transkript lesen</a>
</figcaption>
</figure>
Das Beispiel zeigt verschiedene Möglichkeiten, ein Video über Beschreibungen, Untertitel oder Transkriptionen zugänglich zu machen. Eine Audio-Datei behandeln wir auf eine ähnliche Art und Weise:
<figure>
<audio
controls
aria-label="Podcast über nachhaltige Ernährung">
<!-- Verschiedene Audioformate für bessere Kompatibilität -->
<source src="nachhaltigkeit.mp3" type="audio/mpeg">
<source src="nachhaltigkeit.ogg" type="audio/ogg">
<!-- Untertitel für gehörlose Nutzer -->
<track src="untertitel.vtt" kind="captions" srclang="de" label="Deutsch">
<track src="subtitles-en.vtt" kind="captions" srclang="en" label="English">
<!-- Fallback für Browser, die kein HTML5-Audio unterstützen -->
Ihr Browser unterstützt das Audio-Element nicht. Sie können die Datei
<a href="nachhaltigkeit.mp3">hier herunterladen</a>.
</audio>
<!-- Transkript für Nutzer, die den Inhalt lesen möchten -->
<figcaption>
<p><strong>Transkript:</strong> In dieser Folge sprechen wir über nachhaltige Ernährung, regionale Produkte und die Auswirkungen unserer Essgewohnheiten auf die Umwelt...</p>
<a href="transkript.html">Vollständiges Transkript lesen</a>
</figcaption>
</figure>
Was macht die beiden Beispiele barrierefrei?
- Bietet Untertitel für gehörlose und schwerhörige Menschen
- Gibt ein Transkript aus, falls das Audio nicht gehört werden kann
- Erlaubt Tastatursteuerung durch
controls - Funktioniert mit Screenreadern, da
aria-labeleine inhaltliche Beschreibung liefert - Unterstützt verschiedene Formate, um die Kompatibilität zu verbessern
figure: Container für Abbildungen aller Art
Das <figure>-Element ist ein Container, um Bilder, Grafiken, Charts oder andere Abbildungen zu kennzeichnen. Als Abbildungen können im weiteren Sinne auch Tabellen, SVGs, Videos oder Audio-Dateien umschlossen werden. Typischerweise wird es genutzt, wenn dieser nicht-textuelle Inhalt wichtig für den Rest der Seite ist und eine Erklärung benötigt.
Ein <figure> muss mind. eine Abbildung beinhalten, es kann aber auch mehrere Objekte kennzeichen.
Als Legende, Bildunterschrift oder begleitenden Text wird das <figcaption>-Element eingesetzt. Es darf nur einmal innerhalb von <figure> vorkommen. <figure> können ineinander verschachtelt werden.
<figure>
<img src="regenwald.jpg" alt="Dichter, grüner Regenwald mit Sonnenstrahlen, die durch die Blätter scheinen">
<figcaption>Der tropische Regenwald ist eines der artenreichsten Ökosysteme der Erde und spielt eine zentrale Rolle für das Klima.</figcaption>
</figure>
Wie weiter oben bereits gesehen, kann dieses Prinzip ebenso auf Videos, Audio, Diagramme oder Code-Beispiele angewendet werden, um Medieninhalte für alle Nutzer verständlich und zugänglich zu machen.
Barrierearmes Design: Ein kurzer Exkurs
Ein gutes Design muss nicht nur ästhetisch ansprechend, sondern auch für alle Nutzer gut lesbar sein. Ein entscheidender Faktor dabei ist der Kontrast zwischen Vorder- und Hintergrundfarben, insbesondere bei Texten. Die Web Content Accessibility Guidelines (WCAG) empfehlen ein Mindestkontrastverhältnis von 4,5:1 für normalen Fließtext und 3:1 für größere Schriftgrößen. Dadurch wird sichergestellt, dass auch Menschen mit Sehbeeinträchtigungen oder Farbsehschwächen Inhalte gut erkennen können.
Neben dem Kontrast spielt auch die Schriftwahl eine wichtige Rolle. Serifenlose, gut lesbare Schriften wie Arial, Roboto oder Open Sans sind für viele Nutzer angenehmer zu erfassen. Eine ausreichende Schriftgröße – mindestens 16px für Fließtext – verbessert die Lesbarkeit zusätzlich. Darüber hinaus sollten Nutzer die Möglichkeit haben, die Schriftgröße ohne Verlust der Funktionalität zu vergrößern.
Durch die Kombination aus hohem Kontrast, gut lesbaren Schriften und flexibler Skalierbarkeit wird sichergestellt, dass Inhalte für möglichst viele Menschen zugänglich sind – unabhängig von ihren individuellen Sehfähigkeiten oder technischen Einschränkungen.
Analyse und Prüfung
Wie barrierearm ist meine Website oder mein Shop im Moment? Vor dem Hintergrund der genannten Maßnahmen können wir uns jetzt die Frage stellen, wie wir den eigenen Auftritt auf Barrierefreiheit testen können. Ein erster möglicher Anlaufpunkt ist der Check der wichtigsten Seiten. Mit Validatoren auf HTML-Fehler oder Online-Checks für Barrierfreiheit lassen sich die eigenen Angebote kostenfrei überprüfen. Weitere Tools, die auch kostenpflichtig sein können, gibt es im deutschsprachigen Raum. In der folgende Übersicht sind einige nützliche Dienste zu finden:
Tools und Checks
- HTML Validator vom W3C: https://validator.w3.org
- Web Content Accessibility Guidelines (WCAG) vom W3C: https://www.w3.org/TR/WCAG21/
- Wie barrierefrei ist meine Website? von Aktion Mensch: https://www.aktion-mensch.de/inklusion/barrierefreiheit/barrierefreie-website/wie-barrierefrei-ist-meine-website-test
- WAVE Web Accessibility Evaluation Tools der Utah State University: https://wave.webaim.org
- BIK BITV-Test der DIAS GmbH: https://bitvtest.de/pruefverfahren/bitv-20-web
Zusammenfassung
Eine barrierefreie Website zu erstellen, bedeutet mehr als nur Richtlinien zu erfüllen – es geht darum, eine digitale Umgebung zu schaffen, die für alle Menschen nutzbar ist. Durch den gezielten Einsatz semantischer HTML-Elemente, zugänglicher Medien und klarer Strukturen lassen sich viele Hürden bereits in der Entwicklung vermeiden.
Doch Barrierefreiheit endet nicht mit dem Launch einer Website. Regelmäßige Tests, Nutzerfeedback und technische Anpassungen helfen dabei, die Zugänglichkeit kontinuierlich zu verbessern. Wer Barrierefreiheit als festen Bestandteil der Webentwicklung betrachtet, schafft nicht nur eine inklusive, sondern auch eine zukunftssichere Website.