BFSG und bar­rie­re­freie Web­sites – das sollte man wis­sen

  • Tech­nik

In einer zuneh­mend digi­ta­len Welt ist es wich­ti­ger denn je, dass Web­sites für alle Nut­zer zugäng­lich sind, unab­hän­gig von deren kör­per­li­chen oder tech­ni­schen Ein­schrän­kun­gen. Bar­rie­re­frei­heit im Web­de­sign ist nicht nur eine ethi­sche Ver­pflich­tung, son­dern kann auch den Erfolg einer Web­site erheb­lich beein­flus­sen. In die­sem Arti­kel geht es um bar­rie­re­freies Web­de­sign, warum es wich­tig ist, wel­che Tools dabei hel­fen kön­nen und wel­che recht­li­chen Anfor­de­run­gen in Zukunft zu erwar­ten sind.

HIN­WEIS: Die­ser Blog­ar­ti­kel stellt ledig­lich Hin­weise und Bei­spiele zum Barriere­freiheits­stärkungs­gesetz (BFSG) zur Ver­fü­gung und erhebt kei­nen Anspruch auf recht­li­che Voll­stän­dig­keit. Jedes Unter­neh­men ist auf­ge­for­dert, indi­vi­du­ell recht­lich prü­fen zu las­sen, ob und wie es seine betrie­be­nen Web­sei­ten gemäß den Anfor­de­run­gen an Bar­rie­re­frei­heit umstel­len muss.

WEL­CHE ARTEN VON BEHINDER­UNGEN STE­HEN IM KON­TEXT DER BARRIERE­FREIHEIT?

Mit­men­schen kön­nen auf unter­schied­lichste Arten ein­ge­schränkt sein. Wer sich mit Bar­rie­re­frei­heit beschäf­tigt, sollte die diver­sen Behin­de­run­gen ken­nen und ver­ste­hen.

Disability Partially Blind Streamline Icon: https://streamlinehq.comdisability-partially-blind
SEH­BE­HIN­DE­RUNG: Diese umfas­sen Beein­träch­ti­gun­gen des Seh­ver­mö­gens, von Farb­blind­heit über Seh­schwä­che bis hin zur voll­stän­di­gen Blind­heit.
Disability Hearing Streamline Icon: https://streamlinehq.comdisability-hearing
HÖR­BE­HIN­DE­RUNG: Beein­träch­ti­gun­gen des Gehörs, die es schwie­rig oder unmög­lich machen, audi­tive Inhalte zu nut­zen. Dazu gehö­ren unter ande­rem Taub­heit und Schwer­hö­rig­keit.
Disability Wheelchair Streamline Icon: https://streamlinehq.comdisability-wheelchair
KÖR­PER­LI­CHE BEHIN­DE­RUNG: Diese betref­fen die Mobi­li­tät und phy­si­sche Inter­ak­tion mit Gerä­ten, wie z.B. Läh­mun­gen, Ver­lust von Glied­ma­ßen oder chro­ni­sche Erkran­kun­gen, die Bewe­gun­gen ein­schrän­ken.
Brain Network Streamline Icon: https://streamlinehq.combrain-network
KOGNI­TIVE BEHIN­DE­RUNG: Diese umfas­sen Schwie­rig­kei­ten bei der Ver­ar­bei­tung von Infor­ma­tio­nen, dem Erin­nern, Ler­nen oder der Pro­blem­lö­sung. Men­schen mit Lern­be­hin­de­run­gen, Gedächt­nis­stö­run­gen oder Auf­merk­sam­keits­de­fi­zi­ten kön­nen betrof­fen sein.
Study Brain Streamline Icon: https://streamlinehq.comstudy-brain
NEU­RO­LO­GI­SCHE BEHIN­DE­RUNG: Beein­träch­ti­gun­gen, die das Ner­ven­sys­tem betref­fen und zu Her­aus­for­de­run­gen wie Epi­lep­sie, Migräne oder Bewe­gungs­stö­run­gen füh­ren kön­nen.
Conversation Question Warning 1 Streamline Icon: https://streamlinehq.com
SPRACH­BE­HIN­DE­RUNG: Beein­träch­ti­gun­gen, die die Fähig­keit zur Sprach­pro­duk­tion oder -ver­ar­bei­tung beein­flus­sen, z.B. Stot­tern, Apha­sie oder Stumm­heit.

