Zapewnij dostęp do informacji internetowej możliwie największej liczbie użytkowników bez względu na wiek, niepełnosprawność, sprzet i oprogramowanie. WCAG 2.0, WCAG 2.1, Accessibility.
4. • Dostępność za pomocą klawiatury
• Przejrzysty układ i wygląd
• Napisy w materiałach wideo
• Duże przyciski, kontrolki, itp.
Źródło: W3C Web Accessibility Initiative (WAI)
Essential for some, usefull for all
Niezbędne dla niektórych, przydatne dla wszystkich
5. Co to jest dostępność?
Zapewnienie dostępu do informacji możliwe
największej liczbie użytkowników
niezależnie od:
7. WCAG 2.0
(Norma ISO 40500:2012)
Zasady
1. Percepcja
2. Funkcjonalność
3. Zrozumiałość
4. Rzetelność
- 12 wytycznych
- 61 kryteriów sukcesu
- Techniki wystarczające i doradcze
8. A co konkretnie?
1. Wszystkie elementy graficzne muszą mieć adekwatny
do pełniącej funkcji opis alternatywny.
2. Odtwarzacze audio-wideo obsługiwane również za
pomocą klawiatury oraz czytników ekranu.
3. Osadzone materiały audio-wideo, powinny zawierać
transkrypcje lub napisy, o ile zawartość tego wymaga.
4. Poprawna struktura i hierarchia nagłówków.
9. A co konkretnie?
5. Grupy odnośników powinny być przedstawione za pomocą
list.
6. Kolejność nawigacji oraz czytania, określona za pomocą
kolejności w kodzie HTML musi być logiczna i intuicyjna.
7. Architektura informacji powinna być logiczna, przejrzysta,
spójna i przewidywalna.
8. Elementy nawigacyjne oraz komunikaty nie mogą polegać
tylko na konkretnych zmysłach jak np.: kształt, lokalizacja
wizualna, miejsce lub dźwięk.
10. A co konkretnie?
9. Odnośniki zamieszczone w treściach muszą odróżniać się od
pozostałego tekstu nie tylko kolorem, ale i dodatkowym
wyróżnieniem np. podkreśleniem lub sugestywną ikoną.
10. Po wczytaniu strony www dźwięk nie może być automatycznie
odtwarzany.
11. Kontrast treści w stosunku do tła musi wynosić co najmniej 4,5:1.
12. Po powiększeniu w przeglądarce rozmiaru czcionki do 200% nie
może nastąpić utrata zawartości lub funkcjonalności serwisu.
11. A co konkretnie?
13. Treści nie mogą być przedstawione za pomocą grafiki. Wyjątkiem
jest tekst, który jest częścią logo lub nazwy własnej produktu.
14. Nawigacja musi być również możliwa za pomocą klawiatury.
15. Fokus powinien być widoczny, a najlepiej wzmocniony i spełniać
minimalne wymagania kontrastu.
16. Automatyczne aktualizowane informacje muszą posiadać
mechanizm, który pozwoli na ich zatrzymanie lub ukrycie.
12. A co konkretnie?
17. Pierwszym elementem w kodzie HTML powinno być menu służące
do przeskoczenia do istotnych treści („skip links”).
18. Wszystkie strony serwisu muszą mieć unikalne tytuły.
19. Odnośniki typu („więcej”, „sprawdź”, „pobierz”, itp.) muszą być
uzupełnione tak, aby były zrozumiałe i jednoznacznie. Nie stosuj
linków typu „kliknij tutaj”, „tu”
20. Poza standardową nawigacją muszą być jeszcze inne sposoby
odnalezienia informacji jak np. mapa strony i wyszukiwarka.
13. A co konkretnie?
21. Zdefiniowany główny język dokumentu adekwatny do wersji
językowej (atrybut „lang”).
22. Dynamiczne zmiany treści jak np. okienka dialogowe/modalne,
ostrzeżenia, itp. oraz stany np. rozwinięte/zwinięte, wymagane, itp.
powinny być opatrzone odpowiednimi atrybutami ARIA.
23. Wszystkie pola formularzy muszą być opatrzone etykietami.
24. Wyniki walidacji formularzy muszą jednoznacznie informować o
błędach lub sukcesie.
14. A co konkretnie?
25. Jako zabezpieczenie formularzy nie może być zastosowane
rozwiązanie CAPTCHA, bazujące tylko na charakterystykach
zmysłowych jak wzrok czy słuch.
Dozwolone są inne metody jak np. proste zadanie matematyczne.
26. Zgodność kodu ze standardami HTML (deklaracja DOCTYPE)
15. Semantyczny HTML
Przykładowe skróty klawiaturowe (screen reader NVDA)
• Tab, Spacja, ↑, ↓, ←, →, Enter
• H – nagłówki ( + klawisze 1-6)
• K – linki ( + klawisze U, V)
• B – przyciski
• T – tabele
• G – grafiki
• L – listy ( + klawisz I)
• D – landmarki
• F – formularze
• E – pole edycji
• X – pole wyboru
• C – pole rozwijane
• R – pole opcji
17. WAI-ARIA
Accessible Rich Internet Applications
Zbiór atrybutów dodawanych do znaczników HTML.
• Role (Roles)
Przekazują informacje do aplikacji asystujących, że opisany nią
element jest czymś innym niż wynika to z jego znacznika.
• Właściwości (Properties)
Określają cechy lub dodatkowe znaczenie danego elementu, które nie
są dostępne w standardzie HTML.
• Stany (States)
Pozwalają określić jaki jest aktualny stan elementu.
18. WAI-ARIA - Zasady
1. Jeśli to możliwe używaj natywnych semantycznych
znaczników HTML zamiast stosowania roli i atrybutów
ARIA.
2. Jeśli nie musisz, nie zmieniaj natywnego znaczenia
znaczników HTML.
3. Wszystkie kontrolki stworzone za pomocą ARIA muszą
być możliwe do obsłużenia za pomocą klawiatury.
4. Nie używaj role="presentation" lub aria-hidden="true" na
widocznych interaktywnych elementach .
