Bar­rie­re­freie Web­site Check­lis­te

Zwei Leute beim Arbeiten am Laptop und Tisch

Lukas M. Beck

Lese­zeit: 8 Minu­ten

Ist Dei­ne Web­sei­te bar­rie­re­frei? Die­se Fra­ge wird man in dem Jahr 2025 noch oft hören. Beson­ders am 28.06.2025 denn da tritt das Bar­rie­re­frei­heits­stär­kungs­ge­setz ( BFSG ) in Kraft und ver­än­dert die Web-Welt, wie wir sie ken­nen, maß­geb­lich für uns alle.
Vie­le Men­schen nut­zen täg­lich das Inter­net. Doch nicht jede Web­sei­te ist bar­rie­re­frei und dadurch für jeden ein­fach zu nut­zen. Eine bar­rie­re­freie Web­site und das bar­rie­re­freie Design sor­gen dafür, dass alle Dei­ne Besu­cher Dei­ne Web­sei­te ein­fach und ange­nehm besu­chen kön­nen. Egal, ob sie eine Beein­träch­ti­gung haben oder nicht. Eine bar­rie­re­freie Web­site zeigt zudem, dass Du als Unter­neh­men offen und inklu­siv bist. Außer­dem wird die Bar­rie­re­frei­heit ab 2025 für vie­le Web­sites gesetz­lich vor­ge­schrie­ben. Wie kannst Du aber prü­fen, ob dei­ne Web­site bar­rie­re­frei ist? Unse­re umfas­sen­de Bar­rie­re­freie Web­site Check­lis­te hilft dir dabei!

War­um ist Bar­rie­re­frei­heit wich­tig?

Eine bar­rie­re­freie Web­site ermög­licht es allen Men­schen, pro­blem­los auf Infor­ma­tio­nen und Funk­tio­nen im Inter­net zuzu­grei­fen. Davon pro­fi­tie­ren nicht nur Men­schen mit Beein­träch­ti­gun­gen, son­dern alle Dei­ne Besu­cher. Du erreichst dadurch mehr Men­schen, ver­bes­serst dein Ran­king bei Goog­le und zeigst, dass du sozia­le Ver­ant­wor­tung über­nimmst.

Was bedeu­tet eine bar­rie­re­freie Web­site?

Eine bar­rie­re­freie Web­sei­te mit bar­rie­re­frei­em Design bedeu­tet, dass eine Web­sei­te so gestal­tet ist, dass sie von allen Men­schen pro­blem­los genutzt wer­den kann. Dabei spie­len eine kla­re Struk­tur, ein­fa­che Bedien­bar­keit und hohe Benut­zer­freund­lich­keit eine wich­ti­ge Rol­le. Die bar­rie­re­freie Web­site berück­sich­tigt unter­schied­li­che Ein­schrän­kun­gen, etwa Seh­be­hin­de­run­gen, Hör­be­ein­träch­ti­gun­gen oder moto­ri­sche Ein­schrän­kun­gen.

Muss Dei­ne Web­sei­te bar­rie­re­frei sein?
Mach hier den Test.

Wer ist vom BFSG betrof­fen?

Vor­tei­le einer bar­rie­re­frei­en Web­site

Eine bar­rie­re­freie Web­sei­te hat vie­le Vor­tei­le für den Nut­zer.
Fol­gend die­se in Kür­ze auf­ge­lis­tet für die schnel­le Argu­men­ta­ti­on:

  1. Mehr Nut­zer errei­chen
  2. Ver­bes­ser­te Usa­bi­li­ty
  3. Bes­se­res Ran­king bei Goog­le
  4. Posi­ti­ve Mar­ken­wahr­neh­mung

Doch wie wird Dei­ne Web­sei­te bar­rie­re­frei?
Das erfährst Du aus­führ­lich durch unse­re bar­rie­re­freie Web­site Check­lis­te.

Bar­rie­re­freie Web­site Check­lis­te

Gestal­tung

  • Infor­ma­tio­nen soll­ten nicht aus­schließ­lich durch Far­ben ver­mit­telt wer­den, son­dern immer auch durch Text oder Sym­bo­le.
  • Stel­le sicher, dass das Kon­trast­ver­hält­nis von Tex­ten min­des­tens 4,5:1 beträgt (Level AA). Für opti­ma­le Les­bar­keit wird ein Ver­hält­nis von 7:1 (Level AAA) emp­foh­len.
  • Ver­wen­de links- oder rechts­bün­di­gen Flat­ter­satz statt Block­satz.
  • Die Zei­len soll­ten nicht län­ger als 80 Zei­chen sein.
  • Der Zei­len­ab­stand soll­te min­des­tens 1,5‑fach sein, eben­so der Absatz­ab­stand.