DIE VOR­TEILE DER BAR­RIE­RE­FREI­HEIT FÜR WEB­SITE-BETREI­BER UND E-COM­MERCE

Bar­rie­re­frei­heit stellt sicher, dass alle Men­schen, ein­schließ­lich Men­schen mit Behin­de­run­gen, unein­ge­schränk­ten Zugang zu den Inhal­ten und Funk­tio­nen einer Web­site haben. Gerade Men­schen mit Behin­de­rung nut­zen digi­tale Ser­vices und E-Com­merce inten­si­ver, weil auf Grund ihrer Beein­träch­ti­gung ana­loge Alter­na­ti­ven um ein Viel­fa­ches auf­wän­di­ger wären. Ob Online-Ban­king, Web-Apo­the­ken, der Pizza-Lie­fer­ser­vice oder Fashions­to­res – nur wenn ent­spre­chende Platt­for­men bar­rie­re­frei und für Men­schen mit Behin­de­rung ohne fremde Hilfe nutz­bar sind, kön­nen sie auf den Kom­fort zurück­grei­fen, der eigent­lich für alle gedacht ist.
 

Platt­for­men, die nicht bar­rie­re­frei sind, ver­feh­len eine große Ziel­gruppe mit hohem und kon­ti­nu­ier­li­chem Bedarf an Online-Ser­vices.

Laut der World Health Orga­niza­tion (WHO) leben über eine Mil­li­arde Men­schen welt­weit mit einer Behin­de­rung, was etwa 15% der Welt­be­völ­ke­rung ent­spricht. Laut Bun­des­amt für Sta­tis­tik leb­ten zum Jah­res­ende 2023 in Deutsch­land rund 7,9 Mil­lio­nen Men­schen, etwa 9,4 % der dtsch. Bevöl­ke­rung, mit schwe­rer Behin­de­rung ab Grad 50.
Schwerbehinderte Menschen nach Alter 2023
Schwerbehinderte Menschen nach Alter 2023
EINE BAR­RIE­RE­FREIE WEB­SITE ERHÖHT DIE LOYA­LI­TÄT UND DEN ERFOLG EINES INTER­NET­AUF­TRIT­TES IN VIE­LER­LEI HIN­SICHT:
 
  1. Erwei­te­rung der Ziel­gruppe und damit auch mehr poten­zi­el­ler Kun­den
  2. Loya­li­täts­stei­ge­rung der Besu­cher durch ver­bes­serte Nut­zer­er­fah­rung und Usa­bi­lity
  3. Ver­bes­ser­tes SEO-Ran­king und Sicht­bar­keit bei Google und Co.
  4. Posi­tio­niert das Unter­neh­men ethisch und sozial in einem posi­ti­ven Kon­text
  5. Rechts­kon­for­mi­tät durch Erfül­len der BFSG-Min­dest­stan­dards
Bevölkerungsanteil von Behinderten

Fast jeder Zehnte der deut­schen Gesamt­be­völ­ke­rung ist geis­tig und/oder kör­per­lich ein­ge­schränkt...

KÜNF­TIGE RECHT­LI­CHE ANFORDER­UNGEN ZUR BARRIERE­FREIHEIT

Ab 28. Juni 2025 gilt (auch) für Web­sites und Apps eine gesetz­li­che Pflicht zur Bar­rie­re­frei­heit.

Verwendung eines Computers mit Braillezeile oder Braille-Terminal

Für Blinde oder Men­schen mit Seh­be­hin­de­rung lesen Screen­rea­der Web­sites aus und über­tra­gen Texte an Ter­mi­nals, die die Zei­chen in Braille­schrift aus­ge­ben.

