Was umfasst barrierefreies Webdesign?

Barrierefreies Webdesign hört sich sowohl für Webdesign-Agenturen als auch Website-Betreiber gleichermaßen nach einem an: Jeder Menge Arbeit. Dabei ist den meisten nicht klar, was tatsächlich dahintersteckt. Und warum barrierefreies Webdesign in der Regel nicht so viel Aufwand bedeutet, wie zunächst befürchtet.

Wer legt fest, was barrierefreies Webdesign ist?

Hier sind zwei Fälle zu unterscheiden: Entweder Sie sind dazu verpflichtet, barrierefreies Webdesign anzubieten, oder Sie möchten freiwillig barrierefreie Standards auf Ihrer Website etablieren. Beispielsweise müssen öffentliche Stellen verschiedenste Normen verpflichtend erfüllen. Oder Sie entscheiden sich für ein Audit durch eine externe Prüfstelle, die die Einhaltung gewisser Vorgaben fordert. Die Liste an möglichen Maßstäben ist lang, nachfolgend finden Sie eine kleine Auswahl gängiger Standards:

• Europäische Norm EN 301 549: Accessibility requirements for ICT products and services
• Barrierefreie-Informationstechnik-Verordnung – BITV 2.0: Verordnung zur Schaffung barrierefreier Informationstechnik nach dem Behindertengleichstellungsgesetz für öffentliche Stellen
• EU-Richtlinie 2016/2102: Richtlinie über den barrierefreien Zugang zu den Websites und mobilen Anwendungen öffentlicher Stellen
• BayEGovV: Bayerische Verordnung über die elektronische Verwaltung und die barrierefreie Informationstechnik öffentlicher Stellen (ähnliche Verordnungen finden Sie auch für andere Bundesländer)
• internationale Richtlinie für barrierefreie Webinhalte (Web Content Accessibility Guidelines, WCAG)

Nach welchem Standard für barrierefreies Webdesign soll ich mich nun richten?

Wenn Sie eine externe Prüfstelle beauftragt haben, dann erfragen Sie den zugrunde liegenden Kriterienkatalog. Als öffentliche Einrichtung ist die BITV 2.0 die wichtigste Anlaufstelle. Wenn Sie sich die Barrierefreiheit selbst zum Ziel gesetzt haben, dann empfehlen wir ebenfalls die BITV 2.0 als sinnvolle Vorgabe. Diese umfasst einen Prüfkatalog, welcher sinnvolle Maßnahmen umfasst.

Wo Sie die konkreten Kriterien finden, welche Sie für barrierefreies Webdesign beachten sollten.

Der Onlinedienst der BITV-Selbstbewertung liefert Ihnen ein umfangreiches und leicht verständliches Tool, mithilfe dessen Sie auch als Laie weitgehend einschätzen können, wo Ihr Webangebot in Sachen Barrierefreiheit steht. Dieses Werkzeug ist komplett kostenfrei. Nach der Registrierung können Sie die interaktive Checkliste anhand Ihrer Website durcharbeiten und das Ergebnis speichern.

Konkrete Anforderungen an barrierefreies Webdesign.

Nachfolgende Anforderungen orientieren sich eng an BITV 2.0 und stellen eine Auswahl der unserer Ansicht nach wichtigsten Punkte dar. Dabei erhebt diese Liste keinen Anspruch auf Vollständigkeit, da einige Punkte der BITV-Anforderungen auf seltene Spezialfälle eingehen, welche den Rahmen dieses Artikels sprengen würden.

Quellcode

