Sie wünschen sich seine barrierefreie Website, haben aber kein großes Budget für die Umsetzung? Damit sind Sie nicht allein. Die Beauftragung eines Profis kann ordentlich ins Geld gehen. Tester und Entwickler wollen bezahlt werden und je näher das Inkrafttreten des BFSG rückt, desto ausgelasteter werden die Fachmenschen. Aber ist es überhaupt möglich, die eigene Website selbst und mit geringem Aufwand barrierefrei umzusetzen? Und womit fange ich an?
BITV und BFSG – Ojemine
Bevor es daran geht, selbst Hand anzulegen, sollte man sich mit den rechtlichen Anforderungen befassen und der Frage: muss ich überhaupt eine barrierefreie Website haben? Schauen wir uns deshalb einmal kurz einen Auszug der geltenden Gesetze an.
Barrierefreie-Informationstechnik-Verordnung (BITV)
Grob gesagt fallen unter die BITV und seine Ableger auf Landesebene alle Websites öffentlicher Stellen und die von Firmen, die zu mindestens 50% öffentlich gefördert sind. Dazu zählen Städte, Behörden usw. Diese müssen bereits seit vielen Jahren barrierefrei sein. Vermutlich wissen Sie also schon jetzt, ob dieses Gesetz für Sie relevant ist.
Barrierefreiheitsstärkungsgesetz (BFSG)
Neu hinzugekommen ist das Barrierefreiheitsstärkungsgesetz, kurz BFSG, welches erst im nächsten Sommer in Kraft tritt. Dieses Gesetz zielt auf nicht-öffentliche Unternehmen ab und verlangt eine barrierefreie Website unter anderem dann, wenn darüber „Dienstleistungen im elektronischen Geschäftsverkehr“ erfolgen. Darunter fallen alle Online-Shops, aber auch klassische Firmenwebsites können betroffen sein. Mehr zu den rechtlichen Anforderungen habe ich bereits einmal mit Sabine Brumme im Artikel Barrierefreie Websites werden Pflicht – Die wichtigsten Infos zum BFSG auf versandhandelsrecht.de zusammengefasst. Ihr IT-Anwalt des Vertrauens wird Sie hier rechtssicher beraten. Ausgenommen davon sind aber in den meisten Fällen Firmen mit weniger als 10 Mitarbeitern und weniger als 2 Millionen Euro jährlichem Umsatz.
Hilfe, ich muss eine barrierefreie Website haben
Sie kommen gerade zu der Erkenntnis, dass Ihre Website unter die Bedingungen eines der beiden Gesetze fällt? Oder Sie wussten das auch vorher schon und sind genau deshalb auf diesem Artikel gelandet? Dann müssen Sie einen ganzen Katalog an Anforderungen erfüllen. In diesem Fall würde ich Ihnen empfehlen, genau hier aufzuhören mit dem Lesen und die Fachperson Ihres Vertrauens anzurufen. Denn auf einen Rechtsstreit mit der Konkurrenz oder den Behörden wollen Sie sich sicherlich nicht einlassen. Automatisierte Tests und Optimierungstools werden Ihnen zwar versprechen, Ihre Website barrierefrei umzusetzen, sie werden es aber nicht tun. Gern unterstütze ich Sie bei der Umsetzung oder der Vermittlung von Fachmenschen.
Wollen Sie jedoch aus freien Stücken etwas für Ihre Nutzer tun und Ihre Website optimieren, dann lesen Sie gern weiter. Wir machen das Internet jetzt gemeinsam ein Stück stolperfreier.
Barrierefreie Website oder barrierearme Website?
Wir alle würden uns ein barrierefreies Internet wünschen. Doch die Realität sieht anders aus: Barrieren warten überall und vor allem dort, wo Sie sie nicht erwarten. Fachleute für Barrierefreiheit wissen ironischerweise: vollkommene Barrierefreiheit ist eine Illusion. Aber wir erschaffen bestmögliche Barrierearmut. Und deshalb ist auch jede entfernte Barriere ein Schritt in die richtige Richtung. Wollen Sie nun also selbst Hand anlegen und Ihre eigene Website überarbeiten, dann setzen Sie sich am Besten keine barrierefreie Website als Ziel. Denn gerade als Laie werden Sie das nicht schaffen. Aber lassen Sie uns gemeinsam die größten Barrieren ausmachen und beheben.
Ein Berg an Ein- und Ausgabegeräten – wo fange ich an?
Befasst man sich intensiver mit digitaler Barrierefreiheit wird man schnell herausfinden, dass die Welt der Eingabegeräte nicht bei Maus und Tastatur aufhört. So unterschiedlich, wie die Einschränkungen der Nutzer sind, so vielseitig sind die Geräte, die es am Markt gibt. Ob Augensteuerung oder Mundmaus, Joystick oder Spracheingabe. Je nach Fähigkeiten der Nutzer, können sowohl Maus als auch Tastatur ersetzt werden.
Auch die Welt der Ausgabegeräte ist bunt. Neben klassischen Monitoren in verschiedenen Größen, vom Panoramabildschirm bis zum Smartphone, finden sich auch nicht-visuelle Alternativen. Braille-Zeilen oder Screenreader wandeln visuelle Inhalte für andere Sinne um.
Doch wie soll man all diesen technischen Geräten gerecht werden? Ist das nicht viel zu aufwendig? Nein ist es nicht. Denn Sie können sich die Arbeit erleichtern, wenn Sie sich im Wesentlichen auf zwei Technologien konzentrieren: Screenreader und Tastaturen.
So wenig? Ja. Denn abgesehen von ausreichenden Farbkontrasten und ein paar weiteren Prüfschritten zeigt ein Screenreader die meisten Probleme der Ausgabe deutlich an. Schlecht strukturierter Inhalt oder technische Probleme können optisch kaschiert werden, fallen Ihnen bei der Nutzung eines Screenreaders aber schnell auf. Auch fehlende Textalternativen werden sofort ersichtlich.
Auf der anderen Seite gibt es nur wenige Barrieren, die mit der Nutzung einer Maus zu tun haben. Dagegen agieren viele der Assistenztechnologien im Hintergrund als Tastatur und nutzen dieselben Schnittstellen. Konzentrieren Sie sich also auf die Eingabe und Navigation per Tastatur, dann können Sie auch hier schon viele Barrieren aufdecken und beheben.
Ein schneller Test auf Barrierefreiheit
Barrierefreiheit vollständig zu testen ist aktuell ein Job für Menschen, nicht für Computer. Nur etwa 60% der Kriterien sind bisher automatisch testbar. Einen schnellen Überblick über mögliche Probleme auf dem Weg zu einer barrierefreien Website bieten die Tools trotzdem.
Ich persönlich finde den Test von WAVE am besten. Er listet übersichtlich existierende Probleme auf und markiert diese an Ort und Stelle. Verfügbar ist der Test auch als Browserplugin und bietet so die Möglichkeit, auch noch nicht veröffentlichte Testumgebungen zu prüfen.
Fünf Barrieren in fünf Stunden – barrierefreie Website, wir kommen
Nehmen Sie sich nun einen halben Tag Zeit und lassen Sie uns schauen, welche Barrieren wir mit wenig Aufwand beheben können. Für alle diese Probleme müssen Sie sich vermutlich nicht an Ihre EntwicklerInnen wenden und helfen Menschen mit verschiedenen Beeinträchtigungen trotzdem erheblich.
Zu geringe Farbkontraste
Wir beginnen dann doch am Monitor. Eines der wichtigsten Kriterien der Gestaltung Ihrer Website ist die Wahl geeigneter Farben. Dabei geht es nicht nur um den persönlichen Geschmack, sondern vor allem den Kontrast der einzelnen Farben zueinander. Dabei müssen sich Schrift und Grafiken vom Hintergrund abheben. Aber auch verschiedene Zustände von Elementen (aktiv/inaktiv) müssen unterschieden werden können. Um zu entscheiden, ob ein Kontrast hoch genug ist oder nicht, werden diese berechnet und mit Grenzwerten verglichen. Mehr Informationen dazu finden Sie in folgenden Blogeinträgen:
- 3:1, 7:1 – Wie berechnet sich eigentlich der Kontrast zwischen Farben?
- Barrierefreie Farben gibt es nicht
Um ihre eigenen Farben zu prüfen empfehle ich persönlich den Contrast Checker von WebAIM. Neben einer Eingabe der Farbwerte können diese bequem über eine Pipette ausgewählt werden. Sind die Kontraste zu gering, dann nutzen Sie den Schieberegler um sie heller oder dunkler zu machen bis der Kontrast stimmt. Wichtig: große Schrift haben Sie erst ab einer Schriftgröße von 24px (bzw. 19px bei fett gesetzter Schrift). Darunter zählen die Grenzwerte für kleine Schriften.
Auch WAVE markiert fehlende Kontraste. Hier ist jedoch Vorsicht geboten, denn oft ermittelt WAVE die falsche Hintergrundfarbe, wodurch mitunter fehlerhafte Resultate entstehen. Nehmen Sie die Hinweise von WAVE zum Kontrast also eher als Hinweis und überprüfen Sie die tatsächlichen Kontrastverhältnisse.
Prüfen Sie alle Ihre Texte und auch alle interaktiven Grafiken, also beispielsweise die Navigationspfeile in Slidern. Text, der direkt auf Bildern steht, sollten Sie dabei besonders im Auge behalten. Dieser muss an jeder Stelle die Anforderungen erfüllen! Suchen Sie sich also die Stelle zum Messen, an der Ihnen der Kontrast am geringsten vorkommt. Wenn Sie auf Nummer sicher gehen wollen, sollte Text auf Bildern immer einen eigenen Hintergrund erhalten.
Wenn Sie Stellen gefunden haben, an denen der Kontrast noch nicht passt, dann pflegen Sie diese Bereiche um oder passen mit geringen Programmierkenntnissen die Farbwerte im CSS (falls zugänglich) an.
Ungeeignete Linktexte
Im Zweiten Schritt gehen Sie Ihre Website einmal gründlich durch und schauen sich alle Links an. Stellen Sie sich nun vor, sie würden nur den Text hören, der verlinkt ist. Könnten Sie mit der Information entscheiden, ob Sie klicken möchten oder nicht? Unterscheidet er sich vom nächsten Link? Braucht es keine der umgebenden Informationen, beispielsweise die letzte Überschrift? Wenn Sie jetzt Links wie „Details“, „mehr Lesen“, „klicken Sie hier“ oder ähnliche Begriffe gefunden haben, dann sollten Sie ihre Linktexte überarbeiten. Im Blogartikel „Einen barrierefreien Linktext verfassen – von „Hier klicken“ zu Klartext“ finden Sie weitere Informationen über sprechende Linktexte.
Achten Sie besonders auf Teaser, also kurze Ausschnitte anderer Seiten oder News. Diese sind besonders gefährdet, nichtssagende und sich wiederholende Linktexte zu besitzen.
Neben sich wiederholenden und ungenauen Linktexten, sollten auch solche vermieden werden, die auf visuelle Informationen verweisen. Auf „den roten Button“ oder „den Link rechts“ zu klicken ergibt bei einem Screenreader keinen Sinn.
Fehlende Alternativtexte
Wenn Sie gerade dabei sind, alle Ihre Seiten einmal anzuschauen, dann prüfen Sie doch gleich noch alle eingebundenen Bilder. WAVE listet zuverlässig alle Bilder ohne Alternativtext auf. Das gilt allerdings nur für solche, die mit HTML eingebunden wurden. Prüfen Sie händisch auch die Bilder, die mit CSS eingesetzt werden.
Wichtig: Jedes Bild, dass relevanten Inhalt hat, benötigt einen Alternativtext. Die dekorative Welle im Hintergrund? Keine Textalternative. Das Porträt der Person, über die man auf der Seite schreibt? Hier sollte ein Alternativtext gepflegt werden. Dieser sollte einem blinden Nutzer das beschreiben, was auch ein sehender Nutzer dem Bild entnehmen würde. Verlieren Sie sich also nicht in unwichtigen Details und beschreiben detailreich jede Blume im abgebildeten Blumenstrauß, aber listen Sie bei Bedarf die verwendeten Pflanzen und Farben auf.
Weitere Tipps zum Schreiben und Einbinden von Alternativtexten an Bildern finden Sie im Artikel „Alternativlos gut – Wie sie barrierefreie Alternativtexte schreiben„.
Fehlende oder schlechte Überschriftenstruktur
Eine saubere Überschriftenstruktur ist nicht nur wichtig für die Barrierefreiheit. Sie hilft auch Suchmaschinen, Ihre Inhalte zu verstehen und die Relevanz für bestimmte Suchbegriffe einzuschätzen. Dabei ist es wichtig, die korrekte Verschachtelung beizubehalten. Das heißt, pro Seite gibt es genau eine h1, welche das Hauptthema der gesamten Seite beschreibt. Darunter folgen mehrere h2, die Unterüberschriften, und bei Bedarf weitere Ebenen bis hin zu h6. Wichtig ist, dass diese Überschriften wie ineinander verschachtelte Kartons verstanden werden müssen. Die Matroschka-Puppen des Internets. Das heißt, eine h3 gehört immer zur vorhergehenden h2. Bei der Auszeichnung sollten auch keine Ebenen übersprungen werden.
Prüfen Sie Ihre Überschriften und pflegen Sie diese bei Bedarf um. Für Nutzer von Screenreadern ist eine saubere Struktur besonders wichtig, denn Sie können mithilfe von Tastaturkürzeln im Baum der Überschriften navigieren. Sie werden aber sehen, auch Suchmaschinen werden es Ihnen danken. Eine barrierfreie Website ist besonders suchmaschinenfreundlich.
Nicht nutzbare Formulare
Schauen Sie sich zum Schluss Ihre Formulare an. Häufig finden sich eine Suche und ein Kontaktformular auf den meisten Websites. Vollständig barrierefreie Formulare sind ein aufwendiger Prozess, aber mit kleinen Änderungen, auf die Sie womöglich auch ohne Entwickler Einfluss haben, können Sie auch hier schon viel bewirken.
- Geben Sie jedem Eingabefeld eine Beschriftung, die bei Eingabe auch nicht verschwindet. Sogenannte Platzhaltertexte reichen nicht aus, denn nach der Eingabe ist nicht mehr klar, welche Angabe gefragt war. WAVE prüft zudem, ob die Beschriftungen den Eingabefeldern auch technisch richtig zugeordnet sind. Denn nur dann können Screenreader den Zusammenhang herstellen und den Text passend vorlesen.
- Entfernen Sie, wenn möglich, alle Captchas, denn diese wurden dafür gebaut, auszusperren. Wenn unbedingt notwendig, weichen Sie auf unsichtbare Captchas aus. Barrierefreie Alternativen zu Captchas finden Sie im Blog.
Barrierefreie Website mit wenig Aufwand – Fazit
Eine Website 100% barrierefrei umzusetzen ist Utopie. Sie komplett gesetzeskonform und womöglich darüber hinausgehend barrierearm zu realisieren, ist ohne die Unterstützung von Fachleuten schwierig. Aber Sie können selbst bereits viel für die Barrierefreiheit Ihrer Website tun und wichtige Probleme selbst lösen. Fangen Sie klein an und lösen Sie nach und nach weitere Probleme. Mit jeder entfernten Barriere helfen Sie Betroffenen und sind auf dem besten Weg zum Ziel: eine barrierefreie Website.