Zukünf­tig wird mit dem BARRIERE­FREIHEITS­STÄRKUNGS­GESETZ (BFSG) die Bar­rie­re­freie Infor­ma­ti­ons­­­tech­no­lo­gie-Ver­ord­nung (BITV) abge­löst. Und das BFSG setzt wie­derum die EU-Richt­li­nie des Euro­pean Acces­si­bi­lity Act (EAA) um, damit euro­pa­weit ein­heit­li­che Regeln zur Bar­rie­re­frei­heit gel­ten. Die Rege­lun­gen basie­ren auf der euro­päi­schen Norm EN 301 549, die sich wie­derum zum gro­ßen Teil an den inter­na­tio­na­len Richt­li­nien für bar­rie­re­freie Web­in­halte (WCAG) ori­en­tie­ren.
 

WIE WIRD BAR­RIE­RE­FREI­HEIT FÜR PRO­DUKTE UND DIENST­LEIS­TUN­GEN DEFI­NIERT?

Dienst­leis­tun­gen und Pro­dukte sind nach dem Gesetz dann BAR­RIE­RE­FREI, wenn sie für Men­schen mit Behin­de­rung in der all­ge­mein übli­chen Weise, OHNE BESON­DERE ERSCHWER­NIS und OHNE FREMDE HILFE grund­sätz­lich AUF­FIND­BAR, ZUGÄNG­LICH und NUTZ­BAR sind.
 

WEL­CHE GESCHÄFTS­BE­REI­CHE UND UNTER­NEH­MEN SIND BETROF­FEN?

Alle Unter­neh­men, die DIENST­LEIS­TUN­GEN im elek­tro­ni­schen Geschäfts­ver­kehr mit Ver­brau­chern anbie­ten (E-Com­merce via Web­shops oder Online-Ter­min-Buchungs-Tools etc.) und/oder PRO­DUKTE HER­STEL­LEN, sind unein­ge­schränkt zur Bar­rie­re­frei­heit ver­pflich­tet. Kleinst­un­ter­neh­men, die nur Dienst­leis­tun­gen anbie­ten, weni­ger als 10 Mit­ar­bei­ter und 2 Mio. Euro Umsatz im Jahr haben, sind aus­ge­nom­men. Infos sind bei der BUN­DES­FACH­STELLE BAR­RIE­RE­FREI­HEIT erhält­lich.
 

WEL­CHE STAN­DARDS AN BAR­RIE­RE­FREI­HEIT SOL­LEN ERFÜLLT WER­DEN?

WAHR­NEHM­BAR­KEIT
Inhalte müs­sen von allen Nut­zern wahr­ge­nom­men wer­den kön­nen, z.B. durch aus­rei­chende Kon­traste und Schrift­grö­ßen, Text­al­ter­na­ti­ven für nicht-tex­tu­elle Inhalte (wie Bil­der oder Videos) oder der Bereit­stel­lung von Tran­skrip­ten für für audio-visu­elle Medien.

BEDIEN­BAR­KEIT
Alle Funk­tio­na­li­tä­ten, Hier­ar­chien und Inhalte einer Web­site müs­sen über Assis­tenz­tech­no­lo­gie, maus­los mit ver­schie­de­nen Ein­ga­be­ge­rä­ten wie Tas­ta­tur, Screen­rea­dern und oder auch via Sprach­steue­rung zugäng­lich sein.

VER­STÄND­LICH­KEIT
Infor­ma­tio­nen und der Betrieb der Benut­zer­ober­flä­che müs­sen sprach­lich und inhalt­lich ver­ständ­lich sein, z.B. durch klare Navi­ga­tion, seman­ti­sche Struk­tu­ren und leicht les­bare Texte.

KOM­MU­NI­KA­TION
For­mu­lare und Ein­ga­be­fel­der müs­sen so erreich­bar und benut­zer­freund­lich gestal­tet sein, das sie auch von Men­schen mit Ein­schrän­kun­gen nutz­bar sind und durch auto­ma­ti­sche Feh­ler­er­ken­nung bzw. Hil­fe­stel­lun­gen bei der Kor­rek­tur die Inter­ak­tion unter­stüt­zen.

DOKU­MEN­TA­TION
Die Bar­rie­re­frei­heit ist doku­men­ta­ti­ons­pflich­tig, d.h. Unter­neh­men müs­sen eine klare und zugäng­li­che Infor­ma­tion bereit­stel­len, die beschreibt, wie die Bar­rie­re­frei­heit erfüllt wird oder Her­stel­ler eine Kon­for­mi­täts­er­klä­rung abge­ben.

