Wie du die Barrierefreiheit deiner Website verbessern kannst

Vie­le Web­de­si­gner berück­sich­ti­gen bei der Web­site-Gestal­tung oft nicht die Bar­rie­re­frei­heit des neu­en Internetauftritts.

Was auch nicht wirk­lich ver­pflich­tend ist, denn pri­va­te und kom­mer­zi­el­le Web­sites müs­sen sich nicht an die Bar­rie­re­freie Infor­ma­ti­ons­tech­nik-Ver­ord­nung (BITV) hal­ten, im Gegen­satz zu den öffent­lich zugäng­li­chen Inter­net­an­ge­bo­ten von Behör­den der Bundesverwaltung.

Unter bar­rie­re­frei­en Inter­net­sei­ten sind Web­sites zu ver­ste­hen, die ihre digi­ta­len Inhal­te auch Men­schen mit Behin­de­run­gen zugäng­lich machen.

Fol­gen­de Behin­de­run­gen wir­ken sich nach­tei­lig auf die übli­che Nut­zung des Inter­nets aus:

• Blind­heit
• Star­ke Sehbehinderung
• Farb­fehl­sich­tig­keit
• Gehör­lo­sig­keit
• Schwer­hö­rig­keit
• Kör­per­be­hin­de­rung im Bereich der Hände
• Kogni­ti­ve Beeinträchtigung

Web­sites ohne Bar­rie­re­frei­heit machen es Men­schen mit Behin­de­rung nicht leicht, alle Inhal­te, sei­en es nun Tex­te, Gra­fi­ken, PDFs, Pod­casts oder Vide­os, abru­fen oder ver­ste­hen zu können.

Welche Barrieren existieren auf Websites?

Schwa­cher Farbkontrast

Falls Infor­ma­tio­nen über unter­schied­li­che Far­ben mit­ge­teilt wer­den, kann es vor­kom­men, dass für die Dar­stel­lung zu schwa­che Farb­kon­tras­te ver­wen­det wer­den. Dadurch kön­nen Men­schen mit einer Farb­fehl­sich­tig­keit die­se Infor­ma­ti­on nicht wahrnehmen.

So neh­men z. B. Men­schen mit einer Rot-Grün-Schwä­che ein rotes Detail auf einem Bild mit einem grü­nen Hin­ter­grund — je nach Detail­dar­stel­lung — so gut wie über­haupt nicht wahr.

Kei­ne Textalternativen

Bilder/​Fotos oder Vide­os ent­hal­ten in den meis­ten Fäl­len wich­ti­ge gra­fi­sche Infor­ma­tio­nen, die von blin­den oder seh­be­hin­der­ten Men­schen nicht erkannt wer­den können.

Das glei­che gilt für Audio-Datei­en, deren Infor­ma­tio­nen von schwer­hö­ri­gen oder gehör­lo­sen Men­schen nicht erfasst werden.

Momen­tan gibt es noch kei­ne unter­stüt­zen­de Tech­no­lo­gie, der es mög­lich ist, Bil­der oder (Audio-)Töne in Text umzuwandeln.

Kei­ne Skalierbarkeit

Stark seh­be­hin­der­te Men­schen kön­nen Inhal­te auf dem Bild­schirm oft nur erken­nen, wenn sie stark ver­grö­ßert wer­den. Ele­men­te oder Inhal­te, die sich nicht her­an zoo­men las­sen, wer­den von die­sem Per­so­nen­kreis kaum wahrgenommen.

Feh­len­de Tastaturbedienung

Inter­ak­ti­ve Ele­men­te oder dyna­mi­sche Navi­ga­tio­nen, die sich nur mit der Maus opti­mal bedie­nen las­sen, sind für Men­schen mit moto­ri­schen Ein­schrän­kun­gen oder Blin­de oft nicht zugäng­lich, da die­se Per­so­nen­grup­pe kei­ne Maus als Steue­rungs- und Bedie­nungs­werk­zeug ver­wen­den kann.

Kei­ne Semantik

