Inhaltsverzeichnis

1. Warum Barrierefreiheit wichtig ist
2. Was ist Barrierefreiheit?
3. Was eine barrierearme Webseite ausmacht
4. Wie bediene ich eine Webseite mit der Tastatur?
5. Barrierefreie Webseiten entwickeln
6. Zugänglichkeit auf webfluence.de
7. Zugänglichkeit von Kundenwebseiten
8. Weiterführende Informationen

Warum Barrierefreiheit wichtig ist

Fokus bei der Entwicklung vieler Webseiten und Webanwendung liegt meiner Erfahrung nach häufig auf Design und Suchmaschinenoptimierung (SEO).

• Design ist wichtig, um die User nicht abzuschrecken und die intuitive Seitenbenutzung zu unterstützen.
• SEO ist wichtig, weil es als Teil der Traffic-Strategie i.d.R. einen Einfluss auf die Zielerreichung hat – z.B. Reichweite, Leads oder Umsätze generieren.

Diese Dinge haben also durchaus ihren Sinn. Doch fehlt in der Rechnung meiner Meinung nach die Barrierefreiheit.

Das Thema wird häufig als „die Seite für Behinderte nutzbar machen“ verstanden und schnell wieder abgetan, weil „wir solche Kunden nicht haben. Das lohnt sich für uns nicht.“

Besonders kleinen Unternehmen, glaube ich diese Aussage. Vermutlich haben diese kaum oder sogar keine stark eingeschränkten Kunden. Zumindest sehen sie diese in ihren Büros vor Ort nicht.

Und dennoch glaube ich, dass viele nicht eingeschränkte Kunden und Interessenten von einer möglichst barrierefreien Webseite (der kleinen Firma) profitieren. Und zufriedene User geben der Firma eine Chance auf Erfolg im Internet.

Beispiele, wie Barrierefreiheit sich positiv alle User auswirkt

An dieser Stelle eine kleine Liste mit wirklich einfach umzusetzenden Dingen, die bereits einen Einfluss haben.

• Links unterstreichen anstatt nur farblich zu markieren: Nun weiß jeder, egal ob farbenblind oder nicht, dass das Element klickbar ist.
• Hohe Kontrastwerte zwischen Schrift und Hintergrund einhalten: Menschen mit schlechten Augen und Menschen in Situation mit geblendetem Display können Inhalte einfacher erfassen.
• Label in Formularen anzeigen anstatt nur Platzhalter zu nutzen: Nun können Screenreader blinden Menschen erklären, was in das Feld gehört. Und nicht-blinde Menschen sehen jederzeit, was sie in das Feld eintragen sollen. Wenn der Browser das Feld mit dem AutoFill ausfüllt, kann der User kurz kontrollieren, ob die Daten in den richtigen Feldern stehen und absenden. Super einfach.

Alleine bei diesen drei sehr einfachen Beispielen wird schnell klar, dass Barrierefreiheit und allgemeine Benutzerfreundlichkeit nah beieinander liegen. Selbst wenn eine Maßnahme hauptsächlich durchgeführt wird, um Behinderte zu unterstützen, so kann das am Ende bedeuten, dass alle User davon profitieren.

Beispiele, wie sich Barrierefreiheit für Webseitenbetreiber lohnt

• Service verbessern: Informationsbeschaffung der Menschen unterstützen und einen guten Eindruck hinterlassen.
• Image absichern: Auch Menschen mit Einschränkungen haben heute die Möglichkeit, in Social Media einen Post abzusetzen, der viral geht. Die eigene Firma als positives Beispiel zu positionieren, ist vermutlich besser als von verärgerten Usern bei einem Shitstorm zerpflückt zu werden.
• Mehr Menschen erreichen: Best practices der Barrierefreiheit sind mitunter auch SEO-relevant
• Rechtssicherheit schaffen: in einigen Ländern ist Barrierefreiheit auch rechtlich verpflichtend. In Deutschland gilt der rechtliche Aspekt derzeit nur für Behörden, soweit ich informiert bin.

Nach der EU -Richtlinie sind alle die Stellen, die zur Einhaltung der EU -Vorschriften zur Vergabe öffentlicher Aufträge verpflichtet sind, auch zur Barrierefreiheit von Websites und mobilen Anwendungen verpflichtet.

FAQ zur Umsetzung der EU-Richtlinie zur Barrierefreiheit von Websites und mobilen Anwendungen öffentlicher Stellen

Was ist Barrierefreiheit?

