Oczami niewidomego. Klawiatura fajna jest Uwaga na fokus! Czytnik ekranu (Screenreade)?

Transkrypt

1 Kto zacz? dr Michał Kępiński Uczelniane Centrum Informatyki AGH Pracownia Tyfloinformatyki mail: lista WCAG-AGH: wcag-agh

2 Oczami niewidomego Klawiatura fajna jest Uwaga na fokus! Czytnik ekranu (Screenreade)? NVDA - darmowy program czytający ekran. (Non visual Desktop Access)

3 Podstawowe systemowe skróty klawiszowe Skrót Opis Skrót Opis Strzałki Lewo/prawo/góra/dół PgUp/PgDown O ekran w górę/dół Home/End Na początek/koniec +Shift Zaznaczanie Ctrl+a Zaznacz wszystko Ctrl+x Wytnij zaznaczone Ctrl+c Kopiuj zaznaczone Ctrl+v Wklej zaznaczone Tab Kolejny element Ctrl+Tab Kolejna zakładka Alt+Tab Następne okno +Shift Z powrotem Ctrl+n Nowy obiekt Ctrl+o Otwórz obiekt Ctrl+p Drukuj Ctrl+z Cofnij czynność L-Alt/F10 Pasek menu Esc Powrót/anuluj L-Alt+ Strona tył/przód Ctrl+l Pole adresu

4 Podstawowe skróty klawiszowe NVDA Skrót Opis Skrót Opis Ctrl Zatrzymuje mowę Shift Pauza mowy nvda+f12 Czas/data NVDA+tab Czytaj fukus NVDA+b Czytaj okno NVDA+t Czytaj tytuł okna NVDA+ Czytaj wszystko NVDA+ Aktualną linię Ctrl+Alt+ Kolumna w lewo/prawo Ctrl+Alt+ Wiersz w górę/dół NVDA+#5 Aktualny obiekt NVDA+#4/6 poprzedni/następny NVDA+#8 Rodzic NVDA+#2 pierwszy potomek

5 Wirtualny tryb przeglądania Tryb formularzy Tryb przeglądu NVDA Skrót Opis Skrót Opis NVDA+SP Przełącz wirt./form. Esc Wyjdź z formularzy NVDA+F5 odśwież dokument NVDA+F7 Lista obiektów

6 Skróty nawigacji jednoliterowej Skrót Opis Skrót Opis H Nagłówek X Pole wyboru L Lista C Pole rozwijalne I Element R Przycisk radiowy T Tabela Q Cytat N Zwykły tekst S Separator F Pole formularza M Ramka K Link G Grafika U Link nieodwiedzony D Punkt orientacyjny V Link odwiedzony O Obiekt E Pole edycyjne 1-6 Poziomy hierarchii B Przycisk +Shift Z powrotem

7 WCAG 2 (Web Content Accessibility Guidelines) Lepiej mieć standard (6 grzechów głównych)

8 1. Linki do podstron, załączników etc. Linki nie są opisywane słowami, ale automatycznie nazwą pliku, albo opisywane bardzo nieczytelnie. Osoby niewidome korzystające z programów czytających (screenreaderów) mają, więc kłopoty z ją po stronie tracą orientację, nie wiedzą dokąd dany odnośnik ich zaprowadzi

9 2. Nagłówki poszczególnych stron serwisu. Zdarza się jednak, że nie wszystkie podstrony mają nagłówki wskazujące wyraźnie na ich zakres informacyjny. Nagłówki powinny być zrobione poziomami, gdzie poziom H1 oznacza informacje najważniejsze 3. Brak tekstu alternatywnego Przy fotografiach, grafikach i wykresach powinien zawsze znajdować się tzw. tekst alternatywny możliwy do odczytania przez screenreadery. Tekst alternatywny powinien być zwięzły.

