menu

Tworzenie dostępnych interfejsów
użytkownika na platformie J2EE z
wykorzystaniem frameworka JSF
Grzegorz Terlikowski
Plan prezentacji
 Wstęp
 Przegląd frameworków J2EE, które wspierają dostępność
 Tworzenie dostępnych elementów UI w JSF:




Menu,
Tabele,
Formularze,
Nawigacja.
 Wady kontrolek JSF
 Rola CSS w dostępności
Wstęp – czym jest J2EE?
 Java 2 Enterprise Edition (J2EE) – platforma
programistyczna języka Java bazująca na specyfikacjach.
 Właściciel (Oracle a dawniej firma Sun Microsystems)
dostarcza wzorcowych implementacji specyfikacji.
 Firmy trzecie mogą dostarczać własnych wersji dla tych
specyfikacji.
 Ponadto, powstały rozwiązania, rozszerzające
funkcjonalności oferowane przez specyfikacje J2EE.
 Od konkretnego zastosowania systemu informatycznego
oraz doświadczenia zespołu programistów zależy, które
z rozwiązania będą wykorzystywane w danym projekcie.
Wstęp – podejścia do wytwarzania GUI
• bazujące na
znacznikach –
implementacja
interfejsów w plikach
szablonów z
wykorzystaniem
bibliotek znaczników.
• Przykłady: JSF, Spring
MVC, Velocity.
• bazujące na
komponentach Java –
implementacja
interfejsów całkowicie
w Java.
• Przykłady: GWT,
Vaadin.
Wstęp – potrzebna wiedza
Realizacja dostępnych interfejsów wymaga
wiedzy na temat:
 zasad działania oraz ograniczeń konkretnego
frameworka wybranego do realizacji warstwy
prezentacji,
 zagadnień związanych z dostępnością.
Każdemu frameworkowi należy przyjrzeć się z
osobna w kwestii wspierania przez niego
dostępności.
Przegląd frameworków wspierających
dostępność
Artykuł z 6 stycznia, 2015
http://zeroturnaround.com/rebellabs/top-4-java-webframeworks-revealed-real-life-usage-data-of-springmvc-vaadin-gwt-and-jsf/
Przegląd frameworków wspierających
dostępność – Spring MVC
 Spring MVC http://docs.spring.io/autorepo/docs/spring/3.2.x/springframework-reference/html/mvc.html
 Jest podwarstwą Spring Framework.
 Dostarcza bibliotekę JSP, która zawiera kilkanaście
znaczników, ułatwiających generowanie formularzy.
 Wsparcie dla dostępności tych znaczników polega na tym,
że wszystkie atrybuty podane przez użytkownika, które
nie są atrybutami znaczników JSP, są przepisywane do
wynikowego kodu HTML.
Przegląd frameworków wspierających
dostępność - JSF
 Framework objęty specyfikacją J2EE,
 Posiada kilka implementacji,
 Obowiązująca wzorcowa implementacja JSF, czyli wersja
2.2 (Mojarra), której finalny szkic został opublikowany 15
marca 2013, wspiera HTML5, a więc i atrybuty ARIA – Jest
to bardzo ważna cecha tego frameworka.
Przegląd frameworków wspierających
dostępność - GWT
 GWT - http://www.gwtproject.org/doc/latest/DevGuideA11y.html
 Tworzenie dostępnych widgetów przy użyciu biblioteki
ARIA, propozycja (to nie standard) podejścia do tworzenia
aplikacji bazujących na AJAX.
 Dodawanie do widgetów ról, właściwości i stanów ARIA,
 Wsparcie dla klawiatury,
 Dostępne etykiety,
 Automatyczne odczytywanie podświetlonej zawartości,
 Ogólne porady dla projektantów widgetów.
Przegląd frameworków wspierających
dostępność - Vaadin
 Vaadin - https://vaadin.com/accessibility
 Framework próbuje się dostosować w jak największym
stopniu do zaleceń WAI-ARIA.
 Posiada szerokie wsparcie standardu WAI-ARIA poprzez
wspieranie standardowych atrybutów ARIA,
 Wprowadza styl v-assistive-device-only, do tworzenia
niewidzialnych komponentów, które są postrzegane
tylko przez czytniki ekranu.
 Vaadin nie używa tabel dla razkładów.
Przegląd frameworków wspierających
dostępność - Primefaces