Digitale Barrierefreiheit ist der Versuch, die Inhalte einer Webseite oder Anwendung möglichst vielen Menschen einfach zugänglich zu machen.

Habe ich in ähnlicher Form mal irgendwo im Netz gelesen.

Es gilt also, möglichst viele Menschen an der digitalen Informationswelt teilhaben zu lassen. Denn nur wer teilhaben kann, der kann auch ein Kunde werden oder anderweitig einen Wert einbringen.

Die digitale Teilhabe schließt dementsprechend auch Menschen mit Behinderungen ein.

Fast 10% Schwerbehindertenquote in Deutschland

Laut statistischem Bundesamt wurden im Jahr 2019 7,9 Millionen schwerbehinderte Menschen in Deutschland erfasst. Das entspricht einer Schwerbehinderten­quote von 9,5%. Bei den Über-64-Jährigen liegt die Schwerbehinderten­quote sogar bei 25,3%.

Spannend ist, dass die Behinderungen in 89% der Fälle nach einer Krankheit auftreten und bleiben. Nur 3% waren angeboren.

Einschränkungen, die einen eigenen Weg erfordern, um auf Inhalte im Web zuzugreifen:

• kognitive Behinderungen: z.B. Beeinträchtigungen in Sprach- und Auffassungsgabe, mangelnde Bewegungskoordination
• körperliche Behinderungen: z.B. Seh- und Hörbehinderungen
• vorübergehende Behinderungen: z.B. Gebrochener Arm, Augenentzündung

Als kleine Ergänzung möchte ich noch die „Wurst- und Zitterfinger“ anbringen. Vermutlich – ich weiß es nicht – sind diese Dinge selten wirklich diagnostiziert und als Krankheit eingestuft. Doch wer kräftige Finger hat, kann ebenfalls Probleme bei der Bedienung kleiner Buttons auf Touchscreens haben.

Es geht also nicht nur um wirklich schwere Behinderungen, sondern auch um allgemeine Probleme und Beeinträchtigungen, die Menschen haben können.

Ziel der Barrierefreiheit

Das große Ziel der Barrierefreiheit sollte nun klar sein.

Möglichst viele Menschen teilhaben lassen und Zugang zu Informationen ermöglichen.

Das wird in unserer zunehmende digitalen Welt auch immer wichtiger.

Der freie Zugang zu Informationen und Angeboten ist von enormer Bedeutung für uns alle. Zum einen, um wirtschaftlich mithalten zu können und zum anderen, um persönlich Teil der Gesellschaft sein zu können.

Auf technischer Ebene bedeutet das Ganze: Tools – also Soft- und Hardware – zu unterstützen, die es Menschen mit Einschränkungen ermöglichen, auf das Web zuzugreifen. Nicht immer können beeinträchtigte Menschen einfach Maus, Bildschirm und Tastatur nutzen.

Was eine barrierearme Webseite ausmacht

Eine barrierearme Webseite zeichnet sich im Kern dadurch aus, dass Menschen mit Einschränkungen die Seite gut nutzen können.

Das ist nun zugegebenermaßen schwammig formuliert und schlecht messbar, wenn ich nicht gerade assistive Technologie in meiner Nähe habe, um die Seite ausführlich und richtig – das ist gar nicht so leicht – zu testen.

Um die Bewertbarkeit zu vereinfachen und Grundregeln für Webentwickler zu kommunizieren, gibt es die Web Content Accessibility Guidelines (engl.), kurz WCAG.

Die WCAG gibt es in mehreren Versionen und werden mit der Entwicklung der Technik aktualisiert, um auch für neue Technologien Anhaltspunkte zu geben.

Die Kerneigenschaften einer barrierefreien Webseite sind laut WCAG:

• Wahrnehmbar: Inhalte und Bedienelemente sollen wahrgenommen werden können. Das bedeutet beispielsweise, dass es Textalternativen für wichtige Fotos auf einer Seite gibt, damit Screenreader dem Menschen den Inhalt vorlesen können.
• Bedienbar: Die Seite soll bedien- und navigierbar sein. Das bedeutet auch, dass die Seite beispielsweise ausschließlich per Tastatur funktionieren soll und hilfreiche Fokus-Indikatoren anzeigt.
• Verständlich: Die Bedienung und der Inhalt sollen leicht verständlich sein. Stichwörter sind also einfache Sprache und hilfreiches Nutzerfeedback bei Interaktionen.
• Robust: Inhalte sollen von einer breiten Masse an Zugangsformen geeignet sein. Das betrifft sowohl Hard- als auch Software.

