Software für alle 7 Tipps für barrierefreie Entwicklung

Der 20. Mai ist der Global Accessibility Awareness Day. Die digitale Barrierefreiheit ist für die Teilhabe aller entscheidend geworden – und muss bereits in der Entwicklung fest verankert sein.

Eigentlich sollte es eine originelle Aktion zur Feier von 50 Jahren American Football im Farbfernsehen sein: Im Rahmen der „Color Rush“-Kampagne setzte der Sportartikelhersteller Nike 2015 eine Saison lang auf komplett einfarbige Trikots. Für das Spiel der New York Jets gegen die Buffalo Bills bedeutete dies: Rot gegen Grün.

E-Book zum Thema

Das eBook „Barrierefreie Software-Entwicklung“ zeigt die zukünftigen Anforderungen an Unternehmen und warum das Thema rasant an Bedeutung zunimmt.

eBook herunterladen

Doch damit geriet das Sport-Event zum Ratespiel für farbenblinde Zuschauer – diese konnten die beiden Mannschaften in ihren Jubiläumstrikots nicht auseinanderhalten. Was in diesem Beispiel höchstens ärgerlich ist, kann gerade in der heutigen Zeit drastische Nachteile für Menschen mit Behinderung bedeuten.

Corona-bedingt wurden zentrale Lebensbereiche in die virtuelle Welt verlagert: von Home-Office und Home-Schooling über Lebensmittelkäufe und Arztkonsultationen bis hin zu Bankgeschäften. Um sicherzustellen, dass entsprechende Angebote für alle zur Verfügung stehen, müssen digitale Produkte unabhängig von auditiven, kognitiven, visuellen, motorischen oder sprachlichen Beeinträchtigungen vollumfänglich nutzbar sein (egal ob dauerhaft oder kurzfristig).

Entwicklung mit Prinzipien

Bereits seit Jahren fordern daher verschiedene internationale Standards die Einhaltung zentraler Kriterien, die genau dies sicherstellen sollen. Besonders relevant im Kontext von Web-Applikationen sind die Web Content Accessibility Guidelines (WCAG).

Die Richtlinien für barrierefreie Web-Inhalte definieren, welche Aspekte Entwickler berücksichtigen sollten, damit ihre Anwendungen für eine möglichst große Bandbreite an Anwendern mit und ohne Einschränkungen nutzbar sind. Ihnen zugrunde liegen die sogenannten „POUR“-Prinzipien:

• Perceivable: Anwendern müssen Informationen und Benutzeroberflächen auf eine Art und Weise bereitgestellt werden, die sie wahrnehmen können. Dazu müssen etwa Textalternativen für grafische oder audio-basierte Elemente zur Verfügung gestellt werden.

• Operable: Die Benutzeroberflächen- und Navigationselemente müssen für jeden benutzbar sein. So sollte beispielsweise die gesamte Funktionalität der Lösung über Tastatureingaben verfügbar sein.

• Understandable: Die Information auf der Benutzeroberfläche muss verständlich sein. Für den Anwender sollte unmittelbar ersichtlich sein, wie er damit interagieren kann. Dazu gehören eine einfache Methode, die gewünschte Sprache festzulegen, ein klares Fokus-Element auf jeder Ansicht sowie eine konsistente Navigation.

• Robust: Der Inhalt der Anwendung muss robust genug sein, dass eine große Bandbreite an Anwendersystemen – inklusive assistiver, sprich unterstützender Technologien wie Bildschirmlesegeräte – diesen verarbeiten kann.

Auf Basis dieser Prinzipien fassen die WCAG-Richtlinien 78 konkrete Regeln zusammen: 30 davon müssen zum Erreichen des Compliance-Level A erfüllt werden, 20 weitere für Compliance-Level AA und alle 78 für Level AAA. Speziell für mobile Barrierefreiheit enthält Version 2.1 des Standards verschiedene weitere Anforderungen.

Pflicht oder Kür?

Die Erfüllung von Standards wie den WCAG reduziert nicht nur das Risiko, wegen Diskriminierung oder anderer gesetzlicher Verstöße rechtlich belangt zu werden. Die Einhaltung der Normen fördert auch ein positives Unternehmensbild, verbessert die Platzierung in Suchmaschinen und sorgt für eine optimierte Usability und damit Anwenderzufriedenheit.

E-Book zum Thema

Das eBook „Barrierefreie Software-Entwicklung“ zeigt die zukünftigen Anforderungen an Unternehmen und warum das Thema rasant an Bedeutung zunimmt.

eBook herunterladen

Für die Software-Entwicklung darf digitale Barrierefreiheit daher kein „nettes Zusatz-Feature“ sein, sondern muss im Fundament der Anwendung verwurzelt sein. Um etwa die Anforderungen von Regularien wie den Richtlinien für barrierefreie Web-Inhalte effizient umzusetzen, gilt es während des gesamten Entwicklungsprozesses auf die Einhaltung der Vorgaben zu achten.

Aufgrund der Fülle an Richtlinien lässt sich mithilfe einer Zusammenfassung allein noch keine umfassende Compliance sicherstellen. Die folgenden sieben Tipps jedoch sorgen für eine solide Grundlage, die wichtigsten und kniffligsten Herausforderungen der WCAG-Richtlinien anzugehen.

Sieben Tipps für grundlegende Barrierefreiheit

• Auf den Kontrast achten: Der WCAG-Standard gibt vor, dass Vordergrund- und Hintergrundfarben ein ausreichendes Kontrastverhältnis zueinander aufweisen müssen. Zur Erfüllung des AA-Levels sollte das Verhältnis mindestens 4,5:1 für Standardtext und 3:1 für besonders großen Text (18 Pixel oder mehr) betragen. Für AAA ist ein 7:1-Verhältnis für Standardtext und 4,5:1 für großen Text erforderlich.

