gelber Wegweiser im Flughafen

Die Anforderung der Barrierefreiheit ist aus der Softwareentwicklung und dem Webdesign nicht mehr wegzudenken. Um der Barrierefreiheit gerecht zu werden, gilt es viele Punkte zu beachten, sodass auch eingeschränkte Personen problemlos auf das Webangebot, die App oder die Software zugreifen sowie komfortabel und vollständig nutzen können.

Was bedeutet Barrierefreiheit?

Barrierefreiheit bezeichnet im Grunde eine technische und bauliche Umwelt, welche durch alle Personen ohne zusätzliche Hilfen genutzt und wahrgenommen werden kann. In Bezug auf eine Anwendung – gleichwohl, ob es sich um eine Website, App oder Software handelt – sollte diese ohne Einschränkungen oder dem Einsatz zusätzlicher Softwareinstallationen nutzbar sein, sodass alle Funktionen zur Verfügung stehen und auf die angebotenen Inhalte zugegriffen werden kann. Die Umsetzung eines optimalen und nutzerfreundlichen Zugangs kann in der Konzept- und Programmierphase ‚en dé­tail‘ schnell knifflig werden. Unsere Checkliste für eine barrierefreie Webanwendung hilft, die Umsetzung besser zu planen, kritisch zu überprüfen und gegebenenfalls zu überarbeiten.

Checkliste Barrierefreiheit: Für eine barrierefreie Website, barrierefreie App oder barrierefreie Software

Unsere Checkliste richtet sich zum großen Teil an die Vorgaben der Verordnung zur Schaffung barrierefreier Informationstechnik nach dem Behindertengleichstellungsgesetz BITV 2.0 (Barrierefreie-Informationstechnik-Verordnung). Ergänzend wurden die Zugänglichkeitsrichtlinien für Webinhalte WCAG 2.0 (Web Content Accessibility Guidelines 2.0) des W3C hinzugefügt, welche Empfehlungen zur barrierefreien Gestaltung von Webinhalten gibt.

Aufbau

  • Gewährleistung einer vollständigen Bedienbarkeit bei einer Bildschirmauflösung von mindestens 800 x 600 Pixel
  • Verwendung von Stylesheets für das Design
  • Sicherung der Nutzbarkeit, selbst bei ausgeschalteten Stylesheets
  • Bereitstellung separater Stylesheet für das Ausgabemedium „handheld“ sowie einer optimierten Druckversion „print“
  • Nutzung von HTML 4.x oder XHTML 1.x sowie CSS 2 gemäß der W3C-Regeln
  • Gewährleistung der Bedienbarkeit auch ohne Maus / nur mit der Tastatur
  • Verwendung von Listen und Listenelemente entsprechend ihrer Aufgabe und nicht für Layoutzwecke
  • Kennzeichnung von Frames mit sinnvollen Titeln und Namen

Navigationselemente

  • Bezeichnung von grafische Bedienelemente mit aussagekräftigen Alternativtexten (Alt-Tags)
  • Bereitstellung einer Inhaltsübersicht (Sitemap) oder anderweitiger Orientierungshilfe
  • Eindeutig identifizierbare Hyperlink
  • Linkziele mit informativem „Title“-Attribut (Beispielsweise: Link öffnet PDF-Datei in neuem Fenster)
  • Links auf Nicht-HTML-Seiten mit Beschreibung zum verlinkten Datenformat (z.B. PDF, Word usw.)
  • Verzicht auf automatische Pop-up-Fenster
  • Bereitstellung von inhaltlichen Sprungmarken

Farben und Kontraste

  • farbige und grafische Informationen müssen auch ohne Farbe sinnvoll genutzt und verstanden werden
  • Vermeidung von problematischen Farbkombinationen (gleicher Grauwert in S/W-Umsetzung)

Fließtext und Überschriften

  • Einsatz variabler Schriftgrößen
  • Nutzung von Überschriftentags von <h1> bis <h6> 
  • Verwendung von Unterstreichungen nur für Links
  • Hintergrund und Schrift verfügen über ausreichend Kontrast.
  • Sicherung der Erkenn- und Lesbarkeit von Textinhalten bei 200%-Vergrößerung durch die Browserfunktion

Textuelle Inhalte

  • Verwendung einer einfachen und klaren Sprache
  • Vermeidung von Umgangssprache und Slangwörtern
  • Angebot eines Glossars zum besseren Textverständnis
  • Verwendung von Title und Meta-Description zur inhaltlichen Orientierung der Suchmaschinen

Grafische Inhalte

  • Vermeidung von animierten Grafiken
  • Verwendung von aussagekräftigen Alternativtexten (Alt-Tags) zur Beschreibung der Grafik bzw. des Bildes

Tabellen

  • Verzicht auf verschachtelte Tabellen
  • Verwendung geeigneter Beschriftungen für den Tabellenkopf
  • korrekte Kennzeichnung von Datentabellen in Zeilen- und Spaltenüberschriften mittels <td> für Datenzellen und <th> für Überschriften

Formulare

  • Verwendung geeigneter Beschriftungen der Formularfelder
  • Gruppierung von Formularfeldern durch das Element <fieldset> 
  • Verwendung schlüssiger Formularblöcke
  • Betitelung jeder Formulargruppe durch den Einsatz des <legend>- Elements
  • Logische Verknüpfung der einzelnen Formularfragen und Eingabefelder mit Hilfe von <label> 

Scripte und Applets

  • Sicherung der Nutzbarkeit der Webanwendung selbst bei Abschaltung bzw. fehlender Unterstützung clientseitiger Scripte, Applets oder programmierte Objekte im Browser
  • Verzicht auf flackernde, blinkende oder sich bewegende Elemente
  • Keine Verwendung von ActiveX und VBScript

Was Youbility für Sie tun kann: Barrierefreiheit und Usability-Optimierung

Wir sind der richtige Ansprechpartner zur nutzerorientierten und Usability-Optimierung Ihrer Website, App oder Software. Als Web- und Usability-Experten entwickeln wir lösungsorientierte Produkte mit Blick auf ein optimales Nutzererlebnis unter Einhaltung geltender Konventionen zur Barrierefreiheit.

Bildquelle: © Paul Green | unsplash.com

Youbility, 30.07.2018