• Der Quellcode ist gemäß W3C-Validator korrekt.
• Überschriften müssen korrekt in der vorgesehenen Hierarchie von <h1> bis <h6> eingeordnet sein.
• Überschriften müssen einzigartig auf Unterseiten sein.
• Listen müssen in <ul> oder <ol>-Tags organisiert sein.
• Zitaten müssen in <blockquote>-Tags eingeordnet sein.
• Absätze müssen mit <p>-Tags ausgezeichnet sein.
• Hervorhebungen müssen mit <strong> oder <em> ausgezeichnet sein. <b> und <i>-Tags gelten bei Screenreadern nur als darstellungsbezogen, ebenso wie andere visuelle Hervorhebungen mit CSS.
• Tabellen müssen in <table>-Tags und den entsprechenden zugehörigen Strukturtags organisiert sein. Table-Header müssen mit <th> ausgezeichnet sein. Komplexe Tabellen mit mehreren logischen Ebenen erfordern eine erweiterte Zuordnung der Tabellenzellen mithilfe <scope>, <id> und <headers> Strukturelementen.
• Beschriftungen von Formularelementen müssen logisch mit dem zugehörigen Input-Feld verknüpft sein. Bei <label> erfolgt dies per for-Attribut. Gruppen von Formularelementen sollten per <fieldset> und <legend> unterteilt sein.
• Die angezeigte Reihenfolge entspricht idealerweise der Reihenfolge der Elemente im Quellcode. Screenreader hangeln sich linear durch den Quellcode und beachten mögliche Verschiebungen durch CSS-Code nicht.
• Textliche Bezüge auf visuelle Merkmale sind zu vermeiden. Beispielsweise stellt der Satz „Klicken Sie auf den grünen Button“ einen derartigen Bezug auf ein visuelles Merkmal dar.
• Die Bildschirmausrichtung darf nicht beschränkt sein. Inhalte müssen in Hoch- und Querausrichtungen gleichermaßen zugänglich sein. Zu Zeiten responsiven Webdesigns sollte das normalerweise kein Problem sein, aber eine kurze Überprüfung mit dem Smartphone schadet nicht.
• Inputfelder sollten das autocomplete-Attribut definiert haben. Dies zeigt dem Browser an, ob zur Verfügung stehende Autocomplete-Daten eingetragen werden sollen. Es kann auch spezifiziert werden, welche Daten eingetragen werden sollen, wie beispielsweise Vorname, Nachname oder Straße.
• Alle Starttags haben zugehörige Endtags.
• ID-Attribute sind eindeutig.
• Die Verschachtelung von Tags ist korrekt.
• HTML-Attribute dürfen innerhalb eines Tags nicht doppelt vergeben werden.
• Zu interaktiven Elementen umfunktionierte div, span etc. müssen semantisch ausgezeichnet sein.
• Dynamische Statusmeldungen sind mit ARIA live regions gekennzeichnet.

Videoalternativen

• Videos mit Tonspur sollten Untertitel zur Verfügung stellen, welche der Nutzer aktivieren kann. Die Bedienelemente müssen sich dabei innerhalb des Videoplayers befinden.
• Die Untertitel sollten synchron zum Bildmaterial sein.
• Schriftgröße, Schriftart und Hintergrund sollte vom Nutzer veränderbar sein.
• Idealerweise sind Untertitel mehrsprachig vorhanden, wenn Ihre Website mehrere Sprachen anbietet.
• Falls Videos wichtige Informationen zeigen, welche nicht von einer beschreibenden Audiospur begleitet werden, dann sollte diese ergänzt werden oder durch eine Volltext-Alternative ersetzt werden.

Audioalternativen

• Wenn auf Ihrer Website reines Audiomaterial abgespielt werden kann, dann sollte die gleiche Information in Text- oder Videoform als Alternative zur Verfügung stehen.

Textalternativen

• Oftmals haben interaktive Elemente wie beispielsweise Buttons keinen Text, sondern nur ein Icon oder anderweitige grafische Bestandteile. Auch Teaserbilder, welche zu Beiträgen verlinken, fallen in diese Kategorie. Diese Elemente sollten Alternativtexte hinterlegt haben, welche das Ziel des Links oder die ausgelöste Aktion beschreiben.
• Grafiken und Bilder, welche zwar nicht interaktiv sind, aber dennoch wichtige Informationen enthalten, müssen ebenfalls mit beschreibenden Alternativtexten versehen sein. Die meisten Content-Management-Systeme bieten diese Funktion im Standard an.
• Dekorative Grafiken und Bilder, welche keine Information transportieren, sollten leere alt-Attribute enthalten. Screenreader ignorieren diese Grafiken, was im Sinne des Nutzers ist. Komplett fehlende Attribute veranlassen den Screenreader zum Vorlesen des Dateinamens, was im Falle von dekorativen Elementen nicht erwünscht ist.
• Falls CAPTCHAs verwendet werden um Spam-Nachrichten in Kontaktformularen zu erkennen, dann sind diese meistens textbasiert. Klassischerweise muss aus mehreren Bildern das richtige ausgewählt werden, oder eine Zeichenfolge muss aus einem schwer lesbaren Bild abgetippt werden. Diese CAPTCHAs sollten mindestens eine text- oder audiobasierte Alternative bieten.