10 4. Test Captcha Twórcy stron internetowych wprowadzają tzw. test Captcha, dla potwierdzenia określonej operacji. Tymczasem testy Captcha są nie do odczytania przez screenrereadery. 5. Tabele Tabele często wykorzystywane są do formatowania wyglądu serwisu. Osobom niewidomym trudno poruszać się po ich zawartości.

11 6. Pliki PDF Najczęściej, na stronach www umieszczane są pliki PDF w formie skanów obrazkowych. Te zaś nie są czytane przez screenreadery. Tymczasem możliwe jest takie przygotowanie plików PDF, aby miały swoją strukturę i były odczytywane przez programy czytające.

12 W hierarchii siła Struktura WCAG 2 Zasady (4) Wytyczne (12 celi) 1: Postrzegalność : Funkcjonalność : Zrozumiałość : Solidność 3.1 Kryteria sukcesu (dużo) Poziomy zgodności A AA AAA

13 1: Postrzegalność Informacje oraz komponenty interfejsu użytkownika muszą być przedstawione użytkownikom w dostępny dla nich sposób. Wytyczna 1.1 Tekst alternatywny Wytyczna 1.2 Media zależne od czasu Wytyczna 1.3 Możliwość adaptacji Wytyczna 1.4 Treść rozróżnialna

14 2: Funkcjonalność Komponenty interfejsu użytkownika oraz nawigacja muszą być funkcjonalne (powinny pozwalać na interakcję). Wytyczna 2.1 Dostępność przy pomocy klawiatury Wytyczna 2.2 Wystarczająca ilość czasu Wytyczna 2.3 Ataki padaczki Wytyczna 2.4 Nawigacja

15 3: Zrozumiałość Treść oraz obsługa interfejsu użytkownika musi być zrozumiała. Wytyczna 3.1 Czytelność Wytyczna 3.2 Przewidywalność Wytyczna 3.3 Pomoc przy wprowadzaniu

16 4: Solidność Treść musi być wystarczająco rzetelna, aby mogła być poprawnie interpretowana przez wielu różnych klientów użytkownika, włączając technologie asystujące. Wytyczna 4.1 Kompatybilność

17 Najlepiej porównać

18 Utilitia Pomocna dłoń Struktura testów oparta na strukturze WCAG Automatyczne badanie kryteriów sukcesu WCAG

19 Konta testowe konto: agh1, 2, hasło: agh1234. Konta docelowe Jacek Merdalski BON

20 WCAG na skróty (25 wskazówek) 1. Wszystkie elementy graficzne powinny mieć zwięzły tekst alternatywny (alt), który opisuje co znajduje się na grafice lub, jeśli grafika jest odnośnikiem dokąd prowadzi ten odnośnik. Jeśli grafiki są czysto dekoracyjne, powinny mieć pusty atrybut alt.

21 2. Należy unikać animowanych elementów, poruszających się tekstów, ponieważ rozpraszają one wszystkich użytkowników nie tylko niepełnosprawnych. Niektóre, szczególnie agresywnie i szybko animowane grafiki, mogą stanowić zagrożenie dla osób cierpiących na padaczkę fotogenną!

22 3. Wszystkie pliki dźwiękowe (audycje, wywiady, wykłady) powinny być uzupełnione o transkrypcję tekstową. Odtwarzacze tych plików zamieszczone na stronie powinny dać się obsłużyć za pomocą klawiatury i być dostępne dla osób niewidomych. 4. Wszystkie plik wideo powinny być uzupełnione o napisy dla osób niesłyszących. Odtwarzacze powinny być dostępne dla osób niewidomych i osób korzystających wyłącznie z klawiatury.

23 5. Wszelkie pliki multimedialne i Flash powinny być dostępne lub udostępnione w postaci alternatywnej. 6. Pliki PDF, Word i inne popularne pliki do ściągnięcia powinny być przygotowane jako dostępne. Np. pliki PDF powinny mieć strukturę, która pomaga osobom niewidomym przeglądanie takich dokumentów.

