ANDI.js
ANDI.js to darmowe, otwarte narzędzie do testowania dostępności, opracowane przez U.S. Social Security Administration (SSA). Jest to unikalne rozwiązanie w postaci skryptozakładki (bookmarklet/favelet), co oznacza, że nie wymaga instalowania tradycyjnego rozszerzenia przeglądarki.
ANDI jest przeznaczone dla deweloperów i testerów, ponieważ:
- Automatycznie wykrywa błędy dostępności.
- Wskazuje, jak technologie wspomagające (np. czytniki ekranu) „widzą” dany element.
- Działa w formie nakładki na stronie, wyświetlając szczegółowe informacje techniczne o danym elemencie HTML i ARIA.
Skąd pobrać?
ANDI nie jest instalowane jak typowa wtyczka, lecz jako skryptozakładka na pasku zakładek przeglądarki.
| Przeglądarka | Instrukcja instalacji |
|---|---|
| Wszystkie | Wejdź na oficjalną stronę instalacji (lub polski mirror) i przeciągnij link o nazwie „ANDI” (lub podobnej) na pasek zakładek/ulubionych w przeglądarce. |
| Chrome / Firefox / Edge | Upewnij się, że pasek zakładek jest widoczny (zazwyczaj Ctrl + Shift + B). |
Uruchomienie: Aby aktywować narzędzie na dowolnej stronie, wystarczy kliknąć na zakładkę „ANDI” na pasku ulubionych.
Uwaga na CSP: Czasami polityka bezpieczeństwa treści (CSP) strony internetowej może blokować uruchomienie skryptu ANDI. W takim przypadku, aby kontynuować testowanie, konieczne może być tymczasowe wyłączenie CSP za pomocą dedykowanego rozszerzenia lub ustawień przeglądarki.
Do konkretnie jakich podpunktów WCAG 2.2 na poziomie AA przydaje się to narzędzie w testowaniu?
Dzięki rozbudowanej strukturze modułów, ANDI jest niezwykle przydatne w weryfikacji szczegółowych kryteriów WCAG, koncentrując się na technicznej poprawności i semantyce – kluczowych dla zasady Robust (Solidność).
| Moduł | Cel modułu | Kryterium WCAG 2.2 AA / A | Szczegółowy zakres testowania |
|---|---|---|---|
| ANDIinteraktywne (Domyślny) | Interakcja i fokus | 2.1.1 (A), 4.1.2 (A) | Elementy interaktywne, kolejność tabulacji, użycie accesskey, dostępna nazwa i rola. |
| lANDI | Łącza i przyciski | 2.4.4 (A), 4.1.2 (A) | Porównanie tekstu łączy, poprawność przycisków, unikalność linków (np. linki o tym samym tekście prowadzące w różne miejsca). |
| gANDI | Grafika/obrazy | 1.1.1 (A) | Obecność i inspekcja tekstu alternatywnego (alt) dla obrazów oraz innych grafik i komponentów. |
| tANDI | Tabele | 1.3.1 (A) | Poprawność struktury tabel danych, powiązania komórek nagłówkowych (TH) z komórkami danych. |
| sANDI | Struktury | 1.3.1 (A), 2.4.6 (AA) | Nagłówki (h1–h6), semantyczny HTML (np. <main>, <nav>), role ARIA i atrybut języka (lang). |
| cANDI | Kontrast kolorów | 1.4.3 (AA), 1.4.11 (AA) | Automatyczne obliczanie kontrastu dla tekstu i graficznych komponentów interfejsu. |
| hANDI | Ukryta treść | 1.3.1 (A) | Ujawnianie ukrytych treści (np. za pomocą CSS lub atrybutów aria-hidden) w celu weryfikacji, czy treść została ukryta prawidłowo. |
| iANDI | iFrame | Testowanie treści w elementach <iframe>, w tym dostępność tytułu dla ramki. |
Jak testować?
ANDI jest narzędziem uzupełniającym testy automatyczne, kładącym nacisk na inspekcję elementów na poziomie kodu.
- Uruchomienie: Kliknij zakładkę „ANDI” na pasku zakładek. Na stronie pojawi się nakładka z panelem kontrolnym i domyślnie uruchomionym modułem „i ANDI”.
- Inspekcja elementu: ANDI automatycznie przechodzi przez interaktywne elementy (lub inne, w zależności od wybranego modułu), podświetlając je na stronie.
- Analiza wyniku:
- W panelu ANDI wyświetlana jest informacja o aktualnym elemencie.
- Możesz zobaczyć, jaką rolę ARIA i dostępną nazwę element przyjmuje, co symuluje odczyt czytnika ekranu.
- Wszelkie potencjalne naruszenia są oznaczane jako Alerty w sekcji Wyjście (Output), z podziałem na priorytety (np. czerwone alerty — niemal pewne wady).
- Zmiana modułu: Użyj Menu wyboru modułu w panelu ANDI, aby przełączyć się na testowanie innej kategorii, np. struktur (
s ANDI) lub kontrastu (c ANDI). - Testowanie dynamicznej treści: Jeśli na stronie zmieni się treść (np. otworzy się menu po kliknięciu), należy kliknąć przycisk „Odśwież/Uruchom ponownie” w panelu ANDI, aby przeskanować nowo wyświetlone elementy.
- Szybka nawigacja: ANDI oferuje skróty klawiszowe, które pozwalają testerom szybko przeskakiwać do sekcji Wyjście (Output) lub pomiędzy elementami, co jest kluczowe w testach dostępności.
Dodatkowe linki
- Dokumentacja: