Bar­rie­re­frei­heit im Internet ge­währ­leis­tet, dass Nut­ze­rin­nen und Nutzer mit un­ter­schied­lichs­ten Ein­schrän­kun­gen und Be­dürf­nis­sen Web­an­ge­bo­te un­ein­ge­schränkt und ohne fremde Hilfe nutzen können. Der Zweck einer bar­rie­re­frei­en Website ist folglich, die Aus­gren­zung be­stimm­ter Per­so­nen­grup­pen im Netz – zum Beispiel von Menschen mit kör­per­li­chen oder geistigen Ein­schrän­kun­gen – zu ver­hin­dern.

KI-Lösungen
Mehr Digital-Power dank Künst­li­cher In­tel­li­genz
  • In Sekunden zur Online-Präsenz
  • Mehr Wachstum mit KI-Marketing
  • Zeit und Res­sour­cen sparen

Was ist Bar­rie­re­frei­heit im Internet?

Bar­rie­re­frei­heit im Internet zielt darauf ab, allen Per­so­nen­grup­pen glei­cher­ma­ßen Teilhabe an Web­in­hal­ten zu er­mög­li­chen. Das bedeutet, alle Menschen können das Web­an­ge­bot glei­cher­ma­ßen nutzen, ohne aufgrund von Ein­schrän­kun­gen von be­stimm­ten Inhalten oder Medien aus­ge­schlos­sen zu werden. Im Rahmen von digitaler Inklusion sind bar­rie­re­freie Web­prä­sen­zen ein wichtiger Faktor, dem sich Un­ter­neh­men bewusst sein sollten. Nicht zuletzt haben bar­rie­re­freie Websites auch einen positiven Einfluss auf die Such­ma­schi­nen­op­ti­mie­rung.

Barrieren sind Hin­der­nis­se, die die gleich­be­rech­tig­te Nutzung digitaler Angebote er­schwe­ren oder ver­hin­dern. Während das Be­wusst­sein für Bar­rie­re­frei­heit im öf­fent­li­chen Raum in den ver­gan­ge­nen Jahren deutlich gewachsen ist, entstehen Barrieren im Internet weiterhin häufig un­be­ab­sich­tigt, etwa durch tech­ni­sche, ge­stal­te­ri­sche oder in­halt­li­che Ent­schei­dun­gen. Studien und Pra­xis­bei­spie­le zeigen, dass ins­be­son­de­re in­ter­ak­ti­ve Elemente wie Anmelde- oder Si­cher­heits­me­cha­nis­men pro­ble­ma­tisch sein können. So er­schwe­ren bestimmte Captchas mit ver­zerr­ten Zeichen oder rein visuellen Bild­auf­ga­ben Menschen mit Seh­be­ein­träch­ti­gun­gen den Zugang zu Web­in­hal­ten erheblich und stehen damit modernen An­for­de­run­gen an digitale Bar­rie­re­frei­heit entgegen.

Standards für bar­rie­re­freie Websites

Der wohl wich­tigs­te Standard für die Er­stel­lung bar­rie­re­frei­er Web­prä­sen­zen sind die WCAG bzw. die WCAG 2.2 (Web Content Ac­ces­si­bi­li­ty Gui­de­lines). Hierbei handelt es sich um Richt­li­ni­en des W3C, die den ak­tu­ells­ten in­ter­na­tio­na­len Re­fe­renz­stan­dard für bar­rie­re­freie Websites dar­stel­len. Im Fokus der WCAG 2.2 stehen vor allem die ver­bes­ser­te Be­dien­bar­keit, eine klarere Tastatur- und Fo­kus­füh­rung sowie eine ver­ein­fach­te In­ter­ak­ti­on auf mobilen End­ge­rä­ten. Damit reagieren die Richt­li­ni­en auf ver­än­der­te Nut­zungs­ge­wohn­hei­ten und auf bislang un­zu­rei­chend ab­ge­deck­te Barrieren.

