Tworzenie dostępnych interfejsów użytkownika na platformie J2EE z wykorzystaniem frameworka JSF. Grzegorz Terlikowski

Transkrypt

1 Tworzenie dostępnych interfejsów użytkownika na platformie J2EE z wykorzystaniem frameworka JSF Grzegorz Terlikowski

2 Wstęp Plan prezentacji 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

3 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.

4 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.

5 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.

6 Przegląd frameworków wspierających dostępność Artykuł z 6 stycznia,

7 Przegląd frameworków wspierających dostępność Spring MVC Spring MVC - 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.

8 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.

9 Przegląd frameworków wspierających dostępność - GWT GWT - 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.

10 Przegląd frameworków wspierających dostępność - Vaadin Vaadin - 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.

11 Przegląd frameworków wspierających dostępność - Primefaces Primefaces - Jest rozszerzeniem JSF. Posiada ponad 100 gotowych do użycia komponentów UI, Dostępność ma dwa aspekty: 1. wsparcie obsługi klawiatury (nawigacja po komponentach za pomocą TAB i strzałek). 2. wsparcie dla czytnika ekranu. Komponenty bywają bardzo złożone i posiadają atrybuty ARIA,

12 Przegląd frameworków wspierających dostępność - ADF ADF (Application Development Framework)- 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. czytnik ekranu, 2. tryb wysokiego kontrastu, 3. tryb dużych czcionek. tryby ustawia się w pliku konfiguracyjnym trinidadconfig.xml lub poprzez dostarczenie odpowiedniej strony dla użytkownika.

13 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=" 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=" " biblioteka umożliwiająca dodanie atrybutów HTML5 do kontrolek JSF. <h:inputtext id=" " value="#{bean. }" pt:type=" "/>

14 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.

15 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.

16 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).

17 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".

18 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.

19 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, która wzorcowo implementuje obsługę menu z poziomu klawiatury.

20 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;"/>

21 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.

22 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.

23 Dostępne GUI w JSF menu rozwijaneimplementacja

24 Dostępne megamenu (Adobe)

25 Dostępne GUI w JSF Java Beans

26 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.

27 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.

28 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).

29 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.

30 Dostępne GUI w JSF tabele (4/5) Niestety, znaczniki JSF nie umożliwiają ustawienia atrybutu role na poziomie <tr>, <th> i <td>.

31 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)

32 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.

33 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.

34 Formularze grupowanie pól (2/2). Czytnik przeczyta: Dane podstawowe, grupa

35 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.

36 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>.

37 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>.

38 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

39 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.

40 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"

41 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"

42 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

43 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"

44 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.

45 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.

46 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.

47 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.

48 Nawigacja odnośniki z potwierdzeniem Implementacja mechanizmu potwierdzenia wybrania łącza: 1. Dodanie do takich łączy klasy o pewnej nazwie np. confirmableanchor. 2. 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.

49 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.

50 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, Rola CSS w dostępności Aktywne menu, Pola formularza stany pól.

51 Dziękuję za uwagę Pytania?