DIY-TIPPS UND HTML-BASICS IM DEVE­LO­P­MENT VON BAR­RIER­FREIEN WEB­SITES

Die bar­rie­re­freie Umset­zung von Web­sites ist je nach Art des CMS und des Frame­works sehr indi­vi­du­ell. Den­noch gibt es einige Basics, mit denen eine Web­site auf Bar­rie­re­frei­heit gut vor­be­rei­tet wer­den kann….

META-TAGS
Der lang-Tag im HTML-Hea­der ist ent­schei­dend, um Screen­rea­dern mit­zu­tei­len, in wel­cher Spra­che der Inhalt der Web­site ver­fasst ist. Der view­port-Meta-Tag hilft dabei, die Ska­lier­bar­keit der Seite auf mobi­len Gerä­ten sicher­zu­stel­len. Dies ist beson­ders für Benut­zer mit Seh­be­hin­de­run­gen wich­tig, die mög­li­cher­weise den Inhalt ver­grö­ßern müs­sen.
  
<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Das ist für alle zugänglich.">
  <title>Barrierefreie Website</title>
</head>
<body>
  <!-- Inhalt hier -->
</body>
</html>
Mit Bildschirmkontroler lassen sich Kontrast, Farbmodus und Größe von Bildschirminhalten ändern.

Mit Bild­schirm­le­se­ge­rä­ten las­sen sich neben der Audio­aus­gabe von Inhal­ten auch Kon­trast, Text­größe oder Farb­mo­dus steu­ern.

ALT-TAGS
Bil­der und Gra­fi­ken soll­ten ein beschrei­ben­des alt-Attri­but haben, um den dar­ge­stell­ten Inhalt auch für Screen­rea­der zugäng­lich zu machen.
  
<img src="beispiel.jpg" alt="Beschreibung des Bildes">
ROLE-ATTRI­BUTE
Das role-Attri­but ist ein poten­tes Werk­zeug in der bar­rie­re­freien Pro­gram­mie­rung. Mit die­sem Attri­but kön­nen Web­ent­wick­ler die native Rolle eines Ele­ments aus­zeich­nen und z.B. wich­ti­gen Berei­chen wie Con­tent oder Navi­ga­tion eine aus­les­bare Zuord­nung geben und es Screen­rea­dern ermög­li­chen, Berei­che zu erken­nen.
  
<nav role="navigation" aria-label="Hauptmenü">
  <ul>
    <li><a href="#home">Startseite</a></li>
    <li><a href="#about">Über uns</a></li>
    <li><a href="#services">Dienstleistungen</a></li>
    <li><a href="#contact">Kontakt</a></li>
  </ul>
</nav>
  
<main role="Inhalt">
  <h1>Willkommen auf unserer barrierefreien Website</h1>
  <p>Hier finden Sie alle Informationen, die Sie benötigen.</p>
</main>
ARIA-ATTRI­BUTE
Die Kenn­zeich­nung von Ele­men­ten mit ARIA-Attri­bu­ten dient der Iden­ti­fi­zie­rung von Ele­men­ten, mög­li­chen Aktio­nen oder Zustän­den und erleich­tert damit die Inter­ak­tion mit der Web­site durch Assis­tenz­tech­no­lo­gie. Hier ein Bei­spiel für eine Check­box…
  
<label for="customCheckbox" role="checkbox" aria-checked="false" tabindex="0" onclick="toggleCheckbox()">Akzeptieren Sie die Nutzungsbedingungen?</label>

<script>
  function toggleCheckbox() {
    const checkbox = document.querySelector('[role="checkbox"]');
    const isChecked = checkbox.getAttribute("aria-checked") === "true";
    checkbox.setAttribute("aria-checked", !isChecked);
  }
</script>
FOKUS-MANAGE­MENT
Die Fokus­ver­wal­tung ist ein wesent­li­cher Aspekt der Bar­rie­re­frei­heit, ins­be­son­dere für Benut­zer, die auf Tas­ta­tur­steue­rung ange­wie­sen sind. Mit Skip Links ermög­licht man Key­board-Benut­zern, z.B. direkt zum Haupt­in­halt zu sprin­gen, ohne durch die gesamte Navi­ga­tion scrol­len zu müs­sen.
  