Zu den wich­tigs­ten Er­folgs­kri­te­ri­en der WCAG 2.2 zählen unter anderem:

  • Sicht­ba­rer Tas­ta­tur­fo­kus: In­ter­ak­ti­ve Elemente müssen beim Na­vi­gie­ren per Tastatur klar erkennbar sein.
  • Min­dest­grö­ße von Be­dien­ele­men­ten: Klick- und Touch­flä­chen müssen aus­rei­chend groß sein, um Fehl­be­die­nun­gen zu vermeiden.
  • Al­ter­na­ti­ven zu Zieh­be­we­gun­gen: Funk­tio­nen dürfen nicht aus­schließ­lich per Drag-and-Drop bedienbar sein.
  • Ver­mei­dung red­un­dan­ter Eingaben: In­for­ma­tio­nen sollen nicht mehrfach ein­ge­ge­ben werden müssen.
  • Bar­rie­re­freie Au­then­ti­fi­zie­rung: An­mel­de­ver­fah­ren dürfen nicht auf schwer lösbaren ko­gni­ti­ven Aufgaben wie be­stimm­ten Captchas beruhen.

Die WCAG 2.2 sind damit ein zentraler Maßstab für moderne Web­ent­wick­lung und bilden zugleich die tech­ni­sche Grundlage für ge­setz­li­che An­for­de­run­gen, etwa im Rahmen des Bar­rie­re­frei­heits­stär­kungs­ge­set­zes (BFSG).

Hinweis

Das Bar­rie­re­frei­heits­stär­kungs­ge­setz (BFSG) gilt seit Ende Juni 2025 auch in Deutsch­land und bringt konkrete Pflichten, Fristen und Ausnahmen mit sich. In­for­mie­ren Sie sich darüber, welche Websites genau betroffen sind, welche An­for­de­run­gen gelten und wie Un­ter­neh­men die Umsetzung planen können.

Bar­rie­re­frei­heits-Faktor Maßnahme Haupt­ziel­grup­pe
Wahr­neh­mung Inhalte auch ohne visuelle oder akus­ti­sche Reize zu­gäng­lich machen, z. B. durch Al­ter­na­tiv­tex­te, aus­rei­chen­de Kontraste, Un­ter­ti­tel und Verzicht auf störende Hin­ter­grund­mu­sik Menschen mit Seh­be­hin­de­run­gen, Farb­fehl­sich­tig­keit, Gehörlose, Se­nio­rin­nen und Senioren
Ver­ständ­nis Klare Sprache verwenden, Fach­be­grif­fe erklären, Ab­kür­zun­gen vermeiden und in­halt­lich zu­sam­men­ge­hö­ri­ge In­for­ma­tio­nen logisch struk­tu­rie­ren Menschen mit ko­gni­ti­ven Ein­schrän­kun­gen, ältere Nutzende, un­er­fah­re­ne User
Na­vi­ga­ti­on Über­sicht­li­che Sei­ten­struk­tur, klare Menüs, kon­sis­ten­te Ori­en­tie­rungs­hil­fen und ver­ständ­li­che Sei­ten­hier­ar­chien be­reit­stel­len Screen­rea­der-Nutzende, Menschen mit Seh- oder ko­gni­ti­ven Ein­schrän­kun­gen
In­ter­ak­ti­on Bedienung per Tastatur und Un­ter­stüt­zungs­tech­no­lo­gien er­mög­li­chen, aus­rei­chend große Klick- und Touch­flä­chen nutzen und ver­ständ­li­che Feh­ler­mel­dun­gen ausgeben Menschen mit mo­to­ri­schen Ein­schrän­kun­gen, mobile Nutzende, Se­nio­rin­nen und Senioren
Eingaben Ein­ga­be­for­mu­la­re bar­rie­re­frei gestalten, Felder klar zuordnen und Elemente räumlich nah anordnen, um das Verfassen von Beiträgen zu er­leich­tern Menschen mit Seh­be­hin­de­run­gen, Nutzende mit Bild­schirm­lu­pe oder as­sis­ti­ven Tech­no­lo­gien

Wahr­neh­mung

Viele Websites be­inhal­ten blinkende Anzeigen, die Kom­men­tar­spal­ten sind mit Text geringer Schrift­grö­ße gefüllt und mitunter ertönt sogar Hin­ter­grund­mu­sik, die Stimmung oder Thema der Seite un­ter­strei­chen soll. Je nach Art und Grad der Ein­schrän­kung nehmen einige Be­su­chen­de Ihrer Website diese Elemente jedoch nicht voll­stän­dig oder gar nicht wahr.