Wahrnehmbar: Eigenschaften, die die Wahrnehmbarkeit verbessern

• Kontrast: Biete einen ausreichender Kontrast zwischen Vor- und Hintergrundfarben.
  • Tipp: Verwende den Contrast Checker (engl.) und gehe die Farbpalette einmal durch.
  • An einigen Stellen scheint die Formel der Kontrast-Rechners nicht ideal zu sein. Beispielsweise wird schwarzer Text auf einem orangenfarbenem Button empfohlen. Das erachte ich als schwerer zu lesen, als weißen Text auf orangenfarbenem Hintergrund.
• Linkkennzeichnung: Hebe Links (und Buttons) nicht ausschließlich durch farbige Schrift hervor. Nutze einen von der Farbe unabhängigen Indikator.
  • Tipp: Unterstreiche Links im Fließtext. Kennzeichne Button-Links mindestens mit Hintergrundfarbe in einem Kasten.
• Textalternativen: Stelle Alternativen für nicht-Text-Inhalte, also z.B. für hörbare und visuelle Inhalte, bereit. Das betrifft beispielsweise Fotos, Video und Audio.
  • Tipp: Statte SVG-Icons mit aria-label– und Fotos mit alt-Attributen aus, sofern sie nicht nur dekorativ, sondern inhaltlich oder funktional zur Seite beitragen.
  • Für Videos bleibt aus Gründen des Umsetzungsaufwands vermutlich erstmal nur eine YouTube-Einbettung. Bin mir nicht sicher.
• Schrift: Verwende einfach zu lesende Schriftart in geeigneter Dicke und Größe.
  • Tipp: Vermeide Comic-Schriften. Nutze mindestens eine Schriftdicke von 400 und Schriftgrößen zwischen 16 und 21 Pixel. Je nach Kontext der Darstellung.

Bedienbar: Eigenschaften, die die Bedienbarkeit verbessern

• Animationssteuerung: Ermögliche Usern, bewegende und blinkende Inhalte abzustellen, wenn sie nicht für eine Funktion oder Informationsübermittlung essenziell sind.
  • Tipp: Frage mit mit der CSS Media Query pefers-reduced-motion: reduce (engl.) ab, ob ein User eine Präferenz gegen Bewegung gesetzt hat. Wenn dem so ist, dann deaktiviere die Bewegungen standardmäßig.
• Bedienelemente: Stelle Steuerungselemente für automatische Slider, Videowiedergabe, u.Ä. bereit.
• Eingabegeräte: Ermögliche die Bedienung der Seite mit verschiedenen Eingabegeräten. z.B. Maus, Tastatur und Touch – unabhängig der Bildschirmgröße.
• Navigation: Verwende Überschriften, skip-links, konkrete Linktexte und einen Fokus-Indikator (engl.), damit sich User auf der Seite zurechtfinden und einfach navigieren können.
  • Tipp zu konkreten Linktexten: „Hier klicken“ ist nicht konkret. „Unsere Dienstleistungen ansehen“ ist konkret.
• Tastaturbedienung: Stelle sicher, dass die Seite vollständig mit der Tastatur als alleiniges Eingabegerät bedient werden kann.

Verständlich: Eigenschaften, die die Verständlichkeit verbessern

• Sprache: Verwende einfache Sprache, damit möglichst viele Menschen deine Inhalte verstehen.
  • Tipp: Fachwörter meiden, wenn möglich. Abkürzungen vor der ersten Verwendung definieren.
• Einheitlichkeit: Etabliere wiederkehrende Bewegungs- und Interaktionsmuster auf verschiedenen Unterseiten. So versteht der User, wie die Seite funktioniert.
  • Tipp: Stelle solide Funktionalität vor Spielerei und Ego. Es ist nicht immer klug, etwas Individuelles zu machen. Besonders weit verbreitete Muster sollten eingehalten werden.
• Feedback: Hilf dem Nutzer bei Eingaben und möglichen Fehlerbeseitigungen.
  • Tipp: Kommuniziere klar, welche Datenformate deine Seite akzeptiert, sofern Beschränkungen in Formularen vorhanden sind. Gib hilfreiche Fehlermeldungen und Tipps, wenn der User einen Fehler abschicken will.

Robust: Eigenschaften, die die Robustheit verbessern

• Eingabeprogramme: Sorge dafür, dass die Seite mit aktuellen Browsern und assistiver Technologe funktioniert.
• Semantik: Verwende semantisches HTML. Wenn das nicht möglich ist, beispielsweise für individuelle User Interface Komponenten, dann füge entsprechende WAI-ARIA-Attribute hinzu.