24 7. Teksty zamieszczone w serwisie powinny być napisane w miarę możliwości w jak najprostszy sposób, tak aby dostęp do nich miały mniej wykształcone osoby a także osoby z upośledzeniem intelektualnym.

25 8. Teksty powinny być opublikowane w czytelny sposób podzielone na paragrafy, listy i inne sekcje; nie justowane do prawej strony; skróty literowe powinny być rozwinięte w pierwszym wystąpieniu na każdej stronie. Tekst powinien być uzupełniony o nagłówki (h1-h6) aby osoby niewidome mogły sprawnie przejść do interesującej ich sekcji.

26 9. Nawigacja (menu) powinna być spójna, logiczna i niezmienna w obrębie serwisu. Nawigacja w obrębie całego serwisu powinna być dostępna z poziomu klawiatury. 10. Wszystkie elementy aktywne, takie jak odnośniki, banery czy pola formularza powinny mieć wyraźny wizualny fokus (zwykle 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.

27 11. 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 nie mogą otwierać się w nowym oknie lub zakładce przeglądarki bez ostrzeżenia. 12. Zaleca się zastosowanie usprawnienia w postaci skip links, czyli możliwości przejścia bezpośrednio do treści pojedynczej strony. Jest to szczególnie ważne w serwisach, które mają kilkadziesiąt linków w nawigacji/menu głównym.

28 13. Kontrast kolorystyczny wszystkich elementów przekazujących treść (tekstów, linków, banerów) lub funkcjonalnych musi mieć stosunek jasności tekstu do tła co najmniej 4,5 do 1, a najlepiej jeśli nie jest mniejszy niż 7 do Stronę powinno dać się znacząco (co najmniej 200%) powiększyć narzędziami przeglądarki. Najlepiej jeśli wówczas strona cały czas mieści się poziomo oknie przeglądarki i nie pokazuje się poziomy pasek przewijania ekranu. Powiększona strona nie może gubić treści.

29 15. Wszystkie tytuły (title) stron muszą być unikalne i informować o treści podstrony na jakiej znajduje się użytkownik. Układ treści w tytule powinien być zbudowany wg schematu: [Tytuł podstrony] [Nazwa Instytucji]. 16. Wszystkie podstrony powinny być oparte o nagłówki. Nagłówki (h1-h6) są podstawowym sposobem porządkowania treści na stronie. Nagłówek h1 powinien być tytułem tekstu głównego na stronie.

30 17. Do porządkowanie treści w tekstach, czy elementów nawigacji należy wykorzystywać listy nieuporządkowane i uporządkowane. 18. Język strony oraz język fragmentów obcojęzycznych powinien być określony atrybutem lang. 19. Cytaty powinny być odpowiednio wyróżnione co najmniej cudzysłowami.

31 20. Kod serwisu powinien być zgodny ze standardami i nie korzystać z tabel jako elementu konstrukcyjnego strony. 21. Tabele służące do przekazania danych powinny być zbudowane w możliwie prosty sposób i posiadać nagłówki. 22. Wszystkie ramki powinny być odpowiednio zatytułowane.

32 23. Wszystkie skrypty i aplety powinny być dostępne dla osób niewidomych i osób korzystających wyłącznie z klawiatury. 24. Formularze, w tym formularz wyszukiwarki powinny być zbudowane zgodnie ze standardami. Wszystkie pola formularzy i przyciski powinny być właściwie opisane. 25. Serwis powinien być dostępny w przeglądarkach i urządzeniach z wyłączoną obsługą CSS.

33 Przydatne linki Sześć grzechów głównych wobec niewidomych WCAG 2.0 w skrócie 25 najważniejszych zasad 25 zaleceń dla redaktorów serwisów internetowych Standard WCAG - WCAG Oficjalne polskie tłumaczenie dokumentacji WCAG Utilitia validator