Blinde Menschen na­vi­gie­ren bei­spiels­wei­se ohne visuelle Reize durch das Internet. Statt­des­sen liest ein Screen­rea­der die Website aus. Das Gerät über­mit­telt die lesbaren Daten an ein­ge­setz­te Un­ter­stüt­zungs­tech­no­lo­gien. Eine Braille­zei­le zum Beispiel kann den Text in Blin­den­schrift umwandeln. So nimmt die Person Ihre Website über den Tastsinn wahr. Ein Text-to-Speech-Tool gibt die Inhalte im Au­dio­for­mat wieder. Mit dieser Tech­no­lo­gie nutzen Userinnen und User ihr Gehör, um Website-Inhalte zu ver­ar­bei­ten. Im gerade an­ge­führ­ten Beispiel stört dann al­ler­dings die Hin­ter­grund­mu­sik.

Menschen mit einer weniger starken Seh­be­hin­de­rung, dazu zählen auch viele Se­nio­rin­nen und Senioren, erfassen den Inhalt Ihrer Website zwar mit den Augen, sind aber auf ein stark ver­grö­ßer­tes Bild an­ge­wie­sen. Menschen mit Farb­fehl­sich­tig­keit hingegen erkennen Warn­hin­wei­se nicht, die lediglich durch Farbe aus­ge­drückt werden. Gehörlose Menschen auf der anderen Seite nehmen die In­for­ma­tio­nen einer reinen Audio-Datei und einen großen Teil der Video-Dateien nicht wahr.

Ver­ständ­nis

Sehr junge Nutzende, Se­nio­rin­nen und Senioren oder Menschen mit ko­gni­ti­ven Be­ein­träch­ti­gun­gen haben mitunter Schwie­rig­kei­ten mit dem Ver­ständ­nis eines Texts voller moderner Fach­be­grif­fe oder un­er­klär­ter Ab­kür­zun­gen. Auch wenn die Website Inhalte, die the­ma­tisch zu­sam­men­ge­hö­ren, weit entfernt von­ein­an­der darstellt, erschwert das vielen Menschen, den Zu­sam­men­hang zu erkennen.

In­ter­ak­ti­on und Na­vi­ga­ti­on

Da in­zwi­schen immer mehr Menschen Websites via Smart­phone besuchen, ist es für sie äußerst ärgerlich, wenn sich die Links nicht präzise mit dem Finger auswählen lassen. Ist die Website nicht für Smart­phones optimiert und liegen Links in geringer Schrift­grö­ße dicht bei­ein­an­der, ist das auch für ältere Menschen mit zit­tern­den Händen sehr un­prak­tisch.

Für Menschen mit kör­per­li­cher Be­hin­de­rung wurden in­zwi­schen al­ler­dings zahl­rei­che Tools ent­wi­ckelt, mit denen sie Computer leichter bedienen können: Zu diesem Zweck erfassen einige Tools die Au­gen­be­we­gun­gen, während andere Tech­no­lo­gien über die Tastatur genutzt werden. Prin­zi­pi­ell sollte eine bar­rie­re­freie Website so gestaltet sein, dass sie sich über solche un­ter­stüt­zen­den Tech­no­lo­gien auswerten lässt: Ist Ihre In­ter­net­prä­senz damit nicht na­vi­gier­bar, haben po­ten­zi­el­le Kundinnen und Kunden, die darauf an­ge­wie­sen sind, keine Chance, Ihr gesamtes Angebot zu nutzen.

Sollen Userinnen und User ein Formular ausfüllen, etwa zur News­let­ter-Anmeldung, kommt es dabei nicht selten zu Fehlern. Das Passwort ist zu kurz oder das Ge­burts­da­tum passt nicht in die vor­ge­ge­be­nen Parameter. For­mu­lie­ren Sie daher klare Hinweise zur Feh­ler­be­he­bung. Die In­ter­ak­ti­on mit einer Website umfasst auch die Na­vi­ga­ti­on. Personen, die Geräte mit kleinem Display nutzen oder mit starker Bild­schirm­ver­grö­ße­rung arbeiten, brauchen darauf an­ge­pass­te Na­vi­ga­ti­ons­we­ge und sind auf eine über­sicht­li­che Struktur der Website an­ge­wie­sen.

Eingaben

Kom­men­tar­spal­ten er­mög­li­chen Nutzenden, Feedback zu geben. Über sie können sie ihre Meinung zu einem Produkt oder Inhalten kundtun oder sich mit anderen Personen aus­tau­schen. Menschen mit Seh­be­hin­de­rung nutzen beim Schreiben am Monitor oft eine Bild­schirm­lu­pe. Damit er­schei­nen die Elemente deutlich größer und der Abstand zwischen Le­se­spal­te und Ein­ga­be­feld wächst. Ar­ran­gie­ren Sie die Elemente daher optisch dicht bei­ein­an­der und er­leich­tern Sie Ihren Nutzenden so den Austausch.