Primefaces - http://www.primefaces.org/
Jest rozszerzeniem JSF.
Posiada ponad 100 gotowych do użycia komponentów UI,
Dostępność ma dwa aspekty:
1.
2.
wsparcie obsługi klawiatury (nawigacja po komponentach za
pomocą TAB i strzałek).
wsparcie dla czytnika ekranu.
 Komponenty bywają bardzo złożone i posiadają atrybuty
ARIA,
Przegląd frameworków wspierających
dostępność - ADF
 ADF (Application Development Framework)http://docs.oracle.com/cd/E16162_01/web.1112/e1618
1/af_access.htm#ADFUI436
 Jest rozszerzeniem JSF od firmy Oracle,
 Zapewnia wsparcie dla skrótów klawiaturowych,
 Dostarcza 3 typy dostępności:
1.
2.
3.
czytnik ekranu,
tryb wysokiego kontrastu,
tryb dużych czcionek.
 tryby ustawia się w pliku konfiguracyjnym trinidadconfig.xml lub poprzez dostarczenie odpowiedniej
strony dla użytkownika.
Zasadność budowania UI w JSF
 Jest frameworkiem objętym specyfikacją J2EE (przez co jest
powszechnie znany i używany).
 Istnieje wiele frameworków, które go rozszerzają – m.in.
Primefaces, IceFaces, RichFaces – w razie potrzeby można je
wykorzystywać na tych samych stronach.
 Najnowsza wzorcowa implementacja JSF wspiera HTML5, w
tym atrybuty ARIA.
 xmlns:jsf="http://xmlns.jcp.org/jsf" – biblioteka umożliwiająca
traktowanie kontrolek HTML5 jak komponentów JSF (po stronie serwera)
<input type="text" jsf:id="name" jsf:value="#{bean.name}"/>
 xmlns:pt="http://xmlns.jcp.org/jsf/passthrough " –
biblioteka umożliwiająca dodanie atrybutów HTML5 do kontrolek JSF.
<h:inputText id="email" value="#{bean.email}"
pt:type="email"/>
Dostępne GUI w JSF
 W dalszej części prezentacji zostanie przedstawiony
sposób tworzenia następujących elementów GUI:





Dostępny pasek narzędziowy (menu głównego poziomu),
Dostępne menu rozwijane (podmenu),
Dostępne tabele,
Dostępne formularze,
Dostępna nawigacja.
 Elementy te zostaną wygenerowane (o ile to możliwe) z
wykorzystaniem znaczników JSF.
Dostępne GUI w JSF – menu - budowa
 W wynikowym kodzie HTML złożone ze znaczników takich
jak: <div>, <ul>, <li>.
 Wykorzystanie atrybutów ze specyfikacji W3C dla ARIA
(Accessible Rich Internet Applications).
 Atrybuty ARIA określają rolę, stan i właściwości tych
znaczników.
Dostępne GUI w JSF – menu – ARIA
• Dynamiczne menu, powinno wykorzystywać
następujące atrybuty:



role="menubar" dla głównego węzła menu.
role="menu" dla elementu menu, który jest menu
rozwijanym.
role="menuitem" dla każdego elementu menu,
którego kliknięcie powoduje wykonanie akcji (przejścia
do podstrony).
Dostępne GUI w JSF – menu – ARIA c.d.



aria-haspopup="true" dla każdego elementu,
który powoduje wyświetlenie rozwijanego menu.
Przeważnie stosowany na wszystkich głównych
elementach menu i na każdym elemencie, który posiada
podmenu.
aria-hidden="true" dla każdego kontenera menu
rozwijanego. Funkcja JavaScript, która powoduje
wyświetlenie menu, powinna ustawiać ariahidden="false".
tabindex="0" dla pierwszego elementu menu, a dla
pozostałych tabindex="-1".
Dostępne GUI w JSF – menu główne zachowania
 Dostępne menu pierwszego poziomu (główne) powinno
wspierać obsługę za pomocą klawiatury:
 strzałka w prawo – przejście do następnego elementu głównego
menu.
 strzałka w lewo – przejście do poprzedniego elementu głównego
menu.
 strzałka w górę (lub w dół) – w przypadku, gdy dany element
głównego menu posiada rozwijane podmenu, powinno nastąpić
rozwinięcie podmenu i zaznaczenie pierwszego elementu.
 Enter lub Spacja – otwarcie lub zamknięcie rozwijanego menu.
 Tab – opuszczenie menu i przejście do następnego elementu strony.
Dostępne GUI w JSF – menu główne –
implementacja (1/3)
 JSF nie posiada znacznika odpowiadającego
za generowanie menu,
 Rozszerzenie w postacie frameworka
