ADF und Barrierefreiheit Einführung in die Entwicklung barrierefreier Webanwendungen

Transkript

1 Fachartikel 2012 ADF und Barrierefreiheit Einführung in die Entwicklung barrierefreier Webanwendungen von Patrick Olschewsky

2 ADF und Barrierefreiheit Einführung in die Entwicklung barrierefreier Webanwendungen Patrick Olschewsky

3 Inhalt Einleitung... 1 Beispiele... 2 Aktivierung des barrierefreien Modus... 2 Sortierung von Tabellenköpfen... 3 JAWS zeigt alle Ebenen auf der höchsten Ebene an, eine Schachtelung ist nicht vorhanden... 4 Elemente, die (visuell) nicht vorhanden sind, werden von JAWS vorgelesen... 4 Auf Toolbar- Buttons verzichten... 4 Aufführen der gefundenen Treffer sowie des fachlichen Hintergrunds bei der Fokussierung auf eine Tabelle... 5 Vermeidung von outputtext- Elementen... 5 Verwendung von Landmarks... 5 Hochkontrasttheme für LUNAR... 6 Verwendung eines Titels für das die Anwendung umschließende iframe... 6 Einleitung Die Bundesregierung fordert, dass Webseiten und Software barrierefrei veröffentlicht werden sollen. Dies trifft auf Intranet, Internet und Softwareoberflächen zu, die öffentlich zugänglich sind.. Die Prüfung auf Barrierefreiheit führen wir hauptsächlich für zwei Personengruppen: Blinde sowie schwer Sehbeeinträchtigte. Für blinde Benutzer nutzen wir Vorlese- Software JAWS, für schwer Sehbeeinträchtigte LunarPlus. JAWS liest den Bildschirminhalt aufgrund des aktuellen Fokus vor, LunarPlus/SuperNova ermöglicht es mittels einer Softwarelupe den Bildschirminhalt zu vergrößern (bis zu achtfache Vergrößerung) sowie verschiedene Kontrastthemes zu aktivieren, um den Inhalt besser lesen zu können. Ohne die Prüfung kann keine Veröffentlichung der Anwendung geschehen. Ein normaler Freigabeprozess ist wie folgt abgebildet: 1. Test - > eventuelle Fehlerbeseitigung - > 2. Test mit darauffolgender erfolgreicher Abnahme. Werden bei dem 2. Test wiederum Fehler gefunden, können sich weitere Tests bis zur endgültigen Abnahme anschließen. ADF verfügt von Haus aus über einen barrierefreien Modus dennoch sind von den Entwicklern einige Schritte notwendig, um das Programm erfolgreich durch den barrierefreien Test zu führen.

4 Beispiele Aktivierung des barrierefreien Modus Die Aktivierung des barrierefreien Modus erfolgt über die Angabe des Wertes screenreader im Attribut <accessibility- mode> der Konfigurationsdatei trinidad- config.xml. Um die Möglichkeit zur Verfügung zu stellen, zwischen den verschiedenen Ansichtsmodi zu wählen, hat es sich etabliert, eine eigene ManagedBean zu schreiben (z.b. UserSettingsBean), die im SessionScope liegt und die Information über den aktuellen Ansichtsmodus zwischenspeichert. In der trinidad- config wird anschließend lediglich auf eine get- Methode der Bean verwiesen, die den aktuellen Modus zurückgibt. Oberfläche: <af:commandlink text="barrierefreien Modus ausschalten" id="cl1" action="#{usersettingsbean.toggleaccessibility" rendered="#{sessionscope.usersettingsbean.accessibilitymode eq 'screenreader'" inlinestyle="white- space:nowrap"/> <af:commandlink text="barrierefreien Modus einschalten" id="cl2" rendered="#{sessionscope.usersettingsbean.accessibilitymode eq 'default'" action="#{usersettingsbean.toggleaccessibility" inlinestyle="white- space:nowrap"/> Trinidad- config.xml: <accessibility- mode>#{accessibility.accessibilitymode</accessibility- mode> <accessibility- profile>#{accessibility.accessibilityprofile</accessibility- profile> UserSettingsBean (Auszug): public class UserSettingsBean { private boolean isaccessibilitymodeon = false; private volatile AccessibilityProfile _profile; private boolean highcontrast = false; public String getaccessibilitymode() { if(isaccessibilitymodeon) { return "screenreader"; else { return "default"; public String toggleaccessibility() { this.isaccessibilitymodeon =!this.isaccessibilitymodeon; this.highcontrast =!this.highcontrast; this._profile = null; refreshcurrentpage(); return null; public AccessibilityProfile getaccessibilityprofile() { if (_profile == null) { synchronized (this) {