Profi-Website in Sekunden dank KI.
  • Profi-Website in Sekunden dank KI
  • Aus tausenden Vorlagen auswählen
  • 30 Tage kostenlos testen

Welche Vorteile bietet bar­rie­re­frei­es Webdesign?

Wenn Sie online Barrieren abbauen, ver­bes­sert das die Usability Ihrer Website und somit auch Ihr Google-Ranking. Bar­rie­re­frei­es Webdesign lohnt sich daher auch wirt­schaft­lich und erfordert einen nur geringen Mehr­auf­wand. Zudem erfüllen bar­rie­re­freie Webseiten sowohl EU-Richt­li­ni­en, darunter der European Ac­ces­si­bi­li­ty Act (EAA), als auch deutsches Recht. Ein ebenfalls nicht un­we­sent­li­cher Faktor für Un­ter­neh­men: Bar­rie­re­freie Websites erreichen einen größeren Kun­den­kreis, da sie mehr Menschen zu­gäng­lich sind als nicht bar­rie­re­freie Seiten.

Website bar­rie­re­frei gestalten: Tipps und Beispiele

Wer eine bar­rie­re­freie Website errichten möchte, sollte ins­be­son­de­re einen Blick auf die In­for­ma­ti­ons­struk­tur sowie auf ver­schie­de­ne visuelle Kom­po­nen­ten der Web­prä­senz werfen.

Schritt 1: Für eine klare In­for­ma­ti­ons­struk­tur sorgen

Struk­tu­rie­ren Sie Ihre Website über­sicht­lich und verwenden Sie nut­zer­freund­li­che Sprache. Damit ziehen Sie mehr Lesende an und ver­bes­sern gleich­zei­tig Ihr Google-Ranking (denn die Such­ma­schi­nen werten auch die Les­bar­keit von Texten aus). Wollen Sie weiterhin für gutes SEO sorgen und die Ar­chi­tek­tur Ihrer Website nach­voll­zieh­bar und über­sicht­lich gestalten, dann achten Sie auch auf folgende Elemente:

Element in der Website-Ar­chi­tek­tur Be­grün­dung
Klare Benennung von URLs und Inhalten Die Aus­rich­tung und das grund­le­gen­de Thema der Website sind auf jeder Un­ter­sei­te eindeutig erkennbar, was Ori­en­tie­rung und Ver­ständ­nis er­leich­tert.
Nach­voll­zieh­ba­re Struktur Nutzende erkennen jederzeit, an welcher Stelle der Website sie sich befinden, und können Inhalte gezielt einordnen.
Flache Hier­ar­chien Inhalte sind mit wenigen Klicks er­reich­bar, was die Na­vi­ga­ti­on ver­ein­facht und die Nutzung ef­fi­zi­en­ter macht.
Trennung von Layout und Inhalt Durch den Einsatz von CSS bleibt der Inhalt struk­tu­riert und für Screen­rea­der sowie andere Un­ter­stüt­zungs­tech­no­lo­gien besser aus­wert­bar.
Ka­te­go­rien mit nut­zer­freund­li­chem Aufbau Un­ter­sei­ten stehen in einer logisch nach­voll­zieh­ba­ren se­man­ti­schen Beziehung zur über­ge­ord­ne­ten Seite.
Web­ge­rech­te Dar­stel­lung aller Inhalte Inhalte sind für die Dar­stel­lung im Web optimiert und un­ab­hän­gig von Endgerät oder Browser gut nutzbar.
Nut­zer­freund­li­che Sprache For­mu­lie­run­gen sind leicht ver­ständ­lich, Fach­be­grif­fe werden erklärt und unnötige Kom­ple­xi­tät wird vermieden.
Zentrale Website-Bereiche jederzeit er­reich­bar Bereiche wie Kontakt, Impressum, Suchfeld oder Start­sei­te sind von jeder Un­ter­sei­te mit einem Klick zu­gäng­lich.
Kon­sis­ten­te Na­vi­ga­ti­ons­ele­men­te Na­vi­ga­ti­ons­ele­men­te sind klar erkennbar und auf allen Seiten ein­heit­lich aufgebaut.
Sitemap und FAQ bei größeren Web­prä­sen­zen Eine Sitemap und ein FAQ er­leich­tern die Ori­en­tie­rung und den schnellen Zugriff auf relevante In­for­ma­tio­nen.
Ska­lier­ba­re Schriften und an­pas­sungs­fä­hi­ges Layout Inhalte lassen sich auf un­ter­schied­li­chen End­ge­rä­ten gut dar­stel­len und sind mit Un­ter­stüt­zungs­tech­no­lo­gien kom­pa­ti­bel.
Be­dien­bar­keit mit Maus und Tastatur Die Website ist voll­stän­dig ohne Maus nutzbar und un­ter­stützt al­ter­na­ti­ve Ein­ga­be­me­tho­den.
Al­ter­na­tiv­tex­te für Bilder Al­ter­na­tiv­tex­te er­mög­li­chen Screen­rea­dern und Such­ma­schi­nen die Erfassung von Bild­in­hal­ten und stellen In­for­ma­tio­nen bar­rie­re­frei bereit.
Impressum erstellen
Kos­ten­lo­ser Impressum-Generator
  • Mit einfacher Anleitung
  • In wenigen Schritten zum in­di­vi­du­el­len Impressum
  • Keine ju­ris­ti­schen Vor­kennt­nis­se nötig

