menu
Transkrypt
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?