Illustration: Absmeier freepik

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, 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.«

Tipps zu barrierefreiem Code

Barrierefreier Code ist nicht nur eine gute Praxis, sondern auch eine gesetzliche Anforderung in vielen Ländern. Barrierefreier Code ermöglicht es Menschen mit Behinderungen, Webseiten und Anwendungen zu nutzen, die ansonsten für sie unzugänglich wären. Barrierefreier Code verbessert auch die Benutzerfreundlichkeit, die Suchmaschinenoptimierung und die Kompatibilität mit verschiedenen Geräten und Browsern. Aber wie kann man barrierefreien Code schreiben? Hier sind sechs schnelle Tipps, die Ihnen helfen können, Ihre Webseiten und Anwendungen für alle zugänglich zu machen.

1. Verwenden Sie semantische HTML-Elemente. Semantische HTML-Elemente sind solche, die den Inhalt und die Struktur einer Webseite beschreiben, wie z.B. <h1>, <p>, <nav>, <table> usw. Diese Elemente helfen Screenreadern und anderen assistiven Technologien, den Inhalt zu verstehen und zu navigieren. Vermeiden Sie es, nicht-semantische Elemente wie <div> oder <span> zu verwenden, um die Darstellung zu steuern. Verwenden Sie stattdessen CSS für das Layout und das Design.

2. Fügen Sie Alt-Texte für Bilder hinzu. Alt-Texte sind kurze Beschreibungen, die den Inhalt und den Zweck eines Bildes erklären. Sie werden von Screenreadern vorgelesen und erscheinen auch, wenn ein Bild nicht geladen werden kann. Alt-Texte sollten informativ, aber nicht zu lang sein. Vermeiden Sie es, redundante Informationen wie „Bild von“ oder „Logo von“ hinzuzufügen. Wenn ein Bild nur dekorativ ist und keinen wichtigen Inhalt vermittelt, können Sie einen leeren Alt-Text verwenden (alt=““).

3. Verwenden Sie kontrastreiche Farben. Kontrastreiche Farben sind solche, die sich deutlich voneinander abheben und den Text lesbar machen. Kontrastreiche Farben helfen Menschen mit Sehbehinderungen oder Farbenblindheit, den Inhalt zu erkennen. Vermeiden Sie es, Farben zu verwenden, die sich zu sehr ähneln oder schwer zu unterscheiden sind. Verwenden Sie auch nicht nur Farbe, um wichtige Informationen hervorzuheben oder zu vermitteln. Fügen Sie stattdessen andere visuelle Hinweise hinzu, wie z.B. Symbole, Unterstreichungen oder Schriftgrößen.

4. Machen Sie Ihre Formulare zugänglich. Formulare sind ein wichtiger Bestandteil vieler Webseiten und Anwendungen, die es den Benutzern ermöglichen, Daten einzugeben oder Aktionen auszuführen. Um Ihre Formulare zugänglich zu machen, sollten Sie folgende Punkte beachten:

– Verwenden Sie <label>-Elemente, um jedem Eingabefeld einen eindeutigen und sichtbaren Namen zuzuweisen.
– Verwenden Sie <fieldset>- und <legend>-Elemente, um verwandte Eingabefelder zu gruppieren und zu beschreiben.
– Verwenden Sie <input type=“radio“> oder <input type=“checkbox“> für Auswahlmöglichkeiten und stellen Sie sicher, dass jede Option einen eigenen <label> hat.
– Verwenden Sie <input type=“submit“> oder <button> für Schaltflächen und geben Sie ihnen einen aussagekräftigen Text.
– Verwenden Sie ARIA-Attribute (Accessible Rich Internet Applications), um zusätzliche Informationen über den Status oder die Rolle eines Formularelements bereitzustellen.

5. Bieten Sie Untertitel und Transkripte für Audio- und Videoinhalte an. Audio- und Videoinhalte sind beliebte Möglichkeiten, um Informationen oder Unterhaltung anzubieten. Um diese Inhalte zugänglich zu machen, sollten Sie folgende Punkte beachten:

– Bieten Sie Untertitel an, die den gesprochenen Text und andere wichtige Geräusche wiedergeben.
– Bieten Sie Transkripte an, die den gesamten Audio- oder Videoinhalt in Textform darstellen.
– Bieten Sie alternative Formate an, wie z.B. Gebärdensprache oder Audiodeskription.
– Stellen Sie sicher, dass Ihre Audio- und Videoinhalte über Tastatur oder Maus gesteuert werden können.

6. Testen Sie Ihre Webseiten und Anwendungen auf Barrierefreiheit. Der beste Weg, um sicherzustellen, dass Ihr Code barrierefrei ist, ist, ihn zu testen. Sie können verschiedene Methoden verwenden, um Ihre Webseiten und Anwendungen auf Barrierefreiheit zu überprüfen, wie z.B.:

– Verwenden Sie automatisierte Tools, die Ihren Code auf häufige Barrierefreiheitsprobleme überprüfen, wie z.B. Lighthouse, axe oder WAVE.
– Verwenden Sie manuelle Tests, bei denen Sie Ihren Code mit verschiedenen Browsern, Geräten und assistiven Technologien ausprobieren, wie z.B. Screenreader, Vergrößerungssoftware oder Tastatur.
– Verwenden Sie Benutzertests, bei denen Sie echte Menschen mit verschiedenen Behinderungen bitten, Ihre Webseiten und Anwendungen zu verwenden und Ihnen Feedback zu geben.

Fazit

Barrierefreier Code ist nicht nur eine moralische Pflicht, sondern auch ein Vorteil für Ihre Webseiten und Anwendungen. Indem Sie diese sechs schnellen Tipps befolgen, können Sie Ihren Code für alle zugänglich machen und eine bessere Benutzererfahrung schaffen. Wenn Sie mehr über Barrierefreiheit lernen möchten, können Sie sich diese Ressourcen ansehen:

– Web Content Accessibility Guidelines (WCAG)
– ARIA in HTML
– Web Accessibility Initiative (WAI)