Barrierefreiheit für Webseiten

Was ist Barrierefreiheit?

• Aktion Mensch: Was ist Barrierefreiheit?
• World Wide Web Consortium (W3C): Vorteile Barrierefreier Anwendung für Unternehmen (engl)

Digitale Barrierefreiheit ist der Versuch die Inhalte einer Webseite oder Anwendung möglichst vielen Menschen einfach zugänglich zu machen. Da sich das Internet schnell entwickelt, sehe ich die Zugänglichkeit eher als konstantes Engagement als einen definiten Zustand an.

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

Alleine schon, weil einige Menschen schon 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.

„Barrierearm“ wäre vermutlich also ein passenderer Begriff als „Barrierefrei“. Doch bleiben wir der Einfachheit halber jetzt bei dem allgemein bekannten Begriff.

Zugänglichkeit im Fokus

In einer Zeit, in der das Leben immer digitaler wird, ist es von essenzieller Bedeutung, dass die zur Verfügung stehenden Informationen und Anwendungen für möglichst viele Menschen zugänglich sind.

Das gilt natürlich auch für Webseiten.

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

Features auf webfluence.de

• 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

Shortcuts für Tastaturbenutzer

Für ein angenehmes Benutzererlebnis werden auf der gesamten Webseite einheitliche Shortcuts für die Ausführung bestimmter Aktionen verwendet.

• 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

Die Navigation per Pfeiltasten durch die Menüleiste ist nicht vorgesehen.

Ihr Feedback ist erwünscht

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

Wenn Bestandteile der Webseite nicht für Sie oder mit Ihrer assistiven Technologie funktionieren, dann lassen Sie es mich wissen.

Telefon: 0345 52485943

Mail: r.rosanke@webfluence.de

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

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 Displaybreite zwischen 300 und 2100 Pixel. Das umfasst gängige Smartphones, Tablets, Laptops und Bildschirme für Desktop PCs
  • Auf Wunsch kann zusätzlich dazu für die Darstellung auf Smartwatches und Fernsehern optimiert werden.
• 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. Das sollte klar sein.