Eben­falls eine wesent­li­che Bar­rie­re auf Web­sites ist die feh­len­de Seman­tik von Infor­ma­tio­nen. So wer­den Über­schrif­ten recht häu­fig nicht als sol­che aus­ge­zeich­net oder infor­ma­ti­ons­hal­ti­ge Bil­der wer­den ohne Alter­na­tiv­text in die Web­sei­te eingebunden.

Da stark seh­be­hin­der­te oder blin­de Men­schen für das “Lesen” von Inter­net­sei­ten einen Screen­rea­der ein­set­zen, kann die­ser bei fal­schen bzw. feh­len­den Aus­zeich­nun­gen kei­nen seman­ti­schen Zusam­men­hang über­mit­teln, was zu einem ent­schei­den­den Infor­ma­ti­ons­ver­lust führt.

Kom­ple­xe Inhalte
Men­schen mit einer kogni­ti­ven Behin­de­rung, aber auch gehör­lo­se Men­schen haben Schwie­rig­kei­ten beim Ver­ste­hen von kom­ple­xen Inhal­ten. Zu kom­ple­xen Inhal­ten gehö­ren u. a. lan­ge, ver­schach­tel­te Sät­ze, mit Infor­ma­tio­nen über­frach­te­te Web­sites und auch kom­ple­xe Interaktionen.

So beseitigst du die wichtigsten Barrieren auf deiner Website

Die meis­ten der oben genann­ten Bar­rie­ren kannst du recht schnell besei­ti­gen, ob du nun eine kos­ten­lo­se Home­page mit einem Web­bau­kas­ten oder mit dem Con­tent-Manage­ment-Sys­tem Word­Press erstellt hast.

Als Bei­spiel sei hier der Home­page­bau­kas­ten von Wix genannt, mit dem du die aller­meis­ten Bar­rie­ren besei­ti­gen kannst.

Bil­der mit Alt-Texten:
So las­sen sich Bil­der bar­rie­re­frei in die Web­site ein­bin­den, indem du den Gra­fi­ken oder Fotos einen Alt-Text hin­zu­fügst. Ein Screen­rea­der wird die­sen Text dann vor­le­sen, sodass der seh­be­hin­der­te oder blin­de Web­site­be­su­cher weiß, wel­che Infor­ma­tio­nen mit dem jewei­li­gen Bild, das er nicht sehen kann, ver­bun­den sind.

Wenn du bei Wix ein Bild in die Web­site ein­fügst, fin­dest du die Opti­on “Alt-Text” unter dem Punkt Ein­stel­lun­gen. Die Bild­be­schrei­bung soll­te das ein­ge­füg­te Bild knapp und ver­ständ­lich erläutern.

Screen­shot: Alt-Text bei Bil­dern im Home­page­bau­kas­ten von Wix einfügen

Tex­te seman­tisch gliedern:
Damit für den Screen­rea­der deut­lich wird, was Fließ­text und was Über­schrif­ten sind, soll­test du den Über­schrif­ten ein fest defi­nier­tes Über­schrif­ten­for­mat zuwei­sen. In HTML gibt es sechs For­ma­te, von H1 bis H6. Jede Inhalts­sei­te soll­te nur eine H1-Über­schrift besit­zen, alle ande­ren For­ma­te kön­nen mehr­fach vorkommen.

In Wix klickst du dabei auf das zu for­ma­tie­ren­de Text­ele­ment und dann auf Text bear­bei­ten. In den sich öff­nen­den Ein­stel­lun­gen wählst du dann das jewei­li­ge Über­schrif­ten­for­mat aus.

Screen­shot: Über­schrif­ten-For­ma­tie­rung für seman­ti­sche Zuord­nung in Wix

Farb­kon­tras­te bar­rie­re­frei gestalten:
Um star­ke Farb­kon­tras­te von Hin­ter­grün­den oder Tex­ten ein­zu­set­zen, kannst du bei Wix die Farb­aus­wahl öff­nen und einen pas­sen­den, kon­trast­star­ken Farb­ton auswählen.

