Barrierefrei mit Vaadin
Wenn man ein Produkt herstellt, dann wünscht man sich natürlich, dass es von möglichst vielen Menschen genutzt wird. Einigen Menschen muss man die Nutzung jedoch erst ermöglichen, nämlich indem man sein Produkt barrierefrei gestaltet.
Wenn man ein Produkt herstellt, dann wünscht man sich natürlich, dass es von möglichst vielen Menschen genutzt wird. Einigen Menschen muss man die Nutzung jedoch erst ermöglichen, nämlich indem man sein Produkt barrierefrei gestaltet. Dies gilt auch für die Webseiten und Anwendungen, die im Rahmen einer Software Entwicklung implementiert werden.
UI Designer, Software Architekten und Software Entwickler sollten sich den Anforderungen der Barrierefreiheit bewusst sein. Ein guter UI Designer weiß, worauf er achten muss, damit er die von Ihm entworfene Benutzeroberfläche barrierefrei gestaltet. Und ein guter Softwareentwickler weiss, wie er dies implementieren kann. Auf der Seite des Anwenders sorgt dann Assistenztechnik, wie Bildschirmleseprogramme, für eine barrierefreie Darstellung. Eine kritische Frage wäre dann, ob auch das verwendete Framework diese Massnahmen unterstützt.
Vaadin hat hier seine Hausaufgaben gemacht und einen Leitfaden zur Verfügung gestellt (https://vaadin.com/accessibility). Dieser orientiert sich an der amerikanischen Gesetzgebung (508 Standard) und den vom World Wide Web Consortium (W3C) empfohlenen Standards (hier und hier) und erklärt, wie sie mit Vaadin implementiert werden können.
Hier müssen wir Europäer jetzt unsere eigenen Standards daneben legen, um zu sehen ob sich die vorgeschlagenen Massnahmen decken. Dies ist insbesondere wichtig, wenn wir für Behörden und andere öffentliche Stellen entwickeln, da hier strengere Vorschriften gelten.
Ein kurzes Wort zu den Standards und Vorschriften, die hier gemeint sind: Hier wäre erstens die EU Richtlinie 2016/2102 zur Barrierefreiheit von Websites und mobilen Anwendungen öffentlicher Stellen zu nennen. Der Begriff “Websites” inkludiert hier auch jegliche Frontend Web Interfaces von Anwendungen, wie man sie mit Vaadin erstellen kann.
Es folgt die Europäische Norm EN 301 549, für Barrierefreiheit in der Informationstechnik. Auf diese wiederum bezieht sich die deutsche Barrierefreie-Informationstechnik-Verordnung (BITV 2.0),eine Rechtsverordnung zum Behindertengleichstellungsgesetz (BGG).
§ 2a des BITV 2.0 nennt explizit Webseiten, bzw. Webinterfaces sowie deren Inhalte. Auch mobile Anwendungen werden genannt. § 3 des BITV 2.0 fordert, dass die genannten Oberflächen sowie deren Inhalte “wahrnehmbar, bedienbar, verständlich und robust” sein müssen.
Die Inhalte müssen den Normen des Amtsblattes der Europäischen Union entsprechen, also der erwähnten EU Norm EN 301 549. Diese wiederum verweist auf die Standards des W3C, den Web Content Accessibility Guidelines 2.1 (WCAG 2.1). Folglich fahren wir sicher, wenn wir diesen folgen, und dies nicht nur Deutschlandweit, sonder auch international.
Assistenztechnik
Vaadin unterstützt Assistenztechnik, wie Bildschirmleseprogramme oder spezielle Tastaturen, unter anderem mit Attributen für den ARIA Standard. Für deren Verwendung wird auf einen älteren Wiki-Eintrag verwiesen.
Vaadin stört Assistenztechnik nicht und unterstützt deren Fokus-Tracking.
Alternative Texte für nicht-textuelle Elemente (WCAG 2.1, Abschnitt 1.1.1)
Jedes eingebettete Medium, welches Inhalte wie Bilder und Diagramme vermittelt, benötigt eine äquivalente Beschreibung in Text-Form. Diese kann dann von Text-to-Speech Software vorgelesen werden.
Bei einer Vaadin Applikation würde dies für AbstractEmbedded Objekte gelten, also iFrames, Bilder und eventuelle Flash Animationen. Auch betroffen sind Schaltflächen mit Bildern.
Möglichkeiten sind alternative Texte, die mit den Objekten verknüpft sind, oder Texte auf der Seite selbst. Letzteres wäre bei komplexen Grafiken, wie Diagrammen und Graphen, sinnvoll.
Alternative, beschreibende Texte wären auch für Audio Inhalte nötig. Auch Transkripte wären hier möglich. Bei Vaadin kann man hierfür ALT Texte oder Labels verwenden.
Äquivalente Alternativen für Multimedia Inhalte (WCAG 2.1, Abschnitt 1.2)
Videos benötigen Untertitel, während Videos ohne Ton eine synchronisierte Beschreibung benötigen. Diese müssen mit den Video-Plugins Ihrer Wahl implementiert werden. Vaadin selbst bietet hierfür keine Implementierungsmöglichkeiten.
Alternativen für Farben (WCAG 2.1, Abschnitte 1.4.1 und 1.4.3)
Die Vermittlung von Informationen mittels Farben sollte auch ohne diese möglich sein. Hier könnte es nützlich werden, dass Vaadin beim Login des Anwenders verschiedene Themen zur Auswahl stellt. Als Entwickler könnte man hier eine spezielle Theme für Farbenblinde zur Verfügung stellen. Auch sollte man bei dem Entwurf seiner Themen an genügend Kontraste denken.
Lesbarkeit von Dokumenten
Dokumente sollten auch bei deaktiviertem Stylesheet lesbar sein. Dies ermöglicht es Bildschirmleseprogrammen die Inhalte der Seite zu lesen.
Image Maps
Client-seitige Image Maps sind eine Voraussetzung für die Barrierefreiheit. Vaadin verwendet, über das ImageMap Addon, bereits client-seitige Image Maps als Widgets.
Tabellen
Zeilen- und Reihenheader müssen eindeutig identifizierbar sein. Mit Vaadin Grid kann dies per <th>-Element durchgeführt werden.
Per Markup sollten Daten- und Headerzellen assoziiert werden, falls die Zeilen und Reihenheader der Datentabelle zwei oder mehr logische Ebenen besitzen. Mit Vaadin Grid können die Zellen von Datentabellen per Scope ID und Header Attribut mit den jeweiligen Header assoziiert werden.
Identifizierbarkeit von Frames
Jeder Frame des Webinterfaces sollte eine Überschrift bekommen, welche den Zweck und den Inhalt des Frames beschreibt. In Vaadin können Frames und iFrames hierfür mit einem ALT text versehen werden.
Flackernde Seitenelemente (WCAG 2.1, Abschnitt 2.3)
Bildschirmflackern von einer Frequenz höher als 2 Hz und niedriger als 55 Hz sollte vermieden. Vaadin bietet keine flackernden Elemente an, jedoch sollte man darauf achten, keine Videos mit dieser Eigenschaft darzustellen.
Alternatives text-basiertes Webinterface
Eine Webseite, deren Inhalt nur aus Text besteht, muss bereitgestellt werden, wenn es keinen anderen Weg gibt, die Inhalte der regulären Webseite barrierefrei zu gestalten. Diese Seite sollte der ursprünglichen Seite in Inhalt und Funktionalität entsprechen. Dieser Fall solte mit Vaadin sehr selten eintreten, da ein Vaadin Webinterface in der Regel Barrierefrei gestalten lässt. Mit JSP und statischen HTML Seiten können solche Webseiten jedoch zur Not in Vaadin realisiert werden.
Die Verwendung von Skriptsprachen
Wenn eine Inhalte und UI Elemente mit einer Skriptsprache dargestellt werden, dann sollten die dargestellten Informationen mit Texten beschrieben werden, die von Bildschirmleseprogrammen lesbar sind. Dies ist in der Regel schon mit Vaadin möglich, da die Inhalte und Funktionalitäten, welche in Vaadin mit Skripten bereitgestellt werden, für Bildschirmleseprogrammen zugreifbar sind.
Die Bereitstellung von Plugins
Während Vaadin selbst keine Plugins verwendet können Entwickler Ihre Webseiten natürlich trotzdem so gestalten, dass die Installation eines Plugins auf der Client Seite nötig wird. Hier muss dafür gesorgt werden, dass ein Link vorhanden ist, mit dem das Plugin heruntergeladen werden kann. Der Inhalt, der von einem Plugin dargestellt wird, ist in der Regel für ein Bildschirmleseprogramm zugreifbar.
Formulare
Auf Webseiten dargestellte Formulare müssen Ihre Beschreibung, Felder und Funktionalitäten mittels Assistenztechnik bereitstellen können. In Vaadin besitzen die <input>, <textarea> und <select> Elemente beschreibende Labels.
Alle eingebauten Layouts verwalten die Labels ordnungsgemäß, und zwar basierend auf den Beschreibungen der Komponenten. Assistenztechnik kann von Vaadin Skripten, auch denen der Formular-Elemente, nicht gestört werden.
Vereinfachung der Navigation
Sich ständig wiederholende Menüs und lange Listen von Links erschweren die Verwendung von Bildschirmleseprogrammen. Hier kann der Entwickler Links erstellen, die nur für diese sichtbar sind. Wird der Link aktiviert, so springt das Bildschirmleseprogramm zu der spezifizierten Komponente. Solch unsichtbare Links können in Vaadin mit dem Style Name “v-assistive-device-only” erstellt werden. Natürlich unterstützt auch eine gute Struktur der Überschriften die Navigation in Ihrem Webinterface.
Zeitlich begrenzte Antworten
Bestimme Webinterfaces, beispielsweise für Online Prüfungen, beinhalten zeitlich begrenzte Antworten. Auf diese Zeitfenster sollte der Anwender hingewiesen werden, mit der Möglichkeit, sich mehr Zeit zu verschaffen. Vaadin Komponenten selbst benötigen keine zeitbegrenzten Anwender-Eingaben.
Fazit
Ein barrierefreies Webinterface mit Vaadin zu erstellen muss kein Hexenwerk sein. Das Framework bietet hierfür diverse Möglichkeiten, auch out-of-the-box. Trotzdem gibt es einiges zu berücksichtigen, besonders wenn man für eine Behörde oder eine andere öffentliche Stelle entwickelt.
Jedoch ist die Barrierefreiheit auch für Enterprise Systeme ein Thema, und sollte natürlich für B2C Systeme berücksichtigt werden. Wir können Sie kompetent zu allen Vaadin Themen beraten, auch in Sachen Barrierefreiheit.
Besuchen Sie unsere Vaadin-Kurse
Falls Sie tiefer in Vaadin eintauchen möchten, bieten wir auch Vaadin-Kurse zur Erstellung moderner Webanwendungen an.
- Microservices - 18.01.2024
- IT-Sicherheitsrisiken - 22.12.2023
- Java Champion - 06.12.2023
- Microservices - 18.01.2024
- IT-Sicherheitsrisiken - 22.12.2023
- Java Champion - 06.12.2023