Wie Sie be­hinder­ten­ge­rech­te Web­sites erstellen

Online-Marke­ting: Bar­riere­frei­e Web­sites

Da immer mehr Menschen nicht nur mit Monitor und Tasta­tur durchs Netz surfen, sondern alternative Aus­gabe­ge­rä­te nut­zen, garantieren be­hinder­tenge­rechte Web­sites Zugäng­lich­keit für alle Anwen­der.

Informationen gemäss Stand vom 12.1.2023

Bild: Gerd Altmann auf Pixabay.com

Wichtige Hinweise

• Gesetzliche Pflicht Barrierefreiheit
  Ab der Jahresmitte 2025 sind wir alle gesetzlich verpflichtet, ihre Angebote barrierefrei darzustellen: Das BFSG (Barrierefreiheitsstärkungsgesetz) setzt die EU-Richtlinie zur Barrierefreiheit um (European Accessibility Act, kurz EAA)
• Barrierefreiheit
  Moderne Internetauftritte soll­ten barrierefrei sein. Barrierefreies Arbeiten ga­ran­tiert behinderten­gerechte Internet­auftritte und somit Zugänglichkeit für alle Anwender. Ein einfacher, gültiger HTML-Code ist Voraus­setzung für bar­riere­freie Webprä­senzen.
  Prüfen Sie deshalb, ob Ihre Seiten dem Standard des World Wide Web Consortium (W3C) gerecht sind: validator.w3.org/
  Der HTML-Code muss syntak­tisch und formal korrekt sein. Vermeiden Sie den Aufbau Ihrer Website mit der ur­alten Tabellentechnik. Setzen Sie dafür ein CSS-Layout ein. (CSS-Ad­res­sie­rung mit aus­sage­kräf­tigen ID-Na­men) Bei den Behörden sind in­zwischen barriere­freie Seiten Pflicht!
• Audios
  Verwenden Sie eine Techno­logie, mit der Sie die Texte auf der Website vorlesen lassen können.
• Kontrast beachten
  Verwenden Sie starke Kont­raste zwischen Vorder- und Hintergrund. Dazu können Sie auch ein Online-Tool ver­wen­den.
• Schriftgrössen
  Verwenden Sie nicht zu kleine Schriftgrössen. Erfassen Sie die Schriftgrössen in Prozent, damit die User selbst die ge­wünschte Schriftgrösse im Browser einstellen können. Bevorzugen Sie Schriften ohne Serifen. Setzen Sie nicht zu vie­le verschiedene Schrif­ten ein.

• Ungünstige Farbkombination
  Vermeiden Sie besonders die Kombination von Rot und Grün.
• Uni bevorzugen
  Achten Sie darauf, nur ein­far­bige Hintergründe ohne Muster zu verwenden. Vermeiden Sie Hinter­grund­grafi­ken oder halten Sie den Hinter­grund möglichst de­zent.
• alt-Attribut beachten
  Achten Sie vor allem auf das alt-Attribut bei Bildern, die zur Navigation eingesetzt werden. Diese Alternativ­texte sind wich­tig für Blinde, um die Navigationsbuttons zu ver­stehen und zu benutzen. Achten Sie darauf, wirklich sinnvolle Beschreibungen zu verwenden. Das alt-Attribut sollte optimalerweise nur ein einziges Wort enthalten. Bilder, die lediglich zur Dekoration dienen, brauchen jedoch kein alt-Attribut.
• Sauberes, einfaches HTML
  Verwenden Sie keine exo­tischen HTML-Tags. Verwenden Sie nur die gängigen For­ma­tierungs­an­wei­sungen von HTML. Vermeiden Sie die HTML-Anweisungen „blink“ und „marquee“.
• Kein Seitenrefresh
  Vermeiden Sie Seiten mit der Refresh-Anweisung auto­ma­tisch neu zu laden. Diese Anweisung wird oft dazu be­nutzt, um neue Banner auf­zurufen.
• Keine Werbefensterchen
  Verwenden Sie keine Werbe-Pop-ups.
• Effiziente Kombination von HTML und CSS
  Verwenden Sie nicht die Font-Anweisung für Schrift­aus­zeich­nungen, sondern arbeiten Sie mit CSS. Trennen Sie konse­quent den Inhalt vom Layout.
• Bitte keine Spalten
  Vermeiden Sie den Text in Spalten darzustellen.
• Gewisse Techniken ver­mei­den
  Arbeiten Sie nicht mit Frames. Verzichten Sie, sofern mög­lich, auf Pro­grammier­sprachen wie Java und Java­Script. Wenn Sie Videos und Audiodateien einsetzen, sollten Sie zu­min­dest kurze Be­schrei­bun­gen für diese Medien an­bie­ten.

• Ohne Maus
  Eine Website sollte auch ohne Maus navigierbar sein.
• Einheitliches Seitenlayout
  Verwenden Sie auf allen Seiten das gleiche Layout, der Seitenaufbau sollte immer gleich sein.
• Textmenü zusätzlich zum Grafikmenü
  Falls Sie Image-Maps zur Navigation verwenden, stellen Sie zusätzlich ein Textmenü zur Verfügung. Alle we­sent­lichen Informationen, die ggf. grafisch zur Verfügung stehen, müssen auch in Textform vorhanden sein.
• Kein Platzhalter für Links
  Verwenden Sie keinen Platzhalter für externe Links, sondern nehmen Sie den Link selbst als Text (inkl. http://). Als Linktext verwenden Sie auch nicht das Wort „Hier“, sondern legen Sie den Text hinter einen aus­sage­fähi­geren Text. Zudem sollten alle Links mit der Tabulator-Taste an­steuer­bar sein.
• Links-Handling
  Eine Reihe von Links sollten nie nebeneinander, sondern untereinander stehen. Verwenden Sie einen grösse­ren Zeilenabstand. Links sollten nie zu nahe bei­ein­ander stehen.
• Titel mit Satzzeichen
  Überschriften sollten mit einem Satzzeichen enden. Verwenden Sie für die Über­schrif­ten ausschliesslich die Tags H1 bis H6.
• Validator für Barrierefreiheit
  wave.webaim.org
• Browser-PlugIn für Firefox und Chrome
  wave.webaim.org/extension/
• Barrierefreiheit in der Infor­matik
  Über 50 Filme zu diesem Thema.

Autor: Walter B. Walser, kundennutzen.ch