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

mit Keine Kommentare

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

WebsiteBild: 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.

SE Cockpit Keywordrecherche

  • 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

Verfolgen Walter B. Walser:

Online-Mar­ke­ting-Mana­ger

Seit 1995 hat Walter B. Walser Erfahrung im Umgang mit dem Internet. Er gründete 2001 ein Magazin, kundennutzen.ch, das sich auf praktisches Online-Marketing und Online-Werkzeuge konzentrierte. Als Agenturleiter hatte er Unternehmern geholfen, die Effektivität ihrer Website um 100% zu steigern. Ausserdem hatte Walser kleine Unternehmen in Bezug auf ihre Internetpräsenz beraten und war spezialisiert auf die Wartung und Optimierung von Websites. Zu seinen Interessen gehören Umweltschutz und Geopolitik.