5 if (_profile == null) { _profile = _createaccessibilityprofile(); return _profile; private AccessibilityProfile _createaccessibilityprofile() { AccessibilityProfile.ColorContrast colorcontrast = ishighcontrast()? AccessibilityProfile.ColorContrast.HIGH : AccessibilityProfile.ColorContrast.STANDARD; AccessibilityProfile.FontSize fontsize = AccessibilityProfile.FontSize.MEDIUM; return AccessibilityProfile.getInstance(colorContrast, fontsize); Sortierung von Tabellenköpfen Problem: Die Tabellenköpfe sagen nur an, dass man sortieren kann, aber nicht, ob eine Sortierung für die Spalte vorliegt. Lösung: JAWS liest nur die Informationen vor, die einer Komponente hinterlegt sind. Das Standardverhalten einer ADF- Tabelle hat keine (Fließtext- ) Informationen, die dem Benutzer sagt, welche Art der Sortierung vorliegt. Aus diesem Grund ist es notwendig, einen eigenen Sortierungs- Listener zu schreiben und jeder sortierbaren Tabelle zu hinterlegen. ADF: sortlistener="#{pageflowscope.controller.tabellensortierunglistener" Java: public void tabellensortierunglistener(sortevent sortevent) { final String ABSTEIGEND = " (absteigend sortiert)"; final String AUFSTEIGEND = " (aufsteigend sortiert)"; List<SortCriterion> criterias = sortevent.getsortcriteria(); Object o = sortevent.getsource(); if (o instanceof RichTable) { RichTable table = (RichTable)o; List<UIComponent> columns = table.getchildren(); for (UIComponent columncomponent : columns) { RichColumn column = (RichColumn)columnComponent; String columnsortproperty = column.getsortproperty(); String oldheader = column.getheadertext(); String newheadertext; if (oldheader == null) continue; if (oldheader.contains(absteigend)) { newheadertext = oldheader.substring(0, oldheader.length() - ABSTEIGEND.length()); else if (oldheader.contains(aufsteigend)) { newheadertext = oldheader.substring(0, oldheader.length() - AUFSTEIGEND.length());

6 else { newheadertext = oldheader; for (SortCriterion crit : criterias) { if (columnsortproperty == null ) continue; if (columnsortproperty.equals(crit.getproperty())) { newheadertext = newheadertext + (crit.isascending()? AUFSTEIGEND : ABSTEIGEND); break; column.setheadertext(newheadertext); JAWS zeigt alle Ebenen auf der höchsten Ebene an, eine Schachtelung ist nicht vorhanden Problem: Die Informationsstruktur wird nicht korrekt wiedergegeben. Inhaltsboxen, die innerhalb einer übergeordneten Inhaltsbox gruppiert werden, werden nicht als Überschriften der zweiten Ebene kenntlich gemacht (h1, h2). Alle Überschriften sind auf der gleichen Ebene. Lösung: Auf die Verwendung von PanelBox- Komponenten sollte verzichtet werden. JAWS erzeugt aus den PB- Komponenten eine fehlerhafte Hierarchie. Stattdessen ist der Einsatz von PanelHeadern vorzuziehen; diese werden anstatt der PanelBoxen verwendet. <af:panelheader size="- 1" [..]/> Elemente, die (visuell) nicht vorhanden sind, werden von JAWS vorgelesen Problem: Es werden teilweise Links Informationen vorgelesen die in der Oberfläche gar nicht vorhanden sind (weder visuell noch ist ein auslösen der Links möglich). (Es scheint als ob das verlinkte Informationsicon für das Tooltipp Popup vorgelesen wird, auch wenn dieses gar nicht vorhanden ist.) Lösung: ADF erzeugt für jede Komponente eine Eingabehilfe, die z.b. bei Datumsfeldern als Symbol gekennzeichnet werden. Bei einem Klick auf dieses Symbol erschein der Kalender. Für Komponenten, die keine Hilfe angezeigt bekommen, erzeugt ADF trotzdem diese Symbole, kennzeichnet sie allerdings als visible: hidden. JAWS erkennt dies nicht von Haus aus und liest die Symbole trotzdem vor. Der Hersteller von JAWS hat das Programm mittels eines Patches nachgebessert, dieses Fehlverhalten sollte in Zukunft nicht mehr auftreten. Auf Toolbar- Buttons verzichten Problem: Visuelle Buttons werden nur als Link vorgelesen, obwohl JAWS durchaus zwischen Buttons und Links unterscheidet. Lösung: ADF- Toolbar- Buttons werden von JAWS intern fehlerhaft gerendert; JAWS erkennt wegen der von ADF erzeugten HTML- DIV Renderung keine Buttons. Aus diesem Grund ist auf die Verwendung von <adf:toolbarbutton> zu verzichten, es werden <adf:commandbutton> bevorzugt.

7 Aufführen der gefundenen Treffer sowie des fachlichen Hintergrunds bei der Fokussierung auf eine Tabelle Problem: Dem Benutzer stehen keine Informationen über die gefundenen Treffer sowie dem fachlichen Kontext der Ergebnistabelle zur Verfügung, wenn eine Suche erfolgreich abgeschlossen wurde. Lösung: Eine Tabelle sollte dem Benutzer mittels des summary- Attributs und ADF- EL die Informationen liefern, wie viele Suchergebnisse die Tabelle sowie welche Art von Treffern die Tabelle enthält. ADF: summary="#{pageflowscope.controller.summebetriebesuchetreffer Treffer. Tabelle enthält alle nach ihren Suchkriterien gefundenen Betriebe" Java: public Integer getsummebetriebesuchetreffer() { if (betriebsucheresult!= null) { return betriebsucheresult.size(); return 0; Vermeidung von outputtext- Elementen Problem: JAWS erkennt keinen Fokus auf Texte, die mittels outputtext- Elementen angezeigt werden und springt über diese Texte hinüber; dem Anwender werden diese Informationen nicht vorgelesen, sie gehen verloren. Lösung: Anstelle von outputtext sollen inputtext- Elemente verwendet werden, deren Schreitattribut mittels readonly=true deaktiviert wurden. Verwendung von Landmarks WAI ARIA Landmarks sind ein zukünftiger, vom w3c definierter Standard, der sich momentan in der Entwurfsphase befindet und der die Navigation für Benutzer mit Vorlesesoftware erleichtern soll. Landmarks werden in der Vorlesesoftware JAWS wie folgt dem Benutzer dargestellt und vorgelesen: Komponenten, denen man Landmarks zuweisen kann, sind panelgrouplayout, panelsplitter, panelstretchlayout sowie decorativebox. Beispiel: <af:panelgrouplayout id="pt_pgl1" layout="vertical" landmark="main">

8 Hochkontrasttheme für LUNAR Schwer sehbeeinträchtigte Personen, die den Bildschirminhalt lediglich mittels einer Softwarelupe sowie hohen Kontrasts erkennen können, ist darauf zu achten, dass bei der Aktivierung des barrierefreien Modus ebenso der Kontrast sowie die Schriftgröße erhöht werden. Dies wird in der unter Punkt 1 angesprochenen UserSettingsBean sowie mittels des Attributs <accessibility- profile> in der trinidad- config.xml bewerkstelligt. Auszug: trinidad- config.xml: <accessibility- profile>#{accessibility.accessibilityprofile</accessibility- profile> UserSettingsBean: private AccessibilityProfile _createaccessibilityprofile() { AccessibilityProfile.ColorContrast colorcontrast = ishighcontrast()? AccessibilityProfile.ColorContrast.HIGH : AccessibilityProfile.ColorContrast.STANDARD; AccessibilityProfile.FontSize fontsize = AccessibilityProfile.FontSize.MEDIUM; return AccessibilityProfile.getInstance(colorContrast, fontsize); Verwendung eines Titels für das die Anwendung umschließende iframe Problem: Auf allen Seiten gibt es einen Rahmen faces / index und einen Link beginnend mit faces/index?_adf.no- new- window- redirect=true&_ Lösung: Das iframe, im dem die Anwendung läuft, wird standardmäßig nicht mit einem Titel erstellt. Dies hat zur Folge, dass beim Einstieg in eine beliebige Seite JAWS nicht den Titel der Seite vorliest, sondern faces/index. Um dieses Problem zu beheben, ist in der index.jsp das iframe zu erweitern: <iframe src="${pagecontext.servletcontext.contextpath/faces/index" class="full" frameborder="0" id="app" title="anwendungstitel"/>