Tipps für eine barrierefreie und suchmaschinenoptimierte Websitegestaltung
Rufen Sie einmal Ihre Unternehmens-Website auf und schließen Sie Ihre Augen. Versuchen Sie jetzt nur mit Tastatur (Tabulator- und Cursor-Tasten) einzelne Seiten Ihres Web-Angebots zu öffnen. Sie denken, das geht nicht? Doch, es funktioniert. Und zwar mit einer barrierefrei gestalteten Website.
„Barrierefreie Website“ heißt also, dass ein Webauftritt sowohl für Menschen mit Behinderung, Einschränkung oder für ältere Menschen übersichtlich, verständlich und einfach bedienbar gestaltet ist; zugleich aber in seiner Nutzerfreundlichkeit Vorteile für Alle bietet.
Mit welchen Beeinträchtigungen können Menschen grundsätzlich auf digitale Angebote stoßen? Hier kann es sich um ein eingeschränktes Sehvermögen bis hin zu Sehverlust, Rot-Grün-Schwächen, ein begrenztes Sichtfeld oder Farbenblindheit handeln. Ein gedämpftes Klangbild durch Störgeräusche im Hintergrund, ein reduziertes Hörvermögen oder auch kompletter Hörverlust können Hürden sein, denen sich Website-Betreiber:innen für ihre Besucher:innen stellen sollten. Die Liste ist lang und kann sich z.B. noch um motorische Einschränkungen erweitern. Eine Website 100% barrierefrei zu gestalten, ist sicherlich schwer umzusetzen. Doch alleine die Bemühungen dorthin sind ein Zeichen, dass man alle Menschen im Blick hat und niemanden ausschließen möchte.
Das Erschließen neuer Zielgruppen, Kundenstammerweiterung und Imagepflege gehen hier somit Hand in Hand.
Ein weiterer Vorteil, der zum Umsetzen von Barrierefreiheit auf der Website motiviert: Sie dient auch der Suchmaschinenoptimierung. Also dem Ausrichten der Website auf ein adäquateres Ranking in den Ergebnisseiten von Google & Co., kurz ‚SEO‘.
Obige Ausführungen bieten bereits genügend Argumente, über ein Re-Design bestehender Websites mit einem barrierefreien Angebot nachzudenken, wenn nicht verschiedenste Richtlinien ohnehin ab 2025 auch für bestimmte Unternehmen (siehe European Accessibility Act, kurz ‚EAA‘) eine Verpflichtung zum Vorhalten barrierefreier Websites vorgäben. Aber selbst wenn ein Unternehmen zu den Ausnahmen des ‚EAA‘ gehört (z.B. nicht verpflichtend bei Kleinstunternehmen), ist eine barrierefreie Website lohnenswert.
Erste Tipps für die Gestaltung und Umsetzung (nicht vollumfassend):
Vorbereitung und Fragen
Für eine erste Einschätzung beziehungsweise zur Vorbereitung auf die Barrierefreiheit sollten Sie sich die Regeln einmal genauer anschauen und folgende Fragen beantworten: Welche Regeln sind für meine Website relevant? Haben meine Bilder bereits ALT-Texte bzw. Bildbeschreibungen? Benutze ich Videos oder Audiodateien auf meiner Website? Sind die Links selbsterklärend und mit alternativen Texten versehen?
Dabei können Websites oder Plugins wie ‚BIK BITV-Test‘, ‚Google Lighthouse‘ (Ad-On für Browser), ‚Web Devloper‘ (Ad-On für Chrome Browser), ‚Sim Daltonism‘ (App für Farbkontraste) oder ‚Blind im Web‘ helfen.
Bilder und Grafiken
Noch immer trifft man im Web auf Bildbezeichnungen wie „img8017.jpg“. Natürlich ist die Umbenennung von Bildern ein Mehraufwand, der sich am Ende aber lohnt. Über diese Dateibezeichnung hinaus steigern Sie die Trefferquoten bei den einschlägigen Suchmaschinen zudem auch über einen alternativen Text (alt-Tag) und einen Bildtitel (title-Tag). Dies gilt auch für Grafiken.
Im Übrigen nicht nur ein Muss für Bilder, die verlinkt werden, sondern auch für alle internen und externen Links innerhalb eines Webangebotes.
Farben und Kontraste
Vermitteln Sie wichtige Informationen nicht nur über Farbe. Achten Sie insbesondere bei Überschriften, aktivem Menüeintrag, Links und Diagrammen oder Formularen auf einen hohen Kontrast zum Hintergrund und zeichnen Sie diese über einen kursiven oder fetten Schriftschnitt aus. Eine gute Hilfe finden Sie in den weiterführenden Links.
Video- und Audiodateien
Bei Video- und Audiodateien kommen Sie um Untertitel nicht umher. Sie können diese beim Hochladen über die Sozialen Medien generieren oder direkt über ein Videoschnittprogramm einbinden. Bei einer höheren Stufe der Barrierefreiheit sind Beschreibungen der Szenen gefordert.
Text und Sprache
Menschen mit Lernschwierigkeiten oder Legastheniker surfen auch im Internet. Sollten diese zu Ihrer Zielgruppe gehören, bieten Sie die Texte in leichter oder vereinfachter Sprache an. Neben einer speziellen Schrift können Sie auch größere Zeilen-, Buchstaben- und Wortabstände verwenden. Ein gutes Beispiel finden Sie unter: https://www.aktion-mensch.de/leichte-sprache
Funktionen
Legen Sie Wert auf eine übersichtliche Seitenstruktur mit aussagefähigen und korrekt ausgezeichneten Überschriften (H1 bis H6), Absätzen und Listen sowie eine Navigation, die über die Tastatur bedient werden kann. Geben Sie Besuchern mit geistigen Einschränkungen ausreichend Zeit, Inhalte zu lesen und zu benutzen. Formulare sollte man zwischenspeichern können, um diese ggf. zu einem späteren Zeitpunkt weiter auszufüllen.
Fazit
Durch die barrierefreie Umsetzung ist Ihre Website inhaltlich optimiert, gut strukturiert, übersichtlich und suchmaschinenoptimiert. Kurz: Eine Freude für Ihre Kund:innen und Google und Co. gleichermaßen!
Weiterführende Links
Auf den folgenden Seiten finden Sie ausführliche Informationen und Tipps zur Umsetzung und Gestaltung von barrierefreien Websites:
Autor Martin Hellmich ist Unternehmensberater, mit Schwerpunkt Online-Marketing, bei der Handwerkskammer Münster in der Emscher-Lippe-Region.
Verfasst hat er diesen Beitrag gemeinsam mit Ralf Hage. Er ist Experte für Grafikdesign, Webdesign und Online Marketing aus Rheine.