Primefaces dostarcza różne menu, jednak
na chwilę obecną czytniki ekranu nie
potrafią ich poprawnie zinterpretować,
mimo, że menu wydają się poprawnie
skonstruowane.
 Jednym z rozwiązań jest wykorzystanie biblioteki JavaScript
menubar.js,
http://staff.washington.edu/tft/tests/menus/html5/, która
wzorcowo implementuje obsługę menu z poziomu klawiatury.
Dostępne GUI w JSF – menu główne –
implementacja (2/3)
 menubar.js jest wyspecjalizowana do obsługi menu
rozwijanych i nie posiada odpowiednich zachowań
związanych z wyborem elementu menu głównego poziomu.
 Rozwiązanie problemu składa się z 2 kroków:
1. Należy dla elementów menu głównego poziomu dostarczyć informacji o
stronach, do których powinno nastąpić przeniesienie po ich wybraniu.
<a href="menu_test.xhtml" style="visibility: hidden;"/>
Dostępne GUI w JSF – menu –
implementacja (3/3)
2. Drugim krokiem jest dostarczenie zachowania dzięki,
któremu po wyborze przez użytkownika elementu menu
głównego poziomu nastąpi przeniesienie do treści
wskazanej przez ukryte łącze.
Dostępne GUI w JSF – menu rozwijane zachowania
• W zakresie obsługi menu rozwijanego (kiedy kursor
znajduje się na elemencie podmenu), klawiatura powinna
dostarczać następujących zachowań:
 strzałka w lewo (prawo) – przejście do następnego(poprzedniego)
rozwijanego menu i zaznaczenie pierwszego elementu.
 strzałka w górę (dół) – przejście do poprzedniego (następnego)
elementu podmenu.
 Enter lub Spacja – wybranie elementu podmenu.
 Escape – zamknięcie menu rozwijanego i powrót kursora do menu
głównego.
 Tab – przejście do następnego elementu strony.
Dostępne GUI w JSF – menu rozwijaneimplementacja
Dostępne megamenu (Adobe)
http://adobeaccessibility.github.io/Accessible-Mega-Menu/
Dostępne GUI w JSF – Java Beans
Dostępne GUI w JSF – Zarządzalne Beans
Zapis ${usersData.users} na stronie JSP/JSF spowoduje wywołanie metody
getUsers(), zarządzalnego komponentu dostępnego w kontekście sesji pod
nazwą usersData.
Dostępne GUI w JSF – tabele (1/5)
 Aby tabela była dostępna dla osób niewidomych należy
doprowadzić, aby poszczególne znaczniki HTML
wynikowego kodu miały następujące atrybuty i ich
wartości:




<table> – role="presentation", mówiący o roli
prezentacyjnej tabeli,
<tr> - role="row",
<th> - role="columnheader" oraz scope="col",
<td> - role="gridcell".
 Ponadto, aby tabela była dostępna dla osób
słabowidzących, nagłówek oraz parzyste i nieparzyste
wiersze powinny być różnych kolorów.
Dostępne GUI w JSF – tabele (2/5)
 <dataTable> – znacznik JSF, służący do generowania
tabel na bazie zadanej kolekcji danych.
 Niektóre atrybuty znacznika <dataTable>:
 value – wiąże znacznik z kolekcją danych,
 var – określa nazwę pojedynczego elementu kolekcji (podanej w
value), pod którą będzie on dostępny wewnątrz znacznika,
 id, role, border – odpowiedniki atrybutów znaczników HTML
o tej samej nazwie,
 headerClass – umożliwia ustawienie wskazanej klasy CSS na
poziomie wiersza nagłówka wynikowej tabeli HTML.
 rowClasses – umożliwia ustawienie wskazanych klas CSS na
poziomie wiersza danych nieparzystego (pierwsza zadana klasa) i
parzystego (druga zadana klasa).
Dostępne GUI w JSF – tabele (3/5)
• <column> – znacznik wewnętrzny opisujący pojedynczą
kolumnę tabeli.
• <facet> – umożliwia wskazanie szczególnej zawartość dla
kolumny tj. nagłówka(header) i/lub stopki(footer).
Wskazanie typu zawartości odbywa się za pomocą
atrybutu name.
Dostępne GUI w JSF – tabele (4/5)
 Niestety, znaczniki JSF nie umożliwiają ustawienia
atrybutu role na poziomie <tr>, <th> i <td>.
Dostępne GUI w JSF – tabele (5/5)
 W wynikowym kodzie został
wygenerowany atrybut scope na
poziomie znacznika <th>, ale
brakuje role.
 Większość czytników ekranu,
