Barrierefreiheit im Webdesign

27/09/21: Methoden, Checklisten, Tools und Praxis bei DRIVE für barrierefreies Webdesign, -konzeption und -entwicklung

Barrierefreiheit ist eines der wichtigen Themen in der Kommunikation. Wir wollen allen Menschen einen umfassenden Zugang und uneingeschränkte Chancen zur Nutzung aller Lebensbereiche bieten. Das betrifft uns auch und besonders in der Konzeption, Gestaltung und Entwicklung von webbasierten Anwendungen, also Websites, Webshops, mobilen Apps und vielem mehr. Damit wir bei DRIVE damit gut und umfassend arbeiten, schulen und bilden wir uns weiter und haben dafür Prozesse entwickelt und nutzen Tools. Diese machen uns die gestalterische Arbeit bedeutend leichter und sind wichtig für unsere Kunden. Hier kommt ein kleiner Einblick, von unseren Experten eigens zusammengestellt. 

Was ist "Barrierefreiheit"? Die Definition

Wie wir und man/frau "Barrierefreiheit" verstehen und erreichen wollen, steht bereits oben. Der Begriff selbst ist im Gesetz zur Gleichstellung von Menschen mit Behinderungen (Behindertengleichstellungsgesetz - BGG) in § 4 Barrierefreiheit so definiert, die Hervorhebungen kennzeichnen die für uns wichtigen Punkte. 

„Barrierefrei sind bauliche und sonstige Anlagen, Verkehrsmittel, technische Gebrauchsgegenstände, Systeme der Informationsverarbeitung, akustische und visuelle Informationsquellen und Kommunikationseinrichtungen sowie andere gestaltete Lebensbereiche, wenn sie für Menschen mit Behinderungen in der allgemein üblichen Weise, ohne besondere Erschwernis und grundsätzlich ohne fremde Hilfe auffindbar, zugänglich und nutzbar sind. Hierbei ist die Nutzung behinderungsbedingt notwendiger Hilfsmittel zulässig.“

Grundsätzliche Ziele im Bereich Web-Kommunikation

  • Leichte Zugänglichkeit von Webangeboten für ALLE ermöglichen
  • Barrieren vermeiden
  • Barrieren reduzieren

Wir wollen also hin zu einem möglichst „barrierefreiem Internet“.

Rechtliche Vorgaben

  • Gesetzesgrundlagen: Richtlinie (EU) 2016/2102, Behindertengleichstellungsgesetz (BGG), außerdem sind in Deutschland jeweils besondere Vorgaben der jeweiligen Bundesländer zu beachten.
  • Grundlage zur Umsetzung findet man hier: Barrierefreie-Informationstechnik-Verordung (BITV 2.0) und Web Content Accessibility Guidelines 2.1 (WCAG 2.1).
  • Besondere Perspektiven der digitalen Barrierefreiheit bestehen a) in der Verpflichtung öffentlicher Stellen, b) dem Onlinezugangsgesetz (OZG). Das Onlinezugangsgesetz (OZG) verpflichtet Bund und Länder, bis spätestens 2022 ihre Verwaltungsleistungen auch elektronisch über Verwaltungsportale anzubieten. Es gibt vor, dass Nutzer über alle Verwaltungsportale von Bund und Ländern einen barriere- und medienbruchfreien Zugang zu elektronischen Verwaltungsleistungen erhalten. 

Warum brauchen wir Barrierefreiheit im Web?

Und was bedeutet dies für unsere konkreten Anforderungen in Projekten für uns und für unsere Kunden? Bei der Konzeption und im Design stellen wir uns daher gleich zu Beginn immer Fragen wie diese: 

  • Welche Bedürfnisse könnten unsere Zielgruppen bei der Nutzung des Internets haben?
  • Wie könnten sich unsere Zielgruppen im Web bewegen?
  • Welche Herausforderungen gibt es für unsere Zielgruppen?

Zum Beispiel für Menschen mit eingeschränktem Sehen oder für Menschen mit eingeschränkter Motorik. Dies veranschaulichen wir anhand von Beispielen und im Austausch mit Nutzern. 

Die 7 Säulen der digitalen Barrierefreiheit im Webdesign

Was setzen wir damit Barrierefreiheit im Webdesign um und was bedeutet dies hier?

1. Alternativen für Grafiken und Multimedia

Ist die Website auch ohne Grafiken nutzbar?

2. Kontraste und Farben

Sind alle Informationen bei individueller Farbkombination in ausreichendem Kontrast vorhanden?

3. Vergrößerbarkeit

Ist eine Schriftvergrößerung möglich und trotzdem im Kontext passig?

4. Linearisierbarkeit

Ist die Website auch ohne CSS genauso nachvollziehbar?

5. Fokus-Management und dynamische Komponenten

Kann auf der Website angemessen über die Tastatur navigiert werden?

6. Verständlichkeit, Navigation und Orientierung

Sind Inhalte über unterschiedliche Wege zugänglich (Navigation, Suche etc.) und sind diese verständlich?

7. Strukturierte Inhalte

Haben Formularelemente beschreibende Beschriftungen und sind diese korrekt angeordnet?

Dos & Don´ts für Barrierefreiheit im Webdesign