Hervorragende Browserkompatibilität mit assistiven Technologien ist vermutlich schwer zu erreichen. Eine kleine Umfrage zur Screenreader-Nutzung (engl.) aus dem Jahr 2017 deutet an, dass knapp über 30% der Screenreader-User noch den Internet-Explorer nutzen. Für dieses Stück Software wird im Endkundengeschäft selten noch aktiv entwickelt und getestet.

Wie bediene ich eine Webseite mit der Tastatur?

Basis-Tastenkürzel

• TAB: fokussiert das nächste Element
• TAB + Shift: fokussiert das vorherige Element
• ENTER: öffnet Untermenüpunkte, Popups und aktiviert Buttons
• ESC: schließt Untermenüpunkte und Popups
• LEER: bestätigt eine Auswahlmöglichkeit bei mehreren Radio-Buttons

Einige Seiten bieten für individuelle Komponenten weitere Tastenkürzel an. Die oben dargestellte Liste ist nur als Einstieg zu verstehen.

Der erste Schritt, nachdem die Seite geladen ist

Sobald eine Seite aufgerufen und geladen ist, kannst du durch das Drücken der Tabulator-Taste das erste Element der Seite anvisieren.

Wenn an dieser Stelle auf visueller Ebene nichts passiert und du nicht weißt, was gerade passiert ist, dann ist das in der Regel kein gutes Zeichen für die Barrierefreiheit der Seite.

Barrierefreie Webseiten entwickeln

Der Hauptfokus bei der Erstellung von barrierearmen Webseiten liegt auf der Bedienbarkeit der Seite in verschiedenen Anwendungsszenarien.

Während der Entwicklung müssen Design- und Funktionswünsche regelmäßig in Abgleich mit dem Umsetzungsaufwand gebracht werden, um die nächsten Schritte abzustimmen.

Denn einfach mal hier und da einen Drittanbieter-Service integrieren, ist bei diesem Vorhaben nicht immer leicht.

Die Auswahl an Drittanbieter-Tools wird mit steigenden Ansprüchen geringer

Barrierefreiheit effizient umzusetzen, bedeutet meines Gefühls nach, eher Frameworks und Komponenten-Bibliotheken zu nehmen, die von großen Firmen/Teams angeboten und betreut werden oder individuell zu entwickeln.

Bei großen Projekten wird schon eher Wert auf Barrierefreiheit gelegt als bei kleinen Angeboten, deren Hauptziel es ist, erstmal Traktion am Markt zu generieren.

Besonders kleine Drittanbieter-Tools sind tendenziell eher selten – so mein Eindruck – barrierefrei.

Barrierefreiheit kommt gleichzeitig immer mehr ins Bewusstsein von Entwicklern, denke ich. Dieser Zustand könnte sich dementsprechend über die Zeit ändern.

Individuelle Entwicklung und Fokus aufs Wesentliche werden wieder interessant

Der Kriterienkatalog für die Wahl externer Abhängigkeiten wird länger. Es wird mehr Zeit investiert und abgewägt. Gegebenenfalls auch der eigene Entwickler häufiger gefragt, weil die Eigenentwicklung wieder eine interessante Option ist.

Das Ziel ist schließlich, die Seite möglichst vielen Menschen zugänglich zu machen. Und das nachhaltig. Das oberste ziel vieler Webprojekte – hübsch aussehen – ist nicht mehr alleiniges Entscheidungskriterium während der Konzeption und Entwicklung.

Meiner Meinung nach, hat eine barrierearme Zielstellung bei begrenztem Budget einen positiven Einfluss auf das gesamte Projekt.

Denn häufig verlässt der Wunsch nach dem „super individuellen Wow-Effekt“ im Design die Prioritätenliste des Auftraggebers.

Das finde ich als Entwickler gut. Schließlich darf ich mich darauf konzentrieren, ein solides Produkt zu erzeugen. Zahlreiche Stunden in den „Wow-Effekt“ zu investieren, den gefühlt keinen User wirklich weiterbringt, gehört der Vergangenheit an. Das ist sehr angenehm.

Ein kleiner Disclaimer

Eine moderne Webseite wird höchstwahrscheinlich nicht für 100% der potentiellen Leserschaft zugänglich sein.

Alleine schon, weil einige Menschen 10 Jahre alte Browser benutzen und eine Kompatibilität zu diesen vom Programmieraufwand her – zumindest meiner Meinung nach – in der Regel unverhältnismäßig ist.