sobie z tym radzi.
 Można to jednak naprawić za
pomocą kodu JavaScript (np.,
jQuery)
Dostępne GUI w JSF – formularze
 Dobrze zaprojektowane powinny dać
się wypełnić i przesłać przy użyciu
samej klawiatury.
 Framework JSF dostarcza ponad 100
znaczników – niektóre z nich służą do
generowania formularza i jego pól.
 Znacznik <h:form> służy do
generowania znacznika HTML o tej
samej nazwie.
Formularze – Grupowanie pól formularzy
Formularze – grupowanie pól (1/2)
 Znacznik HTML <fieldset> jest
łatwym sposobem strukturyzacji
formularza.
 Jego celem jest dostarczenie
mechanizmu grupowania
powiązanych ze sobą pól formularza.
 Czytniki ekranu, zawsze czytają
zawartość znacznika <legend>
znajdującego się w takiej strukturze
w momencie ustawienia kursora w
polu grupy.
Formularze – grupowanie pól (2/2).
Czytnik przeczyta: „Dane podstawowe, grupa”
Formularze – znaczniki JSF(1/3)
 Framework JSF posiada zbiór znaczników, które
ułatwiają generowanie poszczególnych elementów
formularzy.
 Każdy ze znaczników posiada własną listę atrybutów,
które pozwalają wpłynąć na wynikowy kod HTML.
Formularze – znaczniki JSF(2/3)
1. <h:inputText> – generuje pole tekstowe – znacznik <input> z
ustawionym atrybutem type="text".
2. <h:inputSecret> – generuje pole hasła – znacznik <input> z
ustawionym atrybutem type="password".
3. <h:inputHidden> – generuje pole ukryte – znacznik <input> z
ustawionym atrybutem type="hidden".
4. <h:inputTextarea> – generuje wielowierszowe pole tekstowe –
znacznik <textarea>.
5. <h:outputText> – generuje etykietę – znacznik <label>.
6. <h:commandButton> – generuje przycisk formularza,
umożliwiający jego wysłanie na serwer – znacznik <submit>.
Formularze – znaczniki JSF(3/3)
6. <h:selectBooleanCheckbox> – generuje pojedyncze pole wyboru
– znacznik <input> z ustawionym atrybutem type="checkbox".
7. <h:selectManyCheckbox> – generuje grupę pól wyboru –
znaczników <input> z ustawionym atrybutem type="checkbox".
8. <h:selectOneRadio> – generuje grupę pól wyboru typu radio –
znaczników <input> z ustawionym atrybutem type="radio".
9. <h:selectOneListbox> – generuje listę (listbox) jednokrotnego
wyboru – znacznik <select>.
10. <h:selectManyListbox> – generuje listę (listbox) wielokrotnego
wyboru – znacznik <select>.
11. <h:selectOneMenu> – generuje rozwijaną listę (combobox)
jednokrotnego wyboru – znacznik <select>.
Formularze – etykiety
 Znacznik HTML o nazwie <label> umożliwia
dodawanie etykiet do innych elementów
HTML.
 Dzięki zastosowaniu etykiet w formularzu
będzie on bardziej zrozumiały dla użytkownika.
 Za pomocą atrybutu for znacznika <label>
można powiązać etykietę z polem formularza o
zadanym id.
38/35 Czytnik przeczyta: „Imię, gwiazdka, pole edycji”
Formularze – zestawy opcji (1/3)
 Niestety znaczniki JSF służące do
generowania zestawów opcji nie
nadają się do generowania
dostępnego UI.
 Znaczniki m.in. takie jak:
 <h:selectOneRadio> i
 <h:selectManyCheckbox>,
generują zestawy opcji osadzone w
tabeli.
Formularze – zestawy opcji (2/3)
 Czytniki ekranu w zależności od przeglądarki odczytują tę tabelę
(mimo braku atrybutu role), przez co mogą irytować niewidomych
użytkowników.
Czytnik przeczyta:
"Tabela, kino wiersz, komórka kino, pole wyboru nieoznaczone"
Formularze – zestawy opcji (3/3)
 Zestawy opcji należy wykonać w HTML.
 Grupy opcji warto otoczyć znacznikiem <fieldset> –
przy wejściu do pierwszego elementu opcji, czytnik
ekranu przeczyta etykietę umieszczoną w znaczniku
<legend>.
Czytnik przeczyta:
„Twoje zainteresowania, grupa, Kino, pole wyboru, nieoznaczone"
Formularze – wymagalność danych
 Gwiazdka - niezrozumiała dla początkujących internautów.
 Atrybuty required i aria-required – umożliwiają wskazanie, które z
