Testowanie dostępności

Nawet najlepsza wiedza o dostępności nie zastapi praktycznego testowania. Tak jak archeolodzy systematycznie przeszukuja stanowiska wykopaliskowe, tak my musimy systematycznie testowac nasze strony pod katem dostępności, używając różnych narzędzi i metod.

Automatyczne narzędzia

Lighthouse (wbudowany w Chrome DevTools)

Lighthouse to bezplatne narzędzie Google, które można uruchomić bezpośrednio z Chrome DevTools:

1. Otworz DevTools (F12)
2. Przejdz do zakładki "Lighthouse"
3. Zaznacz "Accessibility"
4. Kliknij "Analyze page load"

Lighthouse sprawdza m.in.:

• Czy obrazy maja tekst alternatywny
• Czy kontrast kolorow jest wystarczajacy
• Czy elementy formularzy maja etykiety
• Czy strona ma poprawna hierarchie nagłówków

axe DevTools

axe to jedno z najpopularniejszych narzędzi do testowania dostępności:

1<!-- Wynik testu axe może wygladas tak: -->
2<!--
3  Violation: Images must have alternate text
4  Element: <img src="pharaoh.jpg">
5  Fix: Add an alt attribute to the image
6  Impact: Critical
7  WCAG: 1.1.1 (Level A)
8-->

HTML Validator (W3C)

Poprawny HTML to fundament dostępności:

1<!-- Bledy wykrywane przez walidator: -->
2
3<!-- Błąd: Brak atrybutu alt -->
4<img src="photo.jpg">
5
6<!-- Błąd: Zduplikowane ID -->
7<input id="name">
8<label id="name">
9
10<!-- Błąd: Niepoprawne zagniezdzenie -->
11<p>Tekst <div>w divie</div> w paragrafie</p>

Reczne testowanie

Test klawiatury

Najprostszy test reczny - nawiguj po stronie używając TYLKO klawiatury:

1Checklist nawigacji klawiaturowej:
2[ ] Czy można dotrzec do każdego interaktywnego elementu Tabem?
3[ ] Czy kolejnosc focusu jest logiczna?
4[ ] Czy focus jest zawsze widoczny?
5[ ] Czy modalne okna dialogowe przechwytuja focus?
6[ ] Czy można zamknac modal klawiszem Escape?
7[ ] Czy skip link działa poprawnie?
8[ ] Czy formularze można wyslac Enterem?
9[ ] Czy rozwijane menu można nawigowac strzalkami?

Test czytnika ekranowego

Popularne czytniki ekranowe:

• NVDA (Windows, bezplatny) - www.nvaccess.org
• VoiceOver (macOS/iOS, wbudowany) - Cmd + F5
• JAWS (Windows, platny) - profesjonalny standard
• TalkBack (Android, wbudowany)

Test powiekszania

1Checklist testu powiekszania:
2[ ] Powieksz stronę do 200% - czy całą tresc jest widoczna?
3[ ] Powieksz do 400% - czy strona nadal działa?
4[ ] Czy tekst się nie ucina i nie nakklada?
5[ ] Czy scrollowanie jest tylko w jednym kierunku?

Chrome DevTools - Accessibility

Panel Accessibility

1Chrome DevTools > Elements > Accessibility:
2- Name: "Zamknij" (z aria-label)
3- Role: button
4- Keyboard-focusable: true
5- Description: "Zamknij okno dialogowe"

Symulacja wad wzroku

Chrome DevTools > Rendering > Emulate vision deficiencies:

• Protanopia (brak czerwonego)
• Deuteranopia (brak zielonego)
• Tritanopia (brak niebieskiego)
• Blurred vision (nieostre widzenie)

Inspekcja kontrastu

1Chrome DevTools > Elements > Computed:
2- Kliknij na kolor tekstu
3- Narzedzie pokaze wspolczynnik kontrastu
4- Zielona ikona = spelnia WCAG AA
5- Pomaranczowa ikona = spelnia WCAG A
6- Czerwona ikona = nie spelnia wyamagan

Automatyzacja testow a11y

eslint-plugin-jsx-a11y (React)

1{
2  "plugins": ["jsx-a11y"],
3  "rules": {
4    "jsx-a11y/alt-text": "error",
5    "jsx-a11y/anchor-has-content": "error",
6    "jsx-a11y/label-has-associated-control": "error",
7    "jsx-a11y/no-noninteractive-element-interactions": "warn"
8  }
9}

axe-core w testach

1<!-- Przykład wyniku testu axe-core: -->
2<!--
3  Rule: color-contrast
4  Description: Elements must have sufficient color contrast
5  Help: Fix any of the following:
6    Element has insufficient color contrast of 2.5:1
7    Expected minimum: 4.5:1
8  Target: .subtitle
9-->

Checklist dostępności - kompletną lista

1<!-- Struktura HTML -->
2<!-- [ ] Poprawna hierarchia nagłówków (h1-h6) -->
3<!-- [ ] Semantyczne znaczniki (header, nav, main, footer) -->
4<!-- [ ] Jezyk strony (lang="pl") -->
5
6<!-- Obrazy -->
7<!-- [ ] Alt text dla obrazów informacyjnych -->
8<!-- [ ] Pusty alt="" dla dekoracyjnych -->
9
10<!-- Nawigacja -->
11<!-- [ ] Skip link -->
12<!-- [ ] Widoczny focus -->
13<!-- [ ] Logiczna kolejnosc Tab -->
14
15<!-- Formularze -->
16<!-- [ ] Label dla każdego pola -->
17<!-- [ ] Komunikaty o bledach -->
18<!-- [ ] aria-required dla wymaganych pol -->
19
20<!-- Kolor i kontrast -->
21<!-- [ ] Kontrast minimum 4.5:1 -->
22<!-- [ ] Informacja nie tylko przez kolor -->
23
24<!-- Multimedia -->
25<!-- [ ] Napisy do wideo -->
26<!-- [ ] Transkrypcje do audio -->
27
28<!-- ARIA -->
29<!-- [ ] aria-label dla przyciskow-ikon -->
30<!-- [ ] aria-live dla dynamicznych treści -->
31<!-- [ ] aria-expanded dla rozwijanek -->

Testowanie dostępności to jak weryfikacja, czy każdy korytarz w piramidzie prowadzi dokad powinien - systematyczne sprawdzanie każdego elementu, aby upewnic się, że każdy odwiedzajacy dotrze do celu.