Unterscheidbarkeit

• Die Website muss ohne Farbwahrnehmung verwendbar sein. Hervorhebungen dürfen sich nicht ausschließlich auf Farbe beschränken.
• Der Kontrast von Text, Grafiken und Bedienelementen muss ausreichend hoch sein.
• Der Text sollte auf 200 % vergrößerbar sein, ohne dass dabei Inhalt oder Funktionalität verloren geht. Dabei ist ein Bedienelement auf der Website nicht zwingend erforderlich, aber der Browser-Zoom muss unterstützt sein.
• Grafiken sollen nicht für die Darstellung von Schriften verwendet werden. Logos sind hiervon ausgenommen. Das ist eine gängige Praxis, die wir ohnehin für alle Websites empfehlen.
• Bei einer Viewport-Breite von 320 px darf kein horizontaler Scroll notwendig sein, außer spezielle Inhaltselemente verlangen dies (beispielsweise Diagramme und Tabellen).
• Nutzer können im Browser Stile für Schriftgröße, Schriftart, Schriftfarbe, Zeilenabstand, Wortabstand, Buchstabenabstand und Absatzabstand hinterlegen. Diese Formatierungen überschreiben die auf der Website definierten Werte. Die barrierefreie Website darf dies weder verhindern, noch dürfen dadurch Informationen auf der Website verloren gehen. Gerade bei großen Schriften verschwinden gelegentlich Inhalte hinter Bildern oder ragen unleserlich aus Containern hinaus.
• Zusätzliche Inhalte, welche per Hover, Klick oder Focus eingeblendet werden, dürfen bei Mausbewegung auf dem Element nicht verschwinden. Der Zusatzinhalt muss ohne Verschiebung des Fokus vom Element wieder schließbar sein. Der Inhalt darf nicht zeitgesteuert automatisch geschlossen werden.

Navigierbarkeit

• Die Website sollte im Quellcode semantisch korrekt in <header>, <main> und <footer> unterteilt sein.
• Sidebars sollten mit <aside> ausgezeichnet werden.
• Navigationen sollten mit <nav> ausgezeichnet werden, damit Screenreader diese zuverlässig erkennen können.
• Eine Sprungnavigation über Ankerlinks hilft dem Betrachter dabei, auf langen Unterseiten schneller zum gewünschten Abschnitt zu gelangen.
• Breadcrumb-Navigationen haben einen Hinweis wie „Seitenpfad“, „Sie sind hier“ oder „Navigationspfad“ vorangestellt, damit Screenreader diese einordnen können.
• Iframes müssen mit title-Tags ausgezeichnet sein.
• Dokumenttitel beschreiben den Inhalt der Unterseite.
• Ziel oder Zweck des Links sollen aus dem Linktext hervorgehen oder aus dem direkten Kontext des Links ermittelbar sein. Insbesondere Links mit unspezifischen Beschreibungen wie „mehr“ oder „hier klicken“ sollten vermieden werden.
• Download-Links sollten ein zusätzliches Icon aufweisen, welche auf den Download hinweisen.
• Externe Links sollten ebenfalls ein zusätzliches Icons aufweisen. Dadurch sieht der Nutzer sofort, dass ein Klick zu einer externen Website führt.
• Es muss mindestens zwei unterschiedliche Zugangswege geben, um zu den Unterseiten und Inhalten der Website zu gelangen. Dazu gehört das Menü, die Suchfunktion, die Sitemap und Links innerhalb des Inhaltsbereichs von Unterseiten.
• Die Beschriftung von Bedienelementen muss der angezeigten Beschriftung entsprechen. Texte dürfen beispielsweise nicht per CSS abgeändert werden.

Formulare