Wie oben schon mehrfach verwendet, ist „barrierearm“ vermutlich ein passenderer Begriff als „barrierefrei“.

Zugänglichkeit auf webfluence.de

webfluence.de folgt dem Ansatz, die Inhalte möglichst vielen Menschen einfach zugänglich zu machen.

Umgesetzte Maßnahmen

• Textalternativen: Für visuelle Inhalte, wie Fotos oder Grafiken, wird im Quelltext eine Textalternative hinterlegt, sofern das visuelle Element nicht nur rein dekorativ sondern auch inhaltlich oder funktional wichtig ist.
• Navigationshilfen: Skip-Links und Fokus-Indikatoren sind auf jeder Seite eingebunden, um die Tastaturnavigation zu erleichtern.
• Semantisches Markup: Überschriften und Listen sind im HTML-Quelltext als solche gekennzeichnet. Statusänderungen dynamischer Elemente werden durch entsprechende ARIA-Attribute gekennzeichnet und mit JavaScript manipuliert.
• Input-Label: Eingabefelder in Formularen sind mit Labeln verknüpft, um die Bedienung mit Screenreadern zu erleichtern
• Tastaturbedienung: Bedienbarkeit der Seite per Tastatur ermöglichen.

Liste zu verbessernder Dinge

Im Folgenden eine kleine Liste von Dingen, die auf webfluence.de weiterhin verbessert werden können.

• Farbkontrast: Die Hauptfarbe von webfluence #69a1ff weist laut dem WebAIM Contrast Checker (engl.) einen zu geringen Farbkontrast für weiße Hintergründe auf. Das betrifft beispielsweise das Logo in der Navigationsleiste.
• Formularkennzeichnung: Das interaktive Anfrageformular sollte auf semantischer Ebene als Formular gekennzeichnet sein. Aktuell ist lediglich der letzte Slide zur Eingabe der Kontaktdaten als Formular gekennzeichnet.

Dein Feedback ist erwünscht

Ich freue mich über Feedback zur Nutzung von webfluence.de.

Wenn Bestandteile der Webseite nicht für dich oder mit deine assistive Technologie funktionieren, dann lasse es mich wissen.

Telefon: 0345 52485943

Mail: r.rosanke@webfluence.de

Zugänglichkeit von Kundenwebseiten

Als Webdesigner will ich dafür sorgen, dass die Webseiten meiner Kunden und Partner möglichst zugänglich sind.

Dafür achte ich auf folgende Punkte:

• Kontrastwerte: Alle verwendeten Kombinationen aus Hintergrund- und Textfarben werden auf ausreichenden Kontrast – mindestens Level WCAG AA – überprüft.
• Bedienung per Tastatur: Um die Bedienung per Tastatur zu ermöglichen, werden folgende Maßnahmen umgesetzt
  • Nutzung eines „accessibillity ready“ Themes oder individuelle Programmierung
  • Klickbare Elemente, wie Buttons und Links, erhalten einen Fokus-Indikator und sind per Tabulator-Taste anvisierbar
• Responsive Design: Die Darstellung der Inhalte passt sich automatisch an die Größe des Endgerätes an.
  • Optimiert wird auf eine vorher vereinbarte Spanne an Displaygrößen. In der Regel werden gängige Smartphones, Tablets, Laptops und Bildschirme für Desktop PCs berücksichtigt.
• Performance: Verzicht auf überladene Mehrzweck-Themes, damit die Webseite auch bei mobilen, oftmals langsameren, Internetverbindungen in einer annehmbaren Wartezeit aufgerufen werden kann.

Wenn ein Kunde mir – aus welchen Gründen auch immer – vorgibt ein spezifisches Theme oder Plugin zur Umsetzung der Arbeiten zu nutzen, dann kann ich natürlich nur im Rahmen, die die externe Software vorgibt, tätig sein.

Gleiches gilt für Designwünsche, die, aus Gründen der Unternehmenskultur oder des Brandings, in einer bestimmten Art und weise umgesetzt werden müssen.

Das sollte klar sein.

Weiterführende Informationen

• Aktion Mensch über Barrierefreiheit
• World Wide Web Consortium (W3C): Vorteile Barrierefreier Anwendung für Unternehmen (engl.)
• Assistive Software für Menschen mit Sehproblemen:
  • Apple VoiceOver
  • Android TalkBack
  • JAWS für PC (engl.)
  • NVDA für PC
  • Screenreader-Extension für Google Chrome (engl.)