• Nicht allein auf Farbe setzen: Informationen in Anwendungen sollten nie allein durch Farben vermittelt werden. Ein Textfeld, das die Farbe von grün nach rot wechselt, wenn ein unzulässiger Wert eingegeben wurde, ist für eine farbenblinde Person bedeutungslos. Farben müssen immer mit entsprechendem Text oder Beschriftungen genutzt werden.

• Verlinkungen richtig formatieren: Alle Links, die nicht aus Text bestehen (wie verlinkte Bilder), sollten Alternativtexte besitzen, die von Lesegeräten verarbeitet werden können. Der Zweck eines Links muss allein durch seine Beschriftung deutlich werden. Die visuelle Formatierung sollte den Erwartungen der Nutzer entsprechen – Blau ist eine etablierte Farbe für verlinkte Inhalte – und sich nach der Aktivierung verändern, um zu verdeutlichen, dass der Link bereits aufgerufen wurde.

• Eingabefelder beschriften: Jedes Eingabefeld benötigt eine zugehörige Beschriftung, die sich über oder links neben dem Feld befinden muss. Auf größere Abstände zwischen Beschriftung und Feld sollte verzichtet werden, da sonst ihre Zusammengehörigkeit nicht ersichtlich sein könnte. Bei Falscheingaben sollten Anwender unmittelbar informiert werden – idealerweise bereits während der Eingabe.

• Animationen barrierefrei einsetzen: Bildschirmlesegeräte können in der Regel keine Animationen verarbeiten. Entsprechend sollten Animationen in Textform beschrieben und vor assistiven Technologien verborgen werden. Bewerkstelligen ließe sich dies zwar über „display: none“ und „display: block“, doch damit gehen auch die Übergänge der Animation verloren. Durch einen CSS-Trick lassen sie sich erhalten: Ein aufpoppender Tooltip etwa wird durch „opacity: 1” eingeblendet und über „visibility“ für unterstützende Technologien sichtbar gemacht.

• Für sinnvolle Fokusreihenfolge sorgen: Die einzelnen Elemente einer Website oder Anwendung sollten den Fokus in einer Reihenfolge erhalten, die ihrer Logik entspricht und Bedienbarkeit sicherstellt. Entspricht die standardmäßige Tab-Reihenfolge nicht diesen Grundsätzen, lässt sie sich mithilfe des HMTL-Attributs „tabindex“ verändern.

• WAI-ARIA nutzen: Für optimale digitale Barrierefreiheit empfiehlt sich die Nutzung des WAI-ARIA-Standards („Web Accessibility Initiative – Accessible Rich Internet Applications“). Als Erweiterung zu HTML ermöglicht er es, spezifische Attribute hinzuzufügen, um HTML-Tags zu modifizieren. Ohne die Ergänzung von ARIA-Attributen beschreiben die Tags lediglich die Elemente der Website, z. B. <figure>, <figcaption>, <footer>, <header>, <main> oder <nav>. Die ARIA-Attribute ergänzen diese Beschreibungen und erlauben es Bildschirmlesegeräten so, die textuellen Informationen zu deuten und für den Anwender zu übersetzen. So lässt sich beispielsweise eine Checkbox identifizieren und gleichzeitig vermitteln, ob diese abgehakt ist oder nicht.

Mit technischen Hilfsmitteln zur barrierefreien Anwendung

Als integraler Bestandteil der Entwicklung bedeutet Barrierefreiheit einen höheren Aufwand für Entwicklerteams. Nicht selten mangelt es jedoch an den erforderlichen Kapazitäten, die relevanten Vorgaben zusätzlich während des gesamten Prozesses konsistent umzusetzen. In solchen Fällen können verschiedenste Software-Lösungen und -Tools unterstützen.

Farb- oder Kontrastprüfungs-Tools sind beispielsweise durchaus sinnvoll, um die Einhaltung der entsprechenden Vorgaben in der erstellten Anwendung zu verifizieren. Viele Entwicklerlösungen stellen Nutzern zudem Plug-ins oder automatisierte Test-Tools bereit, die bei Bedarf kontinuierlich die Einhaltung der WCAG-Richtlinien überprüfen.

Für eine automatisierte Umsetzung der Richtlinien können zum Beispiel Low-Code-Lösungen sorgen: Deren Applikationsvorlagen sind oft bereits nativ barrierefrei, indem sie durchgängig WAI-ARIA-Attribute nutzen oder für standardmäßigen Bedienmöglichkeiten per Tastatur sorgen.

Auf diese Weise können Entwickler vom zusätzlichen Mehraufwand, die Barrierefreiheit sicherzustellen, entlastet werden. Gleichzeitig bleibt sichergestellt, dass alle Anwender – unabhängig von vorhandenen Einschränkungen – digitale Angebote nutzen und damit umfassend an unserer heutigen digitalen Lebenswelt teilhaben können.

* Tino Fliege ist Solution Architect bei OutSystems.

E-Book zum Thema

Barrierefreie Software-Entwicklung

Zu kleine Schrift, die sich nicht vergrößern lässt, Farbschemata mit zu geringen Kontrasten, umständliches Scrollen durch Formulare u.v.m. – allgegenwärtige Barrieren bei der Nutzung digitaler Angebote. Alles bald Geschichte?

Dieses eBook greift folgende drei Aspekte auf:

• Trends der digitalen Barrierefreiheit
• Barrierefreies UI/UX-Design
• Hilfstechnologien für die barrierefreie Software-Entwicklung

eBook „Barrierefreie Software-Entwicklung“ herunterladen

(ID:47408893)