Spra­che

  • Kenn­zeich­ne die Spra­che der Web­site deut­lich im HTML-Code (<html lang="de">).
  • Bie­te zusätz­lich Ver­sio­nen in leich­ter Spra­che an, beson­ders wenn dein Inhalt kom­plex ist.
  • Fach­be­grif­fe, Abkür­zun­gen und spe­zi­el­le Aus­drü­cke soll­ten ver­ständ­lich erklärt wer­den, idea­ler­wei­se mit Glos­sa­ren oder direkt im Text.

Sei­ten­struk­tur

  • Struk­tu­rie­re den HTML-Code logisch, sodass Screen­rea­der den Inhalt rich­tig wie­der­ge­ben kön­nen.
  • Über­schrif­ten soll­ten klar sein und den HTML-Ele­men­ten h1, h2, h3 usw. ent­spre­chen.
  • Inhal­te wie Lis­ten, Zita­te und Tabel­len soll­ten im HTML-Code ent­spre­chend kor­rekt for­ma­tiert sein.
  • Dei­ne Web­site soll­te ver­grö­ßer­bar sein, idea­ler­wei­se bis zu 200 %, ohne dass die Bedien­bar­keit oder Les­bar­keit ver­lo­ren geht.
  • Prü­fe regel­mä­ßig, ob dein HTML-Code feh­ler­frei und stan­dard­kon­form ist.

Mul­ti­me­dia und Inter­ak­ti­ve Inhal­te bar­rie­re­frei gestal­ten

Bil­der und Gra­fi­ken

  • Jedes Bild soll­te einen Alter­na­tiv­text (ALT-Attri­but) besit­zen, damit Screen­rea­der die­se Infor­ma­tio­nen vor­le­sen kön­nen.
  • Deko­ra­ti­ve Bil­der soll­ten kein ALT-Attri­but besit­zen oder per CSS ein­ge­bun­den wer­den, sodass Screen­rea­der die­se igno­rie­ren.
  • Nut­ze ech­te Tex­te statt Schrift­gra­fi­ken, Logos aus­ge­nom­men.

Audio­vi­su­el­le Inhal­te

  • Stel­le Tran­skrip­te für Audi­os wie Pod­casts zur Ver­fü­gung.
  • Vide­os und Live-Über­tra­gun­gen soll­ten Unter­ti­tel haben.
  • Bie­te Audio­be­schrei­bun­gen für Vide­os an, wenn Inhal­te rein visu­ell dar­ge­stellt wer­den.

Auto­ma­ti­sche Inhal­te

  • Inhal­te, die auto­ma­tisch abge­spielt wer­den (z.B. Vide­os, Ani­ma­tio­nen), soll­ten von Nut­zern gestoppt oder pau­siert wer­den kön­nen.
  • Inhal­te, die auto­ma­tisch aktua­li­siert wer­den (z.B. News­ti­cker oder Chats), soll­ten pau­sier­bar sein.
  • Ver­mei­de auto­ma­ti­sche Wie­der­ga­ben oder ermög­li­che Nut­zern eine ein­fa­che Kon­trol­le dar­über.

For­mu­la­re bar­rie­re­frei gestal­ten

Über­sicht­li­cher Auf­bau

  • Ver­knüp­fe For­mu­lar­fel­der ein­deu­tig mit pas­sen­den Beschrif­tun­gen (<label>).
  • Grup­pie­re mehr­tei­li­ge For­mu­la­re über­sicht­lich mit (<fieldset>).
  • Ver­mei­de Platz­hal­ter-Tex­te als allei­ni­ge Beschrif­tung.

Ein­fa­che und bar­rie­re­freie Nut­zung

  • Ver­zich­te auf kom­pli­zier­te Captchas oder bie­te bar­rie­re­freie Alter­na­ti­ven an.
  • Sor­ge dafür, dass For­mu­lar­ein­ga­ben bei Unter­bre­chun­gen nicht ver­lo­ren gehen.
  • War­ne dei­ne Nut­zer recht­zei­tig vor Daten­ver­lust durch Sit­zungs­un­ter­bre­chun­gen.

Hil­fe­stel­lun­gen bei Ein­ga­be­feh­lern

  • Feh­ler­mel­dun­gen soll­ten klar und hilf­reich for­mu­liert sein.
  • Bie­te Hil­fen an, wie Nut­zer ihre Feh­ler kor­ri­gie­ren kön­nen.
  • Prü­fe Ein­ga­ben auf recht­li­che oder finan­zi­el­le Kon­se­quen­zen und ermög­li­che eine Bestä­ti­gung vor dem Absen­den.
  • Stel­le eine ein­heit­li­che Navi­ga­ti­on auf allen Sei­ten sicher.
  • Ergän­ze dei­ne Web­sei­te durch eine Such­funk­ti­on oder ein Inhalts­ver­zeich­nis.
  • For­mu­lie­re Anwei­sun­gen ein­deu­tig, ohne auf visu­el­le Merk­ma­le wie Far­ben oder For­men zurück­zu­grei­fen.
  • Prü­fe, ob alle Funk­tio­nen und Links über die Tas­ta­tur zugäng­lich sind und logisch sor­tiert erschei­nen.