<a href="#maincontent" class="skip-link">Zum Inhalt springen</a>
<main id="maincontent">
<!-- Hauptinhalt der Seite -->
</main>
KON­TRAST­VER­HÄLT­NIS
Der Kon­trast ver­gleicht die rela­tive Hel­lig­keit von Hin­ter­grund zum Vor­der­grund. Das Kon­trast­ver­hält­nis reicht von 1:1 (kein Kon­trast) bis 21:1 (maxi­ma­ler Kon­trast). Ein guter Richt­wert liegt bei 3:1 bis 8:1. Text­in­halte oder Beschrif­tun­gen auf Inter­ak­ti­ons­flä­chen soll­ten sich von der Hin­ter­grund­flä­che gut abhe­ben, um die Les­bar­keit von Web­site-Inhal­ten für Men­schen mit ein­ge­schränk­ter Seh­stärke zu erleich­tern. Tools wie der WEB­AIM CON­TRAST CHE­CKER hel­fen bei der Über­prü­fung.

NÜTZ­LI­CHE TOOLS UND RES­SOUR­CEN FÜR BAR­RIE­RE­FREIES WEB­DE­SIGN

Um die Bar­rie­re­frei­heit einer Web­site zu ver­bes­sern, kann man auf diverse Dienst­leis­tun­gen, Know­how und Tools zurück­grei­fen. Hier ein paar nütz­li­che und hilf­rei­che Ver­weise:

CON­TENT MANAGE­MENT SYS­TEME
Viele CMS-Anbie­ter wie Word­Press oder Page­buil­der wie z.B. Ele­men­tor für Word­Press bie­ten eine Viel­zahl von Funk­tio­nen, die hel­fen, bar­rie­re­freie Web­sites zu erstel­len. Der BLOG-ARTI­KEL VON ELE­MEN­TOR erklärt, wie man diese Funk­tio­nen opti­mal nut­zen kann, Word­Press bie­tet zahl­rei­che Infos und WEB­I­NARE zu die­sem Thema an.

ONLINE­CHECK
WAVE – WEB ACCES­SI­BI­LITY EVA­LUA­TION ist ein kos­ten­lo­ses Tool, mit dem Web­sites auf Barriere­freiheits­probleme über­prüft wer­den kön­nen. Es bie­tet eine umfas­sende Ana­lyse und visu­elle Rück­mel­dun­gen, um Pro­bleme schnell zu iden­ti­fi­zie­ren.

WORD­PESS PLUG­INS
Das ACCES­SI­BI­LITY PLUGIN für Word­Press hilft, Word­Press-Web­sites bar­rie­re­frei zu gestal­ten. Es bie­tet Funk­tio­nen wie das Hin­zu­fü­gen von Skip-Links, die Anpas­sung der Schrift­größe und die Opti­mie­rung der Tas­ta­tur­na­vi­ga­tion.

BROW­SER PLUG­INS
AXE ACCES­SI­BI­LITY CHE­CKER ist ein leis­tungs­star­kes Chrome-Plug-In zur Über­prü­fung der Bar­rie­re­frei­heit. Es bie­tet detail­lierte Berichte und Vor­schläge zur Behe­bung von Pro­ble­men direkt in Brow­ser.

MONI­TO­RING
SITEIM­PROVE ACCES­SI­BI­LITY bie­tet eine umfas­sende Lösung zur kon­ti­nu­ier­li­chen Über­wa­chung und Ver­bes­se­rung der Bar­rie­re­frei­heit einer Web­site. Es inte­griert sich naht­los in das CMS und bie­tet klare Berichte und Hand­lungs­emp­feh­lun­gen.
KON­TRAST­CHE­CKER
Online-Tools wie WEB­AIM CON­TRAST CHE­CKER oder COLOR CON­TRAST CHE­CKER hel­fen dabei, sicher­zu­stel­len, dass Text- und Hin­ter­grund­far­ben einen aus­rei­chen­den Kon­trast bie­ten, um für alle Benut­zer les­bar zu sein.

