Dobre praktyki w tworzeniu dostępnych stron www zgodnych ze standardem WCAG 2.0

Transkrypt

1 Dobre praktyki w tworzeniu dostępnych stron www zgodnych ze standardem WCAG 2.0 Marcin Luboń Fundacja Widzialni Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego

2 Dostępność stron internetowych Grupy użytkowników narażonych na wykluczenie cyfrowe

3 Wykluczenie cyfrowe Brak lub ograniczona możliwość skorzystania z nowoczesnych form komunikacji.

4 Osoby niewidome i niedowidzące, Osoby głuche i głuchoniewidome, Osoby niepełnosprawne intelektualnie, Osoby starsze, Osoby korzystające z urządzeń mobilnych, Osoby niezamożne z biednych regionów oraz osoby korzystające ze starych typów komputerów.

5 Dostępność stron internetowych Accessibility (A11y)

6 Konsorcjum W3C Umożliwienie wszystkim ludziom korzystania z dobrodziejstw Sieci bez względu na ich: sprzęt, oprogramowanie, infrastrukturę, język, kulturę i położenie geograficzne, możliwości umysłowe lub fizyczne.

7 Web Accessibility Initiative (WAI) (pl. Inicjatywa dostępności do sieci) Inicjatywa W3C mająca na celu zwiększenie szeroko rozumianej dostępności stron WWW oraz dokumentów umieszczanych w formie plików do pobrania.

8 Dostępność stron internetowych WCAG 2.0 Zasady Wytyczne Kryteria sukcesu (A, AA, AAA) 61 kryteriów sukcesu

9 WCAG Zasady Postrzegalność Informacje oraz komponenty interfejsu użytkownika muszą być przedstawione użytkownikom w dostępny dla nich sposób. Funkcjonalność Komponenty interfejsu użytkownika oraz nawigacja muszą być funkcjonalne (powinny pozwalać na interakcję). Zrozumiałość Treść oraz obsługa interfejsu użytkownika musi być zrozumiała. 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.

10 WCAG Postrzegalność Informacje oraz komponenty interfejsu użytkownika muszą być przedstawione użytkownikom w sposób dostępny dla ich zmysłów. Wytyczna 1.1. Alternatywa w postaci tekstu: Dla każdej treści nietekstowej należy dostarczyć alternatywną treść w formie tekstu, która może być zamieniona przez użytkownika w inne formy (np. powiększony druk, brajl, mowa syntetyczna, symbole lub język uproszczony) Treść nietekstowa (A)

11 WCAG Postrzegalność Wytyczna 1.2. Media zmienne w czasie: Należy dostarczyć alternatywę dla mediów zmiennych w czasie Tylko audio lub tylko wideo (nagranie) (A) Napisy rozszerzone (nagranie) (A) Audiodeskrypcja lub alternatywa dla mediów (nagranie) (A) Napisy rozszerzone (na żywo) (AA) Audiodeskrypcja (nagranie) (AA) Język migowy (nagranie) (AAA) Rozszerzona audiodeskrypcja (nagranie) (AAA) Alternatywa dla mediów (nagranie) (AAA) Tylko audio (na żywo) (AAA)

12 WCAG Postrzegalność Wytyczna 1.3. Możliwość adaptacji: Należy tworzyć treści, które mogą być prezentowane na różne sposoby (np. uproszczony układ wizualny), bez utraty informacji czy struktury Informacje i relacje (A) Zrozumiała kolejność (A) Właściwości zmysłowe (A)

13 WCAG Postrzegalność Wytyczna 1.4. Możliwość rozróżnienia: Użytkownik powinien móc dobrze widzieć bądź słyszeć treści mieć możliwość oddzielenia informacji od tła Użycie koloru (A) Kontrola odtwarzania dźwięku (A) Kontrast (minimalny) (AA) Zmiana rozmiaru tekstu (AA) Obrazy tekstu (AA) Wzmocniony kontrast (AAA) Niska głośność lub brak tła dźwiękowego (AAA) Prezentacja wizualna (AAA) Obrazy tekstu (bez wyjątków) (AAA)

14 WCAG Funkcjonalność Komponenty interfejsu użytkownika oraz nawigacja muszą być możliwe do użycia. Wytyczna 2.1. Dostępność z klawiatury: Zapewnij dostępność wszystkich funkcjonalności za pomocą klawiatury Klawiatura (A) Brak pułapki na klawiaturę (A) Klawiatura (bez wyjątków) (AAA)