• Wenn ein Formular Fehlermeldungen erzeugt, sollen die fehlerhaft ausgefüllten Felder angezeigt und der Fehler beschrieben werden.
• Formularfelder sind beschriftet und das Eingabeformat ist ersichtlich.
• Validierungsmeldungen müssen spezifisch sein und eine Hilfestellung zur korrekten Eingabe liefern.
• Bei wichtigen Dateneingaben (etwa bei finanziellen Transaktionen) gibt es die Möglichkeit, die Dateneingabe rückgängig zu machen oder sie vor dem Abschicken zu überprüfen und zu korrigieren. Erfolgreiche Formularabsendungen werden bestätigt.

Vorhersehbarkeit

• Bei Fokus-Änderung darf sich der Kontext der Website nicht ändern. Es darf beispielsweise kein Overlay ausgelöst werden.
• Während der Eingabe darf sich der Kontext der Website nicht ändern. Beispielsweise dürfen keine Popups während der Eingabe ausgelöst werden.
• Die Navigation sollte über die Website hinweg konsistent sein. Das Hauptmenü sollte also auf allen Unterseiten gleich aussehen.
• Bezeichnungen wiederkehrend ähnlicher oder gleicher Elemente sollten konsistent sein.

Tastatursteuerung

• Die Website muss komplett ohne Maus mit der Tastatur nutzbar sein.
• Es dürfen keine Tastaturfallen erzeugt werden, also Elemente, von denen man mit der Tastatur nicht mehr wegnavigieren kann.
• Die Reihenfolge der Tabulator-Steuerung muss sinnvoll sein.
• Der Tastatur-Fokus muss ersichtlich sein. Die Auszeichnung weicht von Browser zu Browser ab.
• Individuelle Tastenkürzel müssen deaktivierbar sein.

Zeitbegrenzungen

• Zeitbegrenzungen müssen verlängerbar sein, beispielsweise ein automatischer Logout nach Inaktivität.
• Bewegte Elemente sollen möglichst nicht ablenken. Die Bewegung sollte auf maximal 5 Sekunden begrenzt sein oder komplett deaktivierbar sein.
• Bewegte oder automatisch aktualisierte Inhalte, wie beispielsweise Slider, sollen zum Lesen anhaltbar sein.

Sprache

• Die Sprache der Seite sollte über <html lang="de"> angegeben werden. <meta http-equiv="content-language" content="de"> ist veraltet und sollte nicht mehr verwendet werden.
• Falls innerhalb einer Unterseite verschiedene Sprachen auftreten, so müssen die abweichenden Elemente mit dem lang-Attribut gekennzeichnet werden.

Dokumentation und Support

• Verfügbare und nicht verfügbare Funktionen zur Barrierefreiheit sollten auf der Website zugänglich sein, idealerweise im Rahmen der Erklärung zur Barrierefreiheit.
• Es müssen verschiedene Kanäle zur Kommunikation mit dem technischen Support bereitstehen, beispielsweise E-Mail, Livechat, Telefon und Videotelefonie.
• Der technische Support per E-Mail, Livechat und Telefon muss die Barrierefreiheitsfunktionen der Website kennen und zusätzliche Hilfestellungen bieten können.

Barrierefreiheitsfunktionen

• Wenn Ihre Website unterstützende Werkzeuge bereitstellt, welche die Barrierefreiheit verbessern, so muss die Aktivierung und Nutzung dieser Funktionen selbstverständlich barrierefrei sein. Das bedeutet beispielsweise, dass Screenreader einfach auffindbar und aktivierbar sein sollen. Oder kurz gesagt: Wenn Sie Tools für Barrierefreiheit verwenden, dann sollten diese barrierefrei sein.
• Wenn Sie auf Ihrer Website Dokumente und Daten zwischen verschiedenen Formaten konvertieren, dann sollten Barrierefreiheitsfunktionen erhalten bleiben.

Hinweis

Von uns bereitgestellte Informationen und Hinweise zu steuerrechtlichen, datenschutzrechtlichen und
weiteren rechtlichen Themen dienen ausschließlich dem unverbindlichen Informationszweck und stellen keine Rechtsberatung dar. Wir übernehmen keine Gewähr für die Aktualität, Korrektheit, Vollständigkeit und Qualität der bereitgestellten Informationen. Für verbindliche Antworten empfehlen wir eine
qualifizierte Rechtsberatung durch einen Steuerberater oder Fachanwalt.