BIK BITV- / WCAG-TEST
Ab 460,00 € p. Seite tes­tet z.B. die DIAS GMBH Web­sites auf Bar­rie­re­frei­heit oder unter­stützt Unter­neh­men bei der Ent­wick­lung von bar­rie­re­freien Platt­for­men im Web.

BITV-EXPER­TEN
Wer sich vorab zu dem Thema Bar­rie­re­frei­heit im Web infor­mie­ren oder bera­ten las­sen möchte, fin­det eine Viel­zahl an enga­gier­ten Bera­tern und Exper­ten. Zwei davon sind MAR­KUS LEM­CKE oder JAN HELL­BUSCH, beide Bera­ter und Dozen­ten für bar­rie­re­freies Web­de­sign, die dazu auch noch einen extrem infor­ma­ti­ven Blog rund um bar­rie­re­freie Infor­ma­tik und Ent­wick­lung betrei­ben.

FÖR­DE­RUNG
Die 1964 auf Initia­tive des ZDFs ent­stan­dene deut­sche Sozi­al­or­ga­ni­sa­tion AKTION MENSCH för­dert bar­rie­re­freie Pro­jekte, auch die Umset­zung bar­rie­re­freier Web­sites, von freien, gemein­nüt­zi­gen Orga­ni­sa­tio­nen mit Sitz in Deutsch­land.

INFO­STEL­LEN
Die BUN­DES­FACH­STELLE BAR­RIE­RE­FREI­HEIT ist der Anlauf­punkt für alle, die sich über das BFSG infor­mie­ren wol­len. Dane­ben bie­ten auch die zustän­di­gen HAN­DELS­KAM­MERN diverse Info­sei­ten zu dem Thema.

GESETZ­GE­BUNG
Wer sich direkt in die Details des BFSG-Geset­zes ein­le­sen möchte, fin­det Infor­ma­tio­nen dazu auf der Seite des BUN­DES­MI­NIS­TE­RI­UMS oder liest sich direkt in den GESET­ZES­TEXT ein.

FAZIT

Bar­rie­re­frei­heit im Web­de­sign ist nicht nur eine ethi­sche und geschäft­li­che Not­wen­dig­keit, son­dern auch eine recht­li­che Ver­pflich­tung, die in den kom­men­den Jah­ren an Bedeu­tung gewin­nen wird. Der Euro­pean Acces­si­bi­lity Act (EAA) setzt klare Stan­dards, die Unter­neh­men ein­hal­ten müs­sen, um ihre digi­ta­len Ange­bote bar­rie­re­frei zu gestal­ten. Wer die oben genann­ten Tools und Res­sour­cen nutzt und auf eine bar­rie­re­freie Platt­form umstellt, stellt nicht nur sicher, dass die eigene Web­site den recht­li­chen Anfor­de­run­gen gerecht wird, son­dern durch eine inklu­sive Online-Umge­bung, eine große, neue Ziel­gruppe ange­spro­chen wird, die man laut Sta­tis­tik bis­her als poten­ti­el­len Nut­zer­kreis nicht wahr­ge­nom­men hatte und durch Loya­li­tät an Bedeu­tung gewin­nen wird.

Face­book
XING
Lin­ke­dIn
War die­ser Bei­trag hilf­reich?
Wir unter­stüt­zen Sie gerne bei Ihrem nächs­ten Projekt. Von der Kon­zep­tion bis zum Design oder der voll­stän­di­gen Ent­wick­lung einer Web­site.
SAG’
HALLO!
Impressum

//

Datenschutz
PROJEKTANFRAGE
Super, Sie haben bei Ihrem Projekt an uns gedacht. Vielen Dank! Beschreiben Sie kurz, worum es geht, damit wir ein gutes Feedback geben können. Wir melden uns in Kürze zurück. Bis bald!
Von Ihnen im Formular eingegebene Daten speichern und verwenden wir ausschließlich zur Bearbeitung Ihrer Anfrage. Ihre Daten werden verschlüsselt übermittelt. Wir verarbeiten Ihre personenbezogenen Daten im Einklang mit unserer Datenschutzerklärung.

DANKE.

Wir haben ihre Anfrage erhalten und melden uns umgehend.