15 WCAG Funkcjonalność Wytyczna 2.2. Wystarczająca ilość czasu: Zapewnij użytkownikom wystarczająco dużo czasu na przeczytanie i skorzystanie z treści Możliwość dostosowania czasu (A) Wstrzymywanie (pauza), zatrzymywanie, ukrywanie (A) Brak ograniczeń czasowych (AAA) Zakłócenie pracy użytkownika (AAA) Ponowne potwierdzenie autentyczności (AAA)

16 WCAG Funkcjonalność Wytyczna 2.3. Ataki padaczki: Nie należy projektować treści w taki sposób, aby prowokować ataki padaczki Trzy błyski lub wartości poniżej progu (A) Trzy błyski (AAA)

17 WCAG Funkcjonalność Wytyczna 2.4. Możliwość nawigacji: Dostarczenie narzędzi ułatwiających użytkownikowi nawigowanie, znajdowanie treści i ustalanie, gdzie się w danym momencie znajduje Możliwość pominięcia bloków (A) Tytuły stron (A) Kolejność fokusa (A) Cel linku (w kontekście) (A) Wiele dróg (AA) Nagłówki i etykiety (AA) Widoczny fokus (AA) Lokalizacja (AAA) Cel linku (z samego linku) (AAA) Nagłówki sekcji (AAA)

18 WCAG Zrozumiałość Informacje oraz obsługa interfejsu użytkownika muszą być zrozumiałe. Wytyczna 3.1. Możliwość odczytania: Treść powinna być zrozumiała i możliwa do odczytania Język strony (A) Język części (AA) Nietypowe słowa (AAA) Skróty (AAA) Poziom umiejętności czytania (AAA) Wymowa (AAA)

19 WCAG Zrozumiałość Wytyczna 3.2. Przewidywalność: Strony internetowe powinny otwierać się i działać w przewidywalny sposób Po oznaczeniu fokusem (A) Podczas wprowadzania danych (A) Konsekwentna nawigacja (AA) Konsekwentna identyfikacja (AA) Zmiana na żądanie (AAA)

20 WCAG Zrozumiałość Wytyczna 3.3. Pomoc przy wprowadzaniu informacji: Istnieje wsparcie dla użytkownika, by mógł uniknąć błędów lub je skorygować Identyfikacja błędu (A) Etykiety lub instrukcje (A) Sugestie korekty błędów (AA) Zapobieganie błędom (kontekst prawny, finansowy, związany z podawaniem danych) (AA) Pomoc (AAA) Zapobieganie błędom (wszystkim) (AAA)

21 WCAG Solidność Treść musi być solidnie opublikowana, tak, by mogła być skutecznie interpretowana przez różnego rodzaju oprogramowania użytkownika, w tym technologie wspomagające. Wytyczna 4.1. Kompatybilność: Zmaksymalizowanie kompatybilności z obecnymi oraz przyszłymi programami użytkowników, w tym z technologiami wspomagającymi Parsowanie (A) Nazwa, rola, wartość (A)

22 Dostępność stron internetowych Dobre praktyki w tworzeniu dostępnych stron internetowych

23 Odpowiedniki tekstowe (obrazki, zdjęcia, wykresy) Odpowiedniki tekstowe dla elementów graficznych (alt)

24 Odpowiedniki tekstowe (obrazki, zdjęcia, wykresy) Odpowiedniki tekstowe dla elementów graficznych (alt) <img src="a_gier.jpg" alt="aleksander Gierymski. Żydówka z cytrynami 1881" /> <a href="youtube.pl"> </a> <img src="yt.png" alt="przejdź na nasz kanał Youtube" /> <img src="koszyk.png" alt="" />

25 Etykiety pól formularzy <label> <label for="name">imię *</label> <input type="text" name="imie" id="imie" size="30" />

26 Etykiety pól formularzy <label for="phone"> Nr telefonu (wymagane) </label> <input type="text" name="phone" id="phone" size="30" /> <label for="phone"> Nr telefonu <abbr title="wymagane">*</abbr> </label> <input type="text" name="phone" id="phone" size="30" />

27 Etykiety pól formularzy <label for="phone"> Nr telefonu (wymagane) <span class="format">9 cyfr bez spacji</span> </label> <input type="text" name="phone" id="phone" size="30" />