Um Barrierefreiheit gut im Webdesign umsetzen zu können haben wir bei DRIVE konkrete Dos and Don´ts für bestimmte Zielgruppen gesammelt. Diese dienen unseren Designer*innen als Richtlinien und Regeln zur Gestaltung von Seiten und Anwendungen, den Navigationen, Layouts, Einstiegen und allen Elementen. Zum Beispiel:

  • Gestalten für Benutzer*innen mit Autismus
  • Gestalten für Benutzer*innen mit Schwerhörigkeit oder Gehörlosigkeit
  • Gestalten für Benutzer*innen mit motorischen Einschränkungen
  • Gestalten für Benutzer*innen mit Leseschwäche
  • Gestalten für Benutzer*innen mit Sehschwäche
  • Gestalten für Benutzer*innen von Screenreadern

Vorbereitungen auf die Prüfung der Barrierefreiheit

Grundlage aller Prüfungen ist das Verzeichnis der Prüfschritte nach bitvtest.de. Anhand der Prüfschritte bereiten wir die Gestaltung und Entwicklung vor und prüfen alle Elemente selbst darauf hin durch. Dennoch gibt es bei jeder Prüfung Spielräume, das muss man berücksichtigen.

Ziel: Das Prüfsiegel

Wenn wir den Test durchführen, empfehlen wir in der Regel, das Siegel anzustreben. Das bedeutet etwas mehr Kosten als ohne, aber ohne Siegel und es ist natürlich möglich den Test zu machen ,ohne ein Siegel zu erhalten. Nur ist das zumeist nicht empfehlenswert.

Gut: 2 Tests planen

Für das Siegel sollte man/frau zwei Tests einplanen: der erste findet eventuelle Fehler und schickt die Maßnahmen zu, der zweite Test prüft die Korrekturen - der Test wird sehr selten beim ersten Mal geschafft, bei rund 92 Prüfschritten. Die Prüfung selbst dauert zwei Wochen, der aktuelle Vorlauf sind 4 bis 6 Wochen. Bei der Prüfung testen zwei Personen unabhängig voneinander unterschiedliche Seiten und führen die Ergebnisse zusammen.

Bei der Prüfung arbeiten wir gern mit Stiftungen oder z.B. Blinden- oder anderen Verbänden. Diese haben im direkten täglichen Kontakt viel mit Menschen und ihren individuellen Barrieren zu tun. Dadurch haben die Tests noch eine andere Qualität und verbessern die Anwendung.

Relevante Prüfschritte für Webdesigner*Innen nach bitvtest.de

Unsere Designer*innen bei DRIVE haben zur Vorbereitung konkrete Checklisten, sind mit nützlichen Tools und notwendiger Software ausgestattet.

(Die verraten wir hier jetzt noch nicht, zeigen euch aber gern was bei konkreten Anfragen und Aufgaben :-))

Außerdem sind alle bei uns in Konzept, Design, Entwicklung und Projektmanagement auf das Thema geschult und eingerichtet. Anhand konkreter Aufgaben, Case Studies und Benchmarks darf sich jede/r mit den Aufgaben und Fragestellungen intensiv auseinander setzen. Diese sind auch in den frühen Konzeptions- und Designphase zur Diskussion mit Kunden in Projekten sehr wichtig und hilfreich. 

Recap und Ausblick

Unser Ziel ist: Wir wollen Webnutzung für ALLE ermöglichen! Die Aufgabe und Herausforderung dabei ist, unterschiedliche Wünsche der Kunden mit Anforderungen zur Barrierefreiheit in Einklang bringen. 

  • Mit Hilfe unserer Checklisten wollen und können wir dies bei JEDEM Design berücksichtigen. 
  • Wir verwenden Tools und Softwares. Denn: das macht es wirklich einfacher! Und es hilft, viele kreative Lösungen zur Erfüllung der Barrierefreiheit zu finden! 
  • Ganz wichtig ist immer: Testen nicht vergessen. Mit Dokumentation anhand der Checklisten.

Barrierefreheit wird immer eine große Rolle spielen

Womit wir künftig rechnen ist, dass die Anforderungen und Prüfschritte stetig weiter entwickelt werden. Es wird also wichtig sein, auch nach erstandener Erstprüfung wiederholt neu oder nachzuprüfen.

Zertifizieren ist gut

Und auch wichtig ist: die Zertifizierung. Sie hilft, die Anwendung zu verbessern. Und das so erworbene Zertifikat zeigt allen, dass das Unternehmen oder die Organisation diese User*innen ernst nehmen und ihnen das Leben so einfach wie möglich machen und damit Chancen eröffnen wollen. Und das ist gut so. 
 

Stephan Probst

Habt ihr Fragen?

Stephan Probst unter pole-position(at)drive.eu - frohe Botschaften für alle. Stephan ist DRIVE und seine Begeisterung reißt alle in der Agentur mit.

Claas Beuke

Habt ihr Fragen?

Claas Beuke unter pole-position(at)drive.eu - weiter, immer weiter. Claas liebt es, positiv nach vorne zu schauen.

Simon Domberg

Habt ihr Fragen?

Simon ist eine Bibliothek - nur moderner, schneller und zukunftsorientierter.

Simon Domberg unter pole-position(at)drive.eu