Schritt 2: Visuelle Reize setzen

Wenn Sie Schriften ver­grö­ßern oder farblich ändern können, hilft das Menschen mit Seh­schwä­che oder Farb­fehl­sich­tig­keit, Website-Inhalte besser zu erkennen. Der Inhalt sollte sich farblich gut vom Hin­ter­grund abheben, damit er sich möglichst leicht lesen lässt. Heben Sie in­ter­ak­ti­ve Elemente durch Buttons oder farbliche Mar­kie­rung hervor. Zum Beispiel, indem ein Link die Farbe ändert, wenn Nutzende mit der Tastatur darauf na­vi­gie­ren, die Maus darüber halten oder ihn anklicken. Nutzen Sie neben Farben aber unbedingt auch weitere Hin­weis­si­gna­le wie Nummern oder Sternchen, um In­for­ma­tio­nen zu ver­mit­teln.

Bild: Design-Beispiel: Farben und Informationen
Bar­rie­re­frei­es Design-Beispiel für den richtigen Umgang mit Farben und In­for­ma­tio­nen: Rich­ti­ger­wei­se werden farblich mar­kier­ten Inhalten auch Zahlen und Sternchen hin­zu­ge­fügt; Quelle: https://www.w3.org/WAI/get­ting­star­ted/tips/designing

Personen, die unter epi­lep­ti­schen Anfällen leiden, sind gefährdet, wenn eine Website Grafiken oder Videos enthält, die in einer Sekunde mehr als dreimal auf­fla­ckern. Wis­sen­schaft­le­rin­nen und Wis­sen­schaft­ler haben zudem fest­ge­stellt, dass scharf kon­tu­rier­te Git­ter­mus­ter mit hohem Kontrast bei Personen mit fo­to­sen­si­bler Epilepsie ebenfalls Anfälle auslösen können.

Problem Bar­rie­re­freie Maßnahme Pro­fi­tiert besonders
Geringer Farb­kon­trast Kon­trast­rei­che Farb­sche­ma­ta Menschen mit Seh­schwä­che
Blinkende Inhalte Verzicht oder Be­gren­zung Menschen mit Epilepsie
Kleine Schrift­grö­ßen Ska­lier­ba­re Schrift­ar­ten Se­nio­rin­nen und Senioren

Schritt 3: In­for­ma­tio­nen viel­fäl­tig auf­be­rei­ten

Be­rück­sich­ti­gen Sie bar­rie­re­frei­es Webdesign auch im täglichen Ablauf. Für die Such­ma­schi­nen­op­ti­mie­rung, zu PR-Zwecken oder um neue Ver­kaufs­an­ge­bo­te zu prä­sen­tie­ren, laden Sie schließ­lich tag­täg­lich neuen Content hoch. Er­leich­tern Sie Be­su­chen­den den Zugriff darauf, indem Sie die In­for­ma­tio­nen auf deren Be­dürf­nis­se abstimmen.