Die Farb­aus­wahl fin­dest du, wenn du das zu ändern­de Ele­ment anklickst und in den sich öff­nen­den Ein­stel­lun­gen auf das ent­spre­chen­de Farb­sym­bol wie z. B. Schrift­far­be klickst. Die Wix-Farb­aus­wahl zeigt dir unter­schied­li­che Farb­tö­ne an, die du für das anzu­pas­sen­de Ele­ment aus­wäh­len kannst.

Die Schrift­far­be soll­te sich ganz deut­lich vom Web­si­te­hin­ter­grund abhe­ben. Das glei­che gilt auch für Icons und Buttons.

Screen­shot: Farb­aus­wahl mit unter­schied­li­chen Kon­tras­ten bei Wix

Bar­rie­re­freie Tas­ta­tur und opti­scher Anzeiger:
Wix bie­tet zusätz­li­che bar­rie­re­freie Ele­men­te in sei­nem Edi­tor an, wie die bar­rie­re­freie Tas­ta­tur und den opti­schen Anzei­ger.

Mit der bar­rie­re­frei­en Tas­ta­tur — wenn akti­viert — kön­nen dei­ne Web­site­be­su­cher sich intui­tiv mit der Tas­ta­tur durch die Web­site navigieren.

Wird der opti­sche Anzei­ger ange­schal­tet, kön­nen dei­ne Besu­cher sehen, wo genau sie sich mit der Tas­ta­tur auf der Web­site befin­den. Der aktu­el­le “Stand­ort” wird mit einem blau­en Rah­men gekennzeichnet.

Die­se Funk­tio­nen fin­dest du in Wix unter dem Punkt “Web­site” und dem sich dann öff­nen­den Unter­me­nü bei Bar­rie­re­frei­heit (sie­he Screenshot).

Was noch für die Barrierefreiheit einer Website wichtig ist

Ver­wen­de kla­re Schrift­ar­ten und gro­ße Schrift­grö­ßen. Gene­rell ist zu beob­ach­ten, dass in den ver­gan­ge­nen Jah­ren die Schrift­grö­ße von Über­schrif­ten und Fließ­text auf Web­sites deut­lich ange­stie­gen ist. So fällt es auch Web­site­be­su­chern ohne Seh­be­hin­de­rung leicht, Tex­te online zu lesen.

Ver­su­che, dei­ne Tex­te leicht ver­ständ­lich zu schrei­ben, ohne all­zu kom­ple­xe und ellen­lan­ge Sät­ze. Dei­ne Web­site soll­te dar­über hin­aus klar und über­sicht­lich struk­tu­riert sein, sodass man sich auf ihr schnell zurecht­fin­det und die gewünsch­ten Infos schnell auf­find­bar sind.

Ver­mei­de die auto­ma­ti­sche Wie­der­ga­be von Vide­os und Musik beim Laden der Sei­te. Screen­rea­der haben Pro­ble­me damit, die Medi­en rich­tig zu inter­pre­tie­ren. Außer­dem kann der Ton des Vide­os oder des Pod­casts die Spra­che des Screen­rea­ders überlagern.

Ver­mei­de all­zu vie­le Ani­ma­tio­nen auf der Web­site. Auch das kann dem User Pro­ble­me berei­ten, vor allem wenn er für die Sei­ten­na­vi­ga­ti­on die Tas­ta­tur und den Screen­rea­der einsetzt.

Ach­te dar­auf, dass dei­ne Web­site-Ele­men­te, und damit sind ganz beson­ders Gra­fi­ken und Fotos gemeint, sich her­an zoo­men las­sen und dabei immer noch eine gute Bild­qua­li­tät bieten.

Falls du Vide­os und Audio-Datei­en in dei­ne Web­site ein­bin­dest, sol­lest du noch einen Alter­na­tiv-Text zu die­sen Medi­en ein­fü­gen, damit gehör­lo­se Men­schen wis­sen, wel­che Infor­ma­tio­nen mit die­sen Datei­en über­mit­telt werden.

Wenn du die hier genann­ten Punk­te bei dei­ner Web­site umsetzt, hast du schon sehr viel getan, um dei­nen Inter­net­auf­tritt sowie dei­ne Inhal­te auch für Men­schen mit Behin­de­rung zugäng­lich zu machen.