28 Etykiety pól formularzy <label> Mam telefon <input type="checkbox" name="..." /> </label>

29 Etykiety pól formularzy <fieldset> <legend>czy informacja jest dla Ciebie zrozumiała</legend> <input type="radio" name="..." id="tak" /> <label for="tak">tak</label> <input type="radio" name="..." id="nie" /> <label for="nie">nie</label> </fieldset>

30 Użycie nagłówków <h1>, <h2>, <h3>,

31 Użycie nagłówków Nieświadome użycie nagłówków wyższego poziomu w treściach, co wynika z nieznajomości struktury serwisu przygotowanej przez web developerów, np.: h2 Strona główna h2 Menu h2 Treść h1 Nagłówek w treści h4 Nagłówek w treści Należy zablokować możliwość dodawania nagłówków wyższej hierarchii, Niesemantyczne używanie nagłówków, związane z ich domyślnym wymiarem i pogrubieniem.

32 Użycie list elementów

33 Użycie tabel <table>, <th>, <td>, <caption>

34 Kontrast Odpowiedni kontrast tekstów w stosunku do tła Tekst lub grafiki tekstowe powinny posiadać kontrast w stosunku 4,5:1 Program do analizy kontrastu

35 Jednoznaczne tytuły stron <title>fundacja Widzialni</title> <title>fundacja Widzialni - Szkolenia</title> <title>szkolenia - Fundacja Widzialni</title>

36 Zasady tworzenia linków Treść linku musi być zrozumiała, informować użytkownika dokąd go zaprowadzi lub jaką akcję wykona Nie używaj linków typu: kliknij tutaj, czytaj więcej, tu, itp. W przypadku pełnej oferty konieczna jest wcześniejsza rejestracja w Klubie. Szczegóły zamieszczone tutaj. Zarejestruj się w Klubie aby skorzystać z pełnej oferty. Informacja o otwarciu w nowym oknie

37 Obsługa serwisu za pomocą klawiatury

38 Zaznaczenie aktywnych elementów :hover :focus :active :hover:active Etc. a:hover { color:#000; textdecoration:underline; } a:focus { background:#00519f; color:#fff; textdecoration:none;} Zaznaczenie powinno posiadać odpowiedni kontrast

39 Kolejność informacji Kolejność przetwarzania informacji powinna być zgodna z kolejnością kodu wynikowego HTML, Należy zwrócić uwagę na wykorzystanie wtyczek np. tabs z jquery bez ładowania informacji za pomocą AJAX, Kolejność przetwarzania informacji w naszej kulturze opiera się na zasadzie litery Z (od lewej do prawej)

40 Bezpośredni dostęp Zapewnienie bezpośredniego dostępu do treści (skiplinks) <ul class="nav"> </ul> <li><a href="#mm">przejdź do menu głównego</a></li> <li><a href="#txt">przejdź do treści</a></li> <li><a href="#search">przejdź do wyszukiwarki</a></li> <li><a href="index.php?p=map">mapa strony</a></li>

41 Dostęp do informacji na różne sposoby Zapewnić wiele sposobów na znalezienie innych stron w serwisie przynajmniej dwa z następujących: spis treści, mapa serwisu, wyszukiwarka, lista wszystkich podstron.

42 Dodatkowe ułatwienia zmiana kontrastu, powiększanie czcionek, język migowy

43 Semantyczny kod HTML Wszystkie treści umieszczone na stronach powinny być ujęte w semantycznych znacznikach HTML: <h1...h6> <ul> <p> <table> <blockquote>... Nie należy umieszczać tekstów bezpośrednio w tagach: <div> Nie należy umieszczać aktywnych elementów jako tagi: <div>, <span>

44 Rzetelny kod HTML i CSS Unikać błędów semantycznych HTML/XHTML (bez względu na wersje) Kod może zostać sprawdzony i przeanalizowany na:

45 Prawidłowe ukrywanie treści.wcag_hide { clip: rect(1px, 1px, 1px, 1px); display: block; position: absolute; }.wcag_hide { height: 1px; width: 1px; position: absolute; left: em; top: 0; } Nie należy używać deklaracji CSS: display: none; visibility: hidden;

46 Dziękuję za uwagę Marcin Luboń Fundacja Widzialni