Ein grund­le­gen­der Be­stand­teil der bar­rie­re­frei­en Website, der auch bei der Such­ma­schi­nen­op­ti­mie­rung eine Rolle spielt, ist die Vergabe des Al­ter­na­tiv­texts für Bilder. Crawler und Screen­rea­der können Bild­in­hal­te nicht auswerten – das gilt ebenso für blinde Nutzende. Der Al­ter­na­tiv­text in­for­miert daher über den Inhalt des Bildes. Aber auch Be­su­chen­de mit schlech­ter In­ter­net­ver­bin­dung, aufgrund derer Bilder langsam oder gar nicht laden, pro­fi­tie­ren von Alt-Texten.

Medientyp Bar­rie­re­freie Ergänzung Ziel­grup­pe
Bilder Al­ter­na­tiv­tex­te Screen­rea­der-User
Videos Un­ter­ti­tel, Au­dio­deskrip­ti­on Gehörlose, Seh­be­ein­träch­tig­te
Audio Tran­skrip­te Gehörlose

Tran­skrip­te und Un­ter­ti­tel

Ein um­fang­rei­che­res Un­ter­fan­gen ist die kon­ti­nu­ier­li­che und zeitnahe Er­stel­lung von Tran­skrip­ten und Un­ter­ti­teln. Mit diesen Hilfs­mit­teln können Sie die In­for­ma­tio­nen von Audio-Content für Gehörlose auf­be­rei­ten. Das Tran­skript, das Ge­spro­che­nes sowie Klänge und Geräusche in Textform wie­der­gibt, plat­zie­ren Sie zu diesem Zweck möglichst nah am je­wei­li­gen Audio-Content – zum Beispiel durch einen Button mit Link zum Dokument.

Un­ter­ti­tel er­leich­tern Menschen ohne Gehör das Ver­ständ­nis von Webvideos ganz erheblich. Auch Nutzende, die die Sound-Wie­der­ga­be nicht nutzen möchten (bei­spiels­wei­se, weil sie ihr Umfeld nicht mit Lärm be­läs­ti­gen wollen), pro­fi­tie­ren von dieser Funktion. Menschen mit ko­gni­ti­ven Be­ein­träch­ti­gun­gen oder Ver­hal­tens­stö­run­gen wie ADHS nehmen ähnlich wie Menschen mit Hör­schä­den In­for­ma­tio­nen, die über Videos ver­mit­telt werden, besser auf, wenn sie Hin­ter­grund­ge­räu­sche mithilfe einer Vi­deo­play­er-Ein­stel­lung aus­schal­ten können.

Au­dio­er­klä­rung

Menschen mit einer Seh­schär­fe von weniger als 30 Prozent gelten als seh­be­ein­träch­tigt, bei einer Seh­schär­fe von weniger als zwei Prozent sogar als blind. Visuelle Reize nehmen sie nur bedingt oder gar nicht wahr. Damit diese Menschen ihren Video-Content verstehen können, sollten Sie diesen mit einer zu­sätz­li­chen Audiospur ergänzen. Über diese liefern Sie Er­klä­run­gen zu visuellen Kom­po­nen­ten wie Land­schaf­ten oder Personen und be­schrei­ben kurz sichtbare Hand­lun­gen. Plat­zie­ren Sie solche Er­klä­run­gen in die Gesprächs- und Tonpausen der Original-Au­dio­auf­nah­me, damit die Tonspuren sich nicht über­schnei­den.

Leichte Sprache

Leichte Sprache drückt Inhalte sehr simpel aus. Sie hilft Menschen mit ko­gni­ti­ven Be­hin­de­run­gen, komplexe Sach­ver­hal­te besser zu verstehen. Leichte Sprache ver­zich­tet zum Beispiel auf den Kon­junk­tiv, Synonyme und Ver­nei­nun­gen. Sätze in leichter Sprache sind kurz und haben nur jeweils eine in­halt­li­che Aussage. Menschen mit ko­gni­ti­ven Ein­schrän­kun­gen haben das gleiche Recht auf In­for­ma­ti­on wie alle anderen auch. Deshalb stellen Ta­ges­zei­tun­gen auf ihren Online-Platt­for­men als gutes Beispiel für bar­rie­re­freie Websites zunehmend Versionen ihrer Artikel in leichter Sprache bereit. Auch öf­fent­li­che Ein­rich­tun­gen nutzen vermehrt leichte Sprache für In­for­ma­ti­ons­tex­te.

Eine weniger strenge Form ist die so­ge­nann­te einfache Sprache, die etwa dem Sprach­ni­veau A2 oder B1 ent­spricht.

Schritt 4: Website kom­pa­ti­bel machen

Screen­rea­der und andere Un­ter­stüt­zungs­tech­no­lo­gien machen Bar­rie­re­frei­heit im Internet für viele erst möglich. Die Programme arbeiten Web­do­ku­men­te von links nach rechts und von oben nach unten voll­stän­dig ab. Sie arbeiten streng linear. Deshalb sollten Sie Layout und Design von­ein­an­der trennen. An­dern­falls arbeiten die Screen­rea­der die Seite falsch auf. Tragen Sie dazu bei, dass Nutzende auf Ihrer Website effizient na­vi­gie­ren können, indem Sie die nach­fol­gen­den Grund­re­geln beachten.

Screen­rea­der über­mit­teln Text­in­for­ma­tio­nen an Sprach­aus­ga­be-Software und Braille­zei­len. Dafür lesen sie die Seite von oben bis unten aus – das be­inhal­tet auch wie­der­keh­ren­de Elemente wie die Na­vi­ga­ti­ons­leis­te, Icons oder Links zu un­ter­ge­ord­ne­ten Seiten. Damit die Reader diese In­for­ma­ti­on nicht bei jeder ge­öff­ne­ten Seite unnötig wie­der­ho­len, sollten Sie Skip-Na­vi­ga­ti­on-Links (kurz: Skip-Links) einbauen.

Auch Nutzende, die nur mit der Tastatur na­vi­gie­ren, mög­li­cher­wei­se mit einem Mundstück, haben große Mühe, wenn sie sich durch etliche Elemente klicken müssen. Diese Menschen pro­fi­tie­ren von einem Skip-Link am Sei­ten­an­fang, der möglichst gut sichtbar ist:

<a href="#content">Navigation überspringen</a>
<main id="content">
    <h1>Hauptüberschrift</h1>
    <p>Erster Absatz</p>
</main>
html

Es gibt Skip-Links, die im Layout un­sicht­bar sind, doch der Screen­rea­der über­mit­telt dem Nutzenden die Nachricht des Al­ter­na­tiv­texts „Na­vi­ga­ti­on über­sprin­gen“, wenn der Code wie folgt aussieht:

<a href="#content"><img src="empty.gif" height="15" border="0" alt="Navigation überspringen" width="5"></a>
html

Es ist wichtig, dass Skip-Links möglichst weit vorne im Code stehen. Den Ankertext setzen Sie am Anfang des Haupt­in­halts:

<div id="content"></div>
html

Setzen Sie Skip-Links sparsam ein, da eine Häufung den positiven Effekt wieder zu­nich­te­macht und dazu führt, dass Nutzende sich durch zu viele Elemente klicken müssen. Eine ele­gan­te­re Lösung ist die Ver­wen­dung von ARIA-Landmarks und eine gute Struk­tu­rie­rung des Dokuments. Es ist emp­feh­lens­wert, HTML5-Elemente zu verwenden.

Eine weitere Hilfe wäre ein In­halts­ver­zeich­nis am Anfang des Dokuments, das Nutzende via Inpage-Links zu den je­wei­li­gen Ab­schnit­ten wei­ter­lei­tet. Moderne Screen­rea­der lesen die ent­spre­chen­den Über­schrif­ten vor. Wenn Sie mit aus­sa­ge­kräf­ti­gen, gut struk­tu­rier­ten Über­schrif­ten arbeiten, erhöhen Sie deshalb die Les­bar­keit sowohl für Such­ma­schi­nen als auch für Un­ter­stüt­zungs­tech­no­lo­gien.

Da­ten­ta­bel­len statt Layout-Tabellen

Für bar­rie­re­freie Webseiten nach W3C-Richt­li­ni­en nutzen Sie idea­ler­wei­se nur Da­ten­ta­bel­len. Screen­rea­der haben mit diesem Format weniger Probleme, die In­for­ma­tio­nen nach der Um­wand­lung sinnvoll wie­der­zu­ge­ben. Layout-Tabellen hingegen geben der Seite eine optische Struktur, er­schwe­ren Screen­rea­dern aber, den Inhalt ver­ständ­lich wie­der­zu­ge­ben.

