Analiza dostępności strony

Jak działa ta kontrola

Scanaris analizuje HTML, który serwuje Twoja strona, bez uruchamiania JavaScriptu ani otwierania przeglądarki, i wykonuje osiem testów dostępności, które da się rozstrzygnąć z pewnością na podstawie kodu. Trzy mają średnią wagę: czy znacznik <html> deklaruje język przez lang, czy istnieje <meta name="viewport"> i czy żadne pole formularza (input, select, textarea, z wyłączeniem ukrytych i przycisków) nie jest pozbawione dostępnej etykiety, czyli ma <label for>, siedzi wewnątrz <label> albo niesie aria-label, aria-labelledby lub title. Pozostałe pięć ma niską wagę: obrazy bez atrybutu alt (puste alt="" jest poprawne dla dekoracyjnych; zawodzi brak atrybutu), linki z href i przyciski bez tekstu, bez aria-label i bez obrazu z alt w środku, powtórzone atrybuty id, elementy z tabindex większym od zera oraz puste nagłówki od h1 do h6. Każdy niezaliczony test otwiera własne ustalenie z liczbą.

Dlaczego to ważne

Około 15 % populacji ma jakąś niepełnosprawność, a znacznie więcej osób korzysta z sieci z czytnikiem ekranu, tylko klawiaturą albo z maksymalnym powiększeniem w konkretnych momentach. Dla nich obraz bez alt to dziura, pole bez etykiety to okienko, po którym nie wiadomo, czego się spodziewać, a przycisk będący tylko ikoną jest ogłaszany jako „przycisk" i nic więcej. Poza etyką to prawo: europejska dyrektywa o dostępności obowiązuje od czerwca 2025 roku większość usług cyfrowych firm, a w Stanach Zjednoczonych pozwy o niedostępne strony liczy się w tysiącach rocznie. I to SEO: alt, język i struktura nagłówków to dokładnie to, co czyta Google.

Jak to naprawić

• Język: <html lang="pl">. W Nuxt ustawia się to w app.head.htmlAttrs albo robi to moduł i18n; w Next.js na <html> głównego layoutu; w WordPressie zapisuje to language_attributes() w motywie.
• Viewport: <meta name="viewport" content="width=device-width, initial-scale=1">. Bez maximum-scale=1 ani user-scalable=no, które blokują powiększanie.
• Etykiety formularzy: jeden <label for="email"> na każde pole z jego id, albo pole wewnątrz <label>. Jeśli projekt nie pokazuje widocznej etykiety, aria-label="Adres e-mail". placeholder się nie liczy: znika przy pisaniu.
• Obrazy: opisowy alt na informacyjnych („Wykres sprzedaży w trzecim kwartale"), alt="" na dekoracyjnych. Komponenty obrazów Nuxt i Next.js wymagają tego atrybutu.
• Linki i przyciski z ikoną: aria-label="Otwórz menu" albo tekst ukryty wizualnie klasą sr-only. Ikony SVG inline dostają aria-hidden="true".
• Zduplikowane id: zwykle pochodzą z powtarzanych komponentów z id wpisanym na sztywno. Wyprowadź id z propa albo użyj useId().
• Dodatnie tabindex: zmień je na 0 i ułóż elementy w HTML-u w kolejności, w jakiej mają być przechodzone.
• Puste nagłówki: jeśli służyły do układu, zamień je na div; jeśli zawierają ikonę, daj im tekst.

Sprawdź, czy naprawione

curl -s https://twojadomena.pl | grep -oE '<html[^>]*>|<meta name="viewport"[^>]*>'
curl -s https://twojadomena.pl | grep -oE '<img[^>]*>' | grep -vc 'alt='

Pierwsze powinno pokazać lang i viewport; drugie powinno dać 0. Resztę wylistuje panel Lighthouse w Chrome (zakładka Dostępność) albo rozszerzenie axe DevTools, każdy element z jego selektorem.

Często zadawane pytania

Czy zaliczenie tych ośmiu testów oznacza, że moja strona jest dostępna?

Nie. To osiem testów, które da się sprawdzić z pewnością bez przeglądarki. Kontrast kolorów, widoczny fokus, rzeczywista kolejność czytania i komponenty budowane JavaScriptem wymagają przeglądu narzędziami przeglądarki, a przy czymś poważnym audytu ludzkiego. Ich zaliczenie oznacza natomiast, że nie popełniasz najczęstszych i najłatwiejszych do uniknięcia błędów.

Moja aplikacja to SPA i początkowy HTML jest prawie pusty.

Wtedy kontrola widzi niewiele, i Google też. To jeszcze jeden powód, żeby renderować na serwerze przynajmniej główną treść; wyjaśnia to treść bez JavaScriptu.

Dlaczego pusty alt jest poprawny, a brak alt nie?

Bo alt="" mówi czytnikowi ekranu „pomiń ten obraz, jest dekoracyjny", a bez atrybutu czytnik odczytuje nazwę pliku, która zwykle wygląda jak IMG_4821.jpg. Strukturę nagłówków, która wpływa na nawigację czytnikiem ekranu, sprawdza też nagłówki.