Tech­ni­sche Anfor­de­run­gen

  • Nut­ze aus­schließ­lich bar­rie­re­freie Plug­ins und The­mes für dein Con­tent-Manage­ment-Sys­tem.
  • Dyna­mi­sche Inhal­te (Slider, Pop-ups, Ani­ma­tio­nen) soll­ten steu­er­bar und bar­rie­re­frei gestal­tet sein.
  • Dei­ne Inhal­te soll­ten ska­lier­bar und bis zu 200 % ver­grö­ßer­bar blei­ben.

Pra­xis­emp­feh­lun­gen und kon­ti­nu­ier­li­che Ver­bes­se­rung

  • Sen­si­bi­li­sie­re dein Team regel­mä­ßig für das The­ma Bar­rie­re­frei­heit durch Schu­lun­gen.
  • Füh­re regel­mä­ßi­ge Tests und Audits durch, um prak­ti­sche Bar­rie­ren zu erken­nen und zu behe­ben.
  • Doku­men­tie­re dei­ne Fort­schrit­te bei der Bar­rie­re­frei­heit, um Trans­pa­renz und stän­di­ge Ver­bes­se­run­gen sicher­zu­stel­len.

Regel­mä­ßi­ge Prü­fun­gen und Feed­back

Bar­rie­re­frei­heit ist ein lau­fen­der Pro­zess. Prü­fe regel­mä­ßig:

  • Tech­ni­sche Tests mit Tools wie WAVE, Con­trast Che­cker und Screen­rea­dern.
  • Manu­el­le Prü­fun­gen durch Men­schen mit Behin­de­run­gen.
  • Hole dir akti­ves Feed­back von dei­nen Nut­zern und set­ze die­ses um.

Bar­rie­re­frei­heit Tools

Erwei­te­run­gen für Dei­nen Brow­ser

Brauchst Du einen schnel­len Check?
Die­se Brow­ser-Erwei­te­run­gen unter­stüt­zen Dich in der schnel­len Ana­ly­se:

  • Der WCAG Con­trast Che­cker für Fire­fox, Chro­me und Edge.
  • Acces­si­bi­li­ty Insights for Web ist eine Brow­ser-Erwei­te­rung (Chro­me, Edge) von Micro­soft, die bspw. sehr anschau­lich die Fokus-Rei­hen­fol­ge (und damit ver­bun­de­ne Feh­ler) auf bestehen­den Web­sei­ten visua­li­siert.

Kom­mer­zi­el­le Test-Brow­ser

Der kos­ten­pflich­ti­ge Test-Brow­ser Poly­pane bie­tet ein Test­ing der Bar­rie­re­frei­heit an.
Es ist mög­lich, eine ange­pass­te Test­um­ge­bung für sol­che Tests zu erstel­len.

Online-Tools

Fazit

Bar­rie­re­frei­es Design und eine bar­rie­re­freie Web­site bie­ten dir vie­le Vor­tei­le, wie mehr Nut­zer, bes­se­re Such­ma­schi­nen­ran­kings und eine inklu­si­ve Nut­zer­er­fah­rung. Nut­ze die­se umfas­sen­de Check­lis­te regel­mä­ßig, um Bar­rie­re­frei­heit zu einem fes­ten Bestand­teil dei­ner digi­ta­len Stra­te­gie zu machen. Star­te noch heu­te und tra­ge aktiv dazu bei, das Inter­net für alle Men­schen zugäng­lich und ange­nehm nutz­bar zu gestal­ten!

Nun steht Dei­ner bar­rie­re­frei­en Web­sei­te nichts mehr im Weg!
Hier geht es außer­dem wei­ter zu bar­rie­re­frei­en Apps. Die­se sind näm­lich vom BFSG auch nicht aus­ge­nom­men.

Hast Du Fra­gen zum BFSG?

Oder willst Du Dei­ne Web­sei­te ana­ly­sie­ren las­sen?

Jetzt Kon­takt auf­neh­men!

12. März | 09:18 Uhr | BFSG, Digitalisierung

Beiträge, die dich außerdem interessieren könnten

  • Kontakt

  • BlueBranch GmbH
    Albert-Schweitzer-Straße 20
    91080 Uttenreuth

  • Telefon: +49 9131 9430090
    E-Mail: hello@bluebranch.de