De­fi­nie­ren Sie Layout-Tabellen lediglich mit einfachen Elementen: TABLE, TR, und TD (jeweils: Tabelle, Reihe und Zelle). Setzen Sie struk­tu­rie­ren­de Elemente ein, um Ver­knüp­fun­gen von Zellen logisch zu gestalten, dann liest der Screen­rea­der die Layout-Tabelle wie eine Da­ten­ta­bel­le. Sie wirken dem direkt entgegen, wenn Sie dazu bestimmte Ta­bel­len­ele­men­te aus dem Ac­ces­si­bi­li­ty-Tree entfernen.

Für Ihre bar­rie­re­freie Website nutzen Sie wie im Beispiel den Code role="none". Dieser gilt für die Tabelle und deren Kin­der­ele­men­te. Wenn Sie Tabellen in Tabellen packen, müssen Sie beide Elemente damit de­fi­nie­ren.

<table role="none">
<tr>
<td>
<table role="none">
<tr>
<td>
Textbeispiel <abbr title="beispielsweise">bspw.</abbr> über ARIA
</td>
</tr>
</table>
</td>
</tr>
</table>
html

Bar­rie­re­freie Website: Check­lis­te

Wenn Sie die Er­stel­lung Ihrer Website ab­ge­schlos­sen haben, kann Ihnen ein Blick auf unsere Check­lis­te helfen, um si­cher­zu­ge­hen, dass Sie an die wichtigen Faktoren gedacht haben.

In­for­ma­ti­ons­struk­tur gut struk­tu­riert und nach­voll­zieh­bar

Ver­wen­dung einfacher und bar­rie­re­frei­er Sprache

Alt-Texte für Bilder

Video- und Au­dio­tran­skrip­te

Farbliche Mar­kie­run­gen wichtiger Inhalte

Kon­trast­reich­tum

Screen­rea­der-Un­ter­stüt­zung

Tipp

Es mag Sie nicht über­ra­schen, dass die Website des W3C ein Pa­ra­de­bei­spiel für eine bar­rie­re­freie Web­prä­senz ist. Sie be­inhal­tet die zentralen Elemente, die die Standards vorsehen:

  • Einfache Sprache
  • Klar struk­tu­rier­tes HTML
  • Indikator für die aktuell aus­ge­wähl­ten Elemente
  • Farb­kon­trast
  • Über­sicht­li­che und nach­voll­zieh­ba­re Glie­de­rung

Kos­ten­lo­se Tools für die Er­stel­lung bar­rie­re­frei­er Websites

Es gibt eine Reihe ver­schie­de­ner Werkzeuge, die Ihnen bei der Er­rich­tung einer bar­rie­re­frei­en Web­prä­senz unter die Arme greifen können. Im Folgenden prä­sen­tie­ren wir Ihnen einige der be­kann­tes­ten Hilfs­mit­tel:

  • Bar­rie­re­frei­heit-Test von EXPERTE.de: Test für Bar­rie­re­frei­heit im deutsch­spra­chi­gen Raum
  • Ac­ces­si­bi­li­ty Checker: Mithilfe der Webapp Ac­ces­si­bi­li­ty Checker können Sie Ihre Website auf WCAG-Kon­for­mi­tät im eng­lisch­spra­chi­gen Raum kostenlos testen.
  • Siteim­pro­ve: Der Ac­ces­si­bi­li­ty Checker von Siteim­pro­ve bietet einen kos­ten­lo­sen Check für Ihre Website, der Ihnen per E-Mail zu­ge­schickt wird.

Fazit: Digitale Bar­rie­re­frei­heit ver­bes­sert die UX für alle

Wenn Sie Ihre Website bar­rie­re­frei gestalten, erhöhen Sie die Usability und ver­bes­sern die User Ex­pe­ri­ence. Nutzende mit mobilen End­ge­rä­ten, Menschen mit kör­per­li­chen oder ko­gni­ti­ven Be­hin­de­run­gen, Se­nio­rin­nen und Senioren sowie un­er­fah­re­ne User finden sich auf Ihrer Website dadurch leichter zurecht. Wenn Sie Ihre Web­prä­senz klar struk­tu­rie­ren und In­for­ma­tio­nen inklusiv auf­be­rei­ten, ver­bes­sern Sie darüber hinaus Ihr Such­ma­schi­nen-Ranking und erhöhen die Ver­weil­dau­er. Ein gewisses Maß an Mehr­ar­beit und Tests sind dafür zwar er­for­der­lich, doch die Mühe lohnt sich: Web Ac­ces­si­bi­li­ty nutzt allen.

Zum Hauptmenü