A11Y Order Helper

About

A11Y Order Helper to narzędzie dla testerów dostępności, developerów i audytorów UX, które w jednym kliknięciu wizualizuje kolejność nawigacji klawiaturą (tab order) oraz kolejność odczytu czytnika ekranu na dowolnej stronie internetowej.

>Co robi rozszerzenie?
Po kliknięciu Uruchom na aktywnej stronie pojawia się półprzezroczysta warstwa (overlay) z ponumerowanymi znacznikami na każdym interaktywnym elemencie. Numery pokazują dokładnie, w jakiej kolejności użytkownik klawiatury lub czytnika ekranu trafi na dany element — bez konieczności ręcznego wciskania Tab dziesiątki razy.
Funkcje

>Trzy tryby kolejności
---Focus order — klasyczna kolejność Tab (przyciski, linki, inputy, elementy z tabindex)
---VoiceOver — kolejność odczytu zbliżona do Apple VoiceOver (nagłówki, obrazy z opisem alt, elementy focusable)
NVDA — kolejność odczytu zbliżona do NVDA na Windows

>Dostosowanie widoku
---Suwak przezroczystości: od czystej mapy (białe tło) do pełnej widoczności strony pod spodem możesz porównywać layout z numerami jednocześnie
---Dwa motywy wizualne: Domyślny (żółte odważne znaczniki) i Minimalny (subtelne, szare)

>Podpis weryfikacji
---Pole tekstowe, w którym wpisujesz imię i nazwisko testera lub nazwę testowanego scenariusza
---Podpis pojawia się w lewym dolnym rogu overlayu — widoczny na zrzutach ekranu do raportów i dokumentacji
---Przycisk DataNow jednym kliknięciem dopisuje aktualną datę i godzinę (np. 2026-02-21 22:30)
---Wartość jest zapamiętywana między sesjami

>Techniczne szczegóły
---Overlay renderowany przez Shadow DOM — izolowany od styli strony, zawsze na wierzchu (z-index: 2147483647)
---Nie zbiera żadnych danych, nie wysyła nic na zewnątrz
---Uprawnienia tylko: activeTab + storage (lokalnie)
---Działa na każdej stronie (<all_urls>)

>Dla kogo?
---Testerzy i audytorzy dostępności (WCAG 2.1 / 2.2)
---Developerzy frontendowi sprawdzający poprawność tab order
---UX designerzy weryfikujący logikę nawigacji
---Zespoły QA dokumentujące wyniki audytów a11y