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
Dostępność stron internetowych Grupy użytkowników narażonych na wykluczenie cyfrowe
Wykluczenie cyfrowe Brak lub ograniczona możliwość skorzystania z nowoczesnych form komunikacji.
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.
Dostępność stron internetowych Accessibility (A11y)
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.
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.
Dostępność stron internetowych WCAG 2.0 Zasady Wytyczne Kryteria sukcesu (A, AA, AAA) 61 kryteriów sukcesu
WCAG 2.0 - 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.
WCAG 2.0 - 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). 1.1.1. Treść nietekstowa (A)
WCAG 2.0 - Postrzegalność Wytyczna 1.2. Media zmienne w czasie: Należy dostarczyć alternatywę dla mediów zmiennych w czasie. 1.2.1. Tylko audio lub tylko wideo (nagranie) (A) 1.2.2. Napisy rozszerzone (nagranie) (A) 1.2.3. Audiodeskrypcja lub alternatywa dla mediów (nagranie) (A) 1.2.4. Napisy rozszerzone (na żywo) (AA) 1.2.5. Audiodeskrypcja (nagranie) (AA) 1.2.6. Język migowy (nagranie) (AAA) 1.2.7. Rozszerzona audiodeskrypcja (nagranie) (AAA) 1.2.8. Alternatywa dla mediów (nagranie) (AAA) 1.2.9. Tylko audio (na żywo) (AAA)
WCAG 2.0 - 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. 1.3.1. Informacje i relacje (A) 1.3.2. Zrozumiała kolejność (A) 1.3.3. Właściwości zmysłowe (A)
WCAG 2.0 - 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. 1.4.1. Użycie koloru (A) 1.4.2. Kontrola odtwarzania dźwięku (A) 1.4.3. Kontrast (minimalny) (AA) 1.4.4. Zmiana rozmiaru tekstu (AA) 1.4.5. Obrazy tekstu (AA) 1.4.6. Wzmocniony kontrast (AAA) 1.4.7. Niska głośność lub brak tła dźwiękowego (AAA) 1.4.8. Prezentacja wizualna (AAA) 1.4.9. Obrazy tekstu (bez wyjątków) (AAA)
WCAG 2.0 - 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. 2.1.1. Klawiatura (A) 2.1.2. Brak pułapki na klawiaturę (A) 2.1.3. Klawiatura (bez wyjątków) (AAA)
WCAG 2.0 - Funkcjonalność Wytyczna 2.2. Wystarczająca ilość czasu: Zapewnij użytkownikom wystarczająco dużo czasu na przeczytanie i skorzystanie z treści. 2.2.1. Możliwość dostosowania czasu (A) 2.2.2. Wstrzymywanie (pauza), zatrzymywanie, ukrywanie (A) 2.2.3. Brak ograniczeń czasowych (AAA) 2.2.4. Zakłócenie pracy użytkownika (AAA) 2.2.5. Ponowne potwierdzenie autentyczności (AAA)
WCAG 2.0 - Funkcjonalność Wytyczna 2.3. Ataki padaczki: Nie należy projektować treści w taki sposób, aby prowokować ataki padaczki. 2.3.1. Trzy błyski lub wartości poniżej progu (A) 2.3.2. Trzy błyski (AAA)
WCAG 2.0 - 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. 2.4.1. Możliwość pominięcia bloków (A) 2.4.2. Tytuły stron (A) 2.4.3. Kolejność fokusa (A) 2.4.4. Cel linku (w kontekście) (A) 2.4.5. Wiele dróg (AA) 2.4.6. Nagłówki i etykiety (AA) 2.4.7. Widoczny fokus (AA) 2.4.8. Lokalizacja (AAA) 2.4.9. Cel linku (z samego linku) (AAA) 2.4.10. Nagłówki sekcji (AAA)
WCAG 2.0 - 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. 3.1.1. Język strony (A) 3.1.2. Język części (AA) 3.1.3. Nietypowe słowa (AAA) 3.1.4. Skróty (AAA) 3.1.5. Poziom umiejętności czytania (AAA) 3.1.6. Wymowa (AAA)
WCAG 2.0 - Zrozumiałość Wytyczna 3.2. Przewidywalność: Strony internetowe powinny otwierać się i działać w przewidywalny sposób. 3.2.1. Po oznaczeniu fokusem (A) 3.2.2. Podczas wprowadzania danych (A) 3.2.3. Konsekwentna nawigacja (AA) 3.2.4. Konsekwentna identyfikacja (AA) 3.2.5. Zmiana na żądanie (AAA)
WCAG 2.0 - Zrozumiałość Wytyczna 3.3. Pomoc przy wprowadzaniu informacji: Istnieje wsparcie dla użytkownika, by mógł uniknąć błędów lub je skorygować. 3.3.1. Identyfikacja błędu (A) 3.3.2. Etykiety lub instrukcje (A) 3.3.3. Sugestie korekty błędów (AA) 3.3.4. Zapobieganie błędom (kontekst prawny, finansowy, związany z podawaniem danych) (AA) 3.3.5. Pomoc (AAA) 3.3.6. Zapobieganie błędom (wszystkim) (AAA)
WCAG 2.0 - 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. 4.1.1. Parsowanie (A) 4.1.2. Nazwa, rola, wartość (A)
Dostępność stron internetowych Dobre praktyki w tworzeniu dostępnych stron internetowych
Odpowiedniki tekstowe (obrazki, zdjęcia, wykresy) Odpowiedniki tekstowe dla elementów graficznych (alt)
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="" />
Etykiety pól formularzy <label> <label for="name">imię *</label> <input type="text" name="imie" id="imie" size="30" />
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" />
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" />
Etykiety pól formularzy <label> Mam telefon <input type="checkbox" name="..." /> </label>
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>
Użycie nagłówków <h1>, <h2>, <h3>,
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.
Użycie list elementów
Użycie tabel <table>, <th>, <td>, <caption>
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 http://www.paciellogroup.com/resources/contrast-analyser.html
Jednoznaczne tytuły stron <title>fundacja Widzialni</title> <title>fundacja Widzialni - Szkolenia</title> <title>szkolenia - Fundacja Widzialni</title>
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
Obsługa serwisu za pomocą klawiatury
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
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)
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>
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.
Dodatkowe ułatwienia zmiana kontrastu, powiększanie czcionek, język migowy
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>
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: http://validator.w3.org http://jigsaw.w3.org/css-validator http://wave.webaim.org http://www.totalvalidator.com
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: -10000em; top: 0; } Nie należy używać deklaracji CSS: display: none; visibility: hidden;
Dziękuję za uwagę Marcin Luboń Fundacja Widzialni marcin.lubon@widzialni.org www.widzialni.org www.wcag20.widzialni.org