Progress zeigt sechs schnelle Wege zu barrierefreiem Code

Barrierefreie Software gewährleistet nicht nur die Inklusion von Menschen mit Beeinträchtigungen, sondern erhöht die generelle Benutzerfreundlichkeit einer Anwendung. Davon profitieren am Ende alle User. Für Entwickler kann das Thema Barrierefreiheit aber durchaus einschüchternd sein.

Progress, führender Anbieter für Anwendungsentwicklung und Infrastruktursoftware, empfiehlt ihnen, klein anzufangen und sich dann hochzuarbeiten. Besonders gut funktioniert dieser Ansatz bei komponentenbasierten Anwendungen, denn sie geben Entwicklern die Möglichkeit, ihren Basiskomponenten Funktionen für Barrierefreiheit hinzuzufügen und diese dann in anderen Komponenten weiterzuverwenden.

Entwickler können sich eine Handvoll häufig verwendeter Basiselemente aussuchen und folgende Maßnahmen umsetzen:

1. Semantisches HTML. Die wirkungsvollste Maßnahme zur Verbesserung der Barrierefreiheit ist die Verwendung der richtigen semantischen Elemente. Semantisches HTML teilt Screenreadern mit, was sie sehen, erleichtert die Navigation per Tastatur und organisiert eine Seite von innen heraus. Sehbehinderte Nutzer können eine Website oder Anwendung dann mit einem Bildschirmlesegerät überfliegen und schnell finden, was sie brauchen.

2. Alt-Texte. Alle Bilder einer Komponente sollten einen alternativen Text enthalten. Alt-Texte erklären sehbehinderten Nutzern und Usern, die die Bilder nicht laden können, was darauf zu sehen ist. Die Texte sollten nicht nur ein oder zwei Wörter beinhalten, sondern die Bilder anschaulich beschreiben. Beinhalten die Bilder selbst relevante Texte, etwa weil sie ein Schild oder einen Buchtitel darstellen, sollten diese Texte in die Alt-Angaben aufgenommen werden.

3. Barrierefreie Farbkontraste. Bei den Farbkontrasten ihrer UI-Elemente sollten Entwickler immer das Level AAA der WCAG (Web Content Accessibility Guidelines) anstreben. AAA bedeutet, dass ein extrem hoher Kontrast erreicht wird, der für die meisten Benutzer lesbar ist. Zur Überprüfung der Farbkontraste stehen Entwicklern zahlreiche Online-Tools wie der Adobe Color Contrast Checker zur Verfügung. 

4. Tastatur-Navigation. Die Navigation einer Anwendung per Tastatur ist ein bedeutender Bestandteil von Barrierefreiheit. Der Nutzer sollte visuelle Indikatoren dafür sehen, auf welches Element er sich gerade konzentriert und sollte auch auf nicht interaktive Elemente fokussieren können. Die Navigation sollte schnell möglich sein und dem visuellen Fluss der Seite folgen.

5. ARIA-Attribute. Wenn Entwickler bereits semantisches HTML verwenden, sind ARIA-Attribute (Accessible Rich Internet Applications) zur semantischen Anreicherung einer Anwendung meist überflüssig. Es gibt allerdings einige Fällen, in denen sie trotzdem nützlich sein können, beispielsweise ARIA Live für die Ankündigung von Inhaltsänderungen, ARIA Labels für Elemente, die keinen Text enthalten, oder ARIA Roles für Elemente, für die sich kein semantisches HTML verwenden lässt.

6. Vorlese-Tests. Entwickler sollten sich ihre Anwendungen regelmäßig selbst von Screenreadern vorlesen lassen, um ein Gefühl dafür zu bekommen, wie sie sich anhören und wo Optimierungsbedarf besteht. Am wirkungsvollsten sind Vorlesetests, wenn sie mit reiner Tastaturnavigation kombiniert werden. 

„Die Entwicklung von barrierefreiem Code funktioniert so, wie Entwicklung immer funktioniert. Es gibt keinen Ein-/Aus-Schalter, sondern eine gleitende Skala“, erklärt Kathryn Grayson Nanz, Developer Advocate Technology Community Relations bei Progress. „Das sollten sich Entwickler bewusst machen und einfach damit beginnen, barrierefreies Coding in ihre bestehenden Prozesse und Arbeitsmuster einzubauen. Und Code ist nicht in Stein gemeißelt. Sie können immer zurückgehen und etwas aktualisieren, wenn sie herausgefunden haben, wie es besser geht.“