pól są obligatoryjne,
 Czytnik ekranu przeczyta użytkownikowi, że dane pole jest
wymagane.
 Nowoczesne przeglądarki wyświetlą odpowiedni komunikat np.
“this field is required”.
 Dobrą praktyką jest używanie ich obu, gdyż nie wiadomo, który z
nich będzie zrozumiały dla danego czytnika ekranu.
Czytnik przeczyta: „Imię, gwiazdka, pole edycji, wymagane”
Formularze – opisy pól
 W niektórych przypadkach, zrozumienie zastosowania pola
formularza wymaga większej ilości informacji, niż daje to etykieta.
 Aby dodać taki (przyjazny dla czytników ekranu) opis stosujemy na
polu formularza atrybut aria-describedby, którego wartość
wskazuje na identyfikator elementu HTML (najczęściej ukrytego) z
dodatkowym opisem.
Czytnik przeczyta:
„O sobie, pole edycji, Tutaj możesz napisać kilka zdań o sobie"
Nawigacja
 Dobrze zaprojektowany interfejs użytkownika powinien wspierać
nawigację za pomocą klawiatury.
 Niewidomi użytkownicy, nie mają innej alternatywy, aby sprawnie
nawigować po treści prezentowanej na stronach WWW.
 Wsparcie dla nawigacji klawiaturowej także jest ważne z punktu
widzenia osób z problemami ruchowymi, które z oczywistych
względów nie mogą używać wskaźnika myszki.
 Dla użytkowników niewidomych ważną rzeczą jest dostępność za
pomocą klawiatury takich elementów jak: paski narzędziowe,
menu, łącza, czy przyciski.
 Nawigacja za pomocą klawiatury (m.in. za pomocą klawisza TAB),
powinna odbywać się w przewidywalnym porządku.
Nawigacja - nagłówki
 Osoba niewidoma ma możliwość szybkiego
przemieszczania się po kolejnych nagłówkach strony
poprzez wybranie litery H lub skrótu Ctrl+H na
klawiaturze.
 Skróty te obsługiwane są przez silniki przeglądarek.
 Dlatego też nagłówki powinny być unikalne i
zrozumiałe, tak aby użytkownik rozumiał z czym ma do
czynienia.
Nawigacja – stany elementów
 Wszystkie elementy aktywne, takie jak:
łącza, elementy menu, pola formularza
powinny mieć wyraźny wizualny fokus (np. w postaci
ramki widocznej w trakcie nawigacji po stronie
klawiszem TAB).
 Zaleca się wzmocnienie domyślnego fokusa, tak, aby był
dobrze widoczny także dla osób niedowidzących.
 Realizowane jest to poprzez zastosowanie
odpowiednich arkuszy CSS.
Nawigacja – odnośniki
 Wszystkie odnośniki powinny być unikalne i
zrozumiałe, także poza kontekstem.
 Nie należy używać linków w postaci: „>>” czy
„więcej” albo „kliknij tutaj”.
 Odnośniki (zwłaszcza te prowadzące do zewnętrznych
stron) nie mogą otwierać się w nowym oknie lub
zakładce przeglądarki bez ostrzeżenia.
Nawigacja – odnośniki z potwierdzeniem
Implementacja mechanizmu potwierdzenia wybrania łącza:
1.
2.
Dodanie do takich łączy klasy o pewnej nazwie np. confirmableAnchor.
Dodanie jednoznacznego opisu łącza poprzez ustawienie w nim atrybutu
title.
3.
Podmiana zachowania związanego z wybraniem takiego łącza, np.
wykorzystanie funkcji confirm języka Java Script.
Wady kontrolek JSF
 Mogą generować nadmiarowości,
 Nie wspierają niektórych atrybutów,
 Do rozkładów wykorzystują tabele – wszystkie znaczniki
generujące listy,
 Rozszerzenia JSF, np. Primefaces dostarczają poprawnie
zaimplementowanych (pod względem dostępności)
komponentów – niestety nie są one poprawnie
interpretowane przez dzisiejsze czytniki ekranu.
Rola CSS w dostępności
 Alternatywne szablony dla słabowidzących,
 Można uwzględniać różne wady wzroku

Kontrasty,

Rozkłady komponentów,

Wielkości i kroje czcionek,

Odstępy między wierszami oraz literami,
 Stany elementów,

Aktywne menu,

Pola formularza – stany pól.
Dziękuję za uwagę
Pytania?