Jak sprawdzić dostępność strony internetowej (WCAG)

Dostępność stron internetowych (accessibility, a11y) to nie tylko wymóg prawny w wielu krajach, ale przede wszystkim dobra praktyka, która poszerza grono odbiorców. W tym artykule pokażę, jak szybko sprawdzić zgodność strony z wytycznymi WCAG.

Czym jest WCAG?

WCAG (Web Content Accessibility Guidelines) to międzynarodowe wytyczne dotyczące dostępności treści internetowych. Aktualna wersja to WCAG 2.2, która definiuje trzy poziomy zgodności:

Poziom	Opis
A	Minimum - podstawowe wymagania
AA	Standard - wymagany w większości regulacji
AAA	Zaawansowany - najwyższy poziom dostępności

Większość przepisów (np. European Accessibility Act) wymaga poziomu AA.

Dlaczego dostępność jest ważna?

Aspekt prawny

• EU: European Accessibility Act (EAA) od 2025 roku
• PL: Ustawa o dostępności cyfrowej
• US: ADA, Section 508

Aspekt biznesowy

• 15% populacji ma jakąś formę niepełnosprawności
• Dostępne strony mają lepsze SEO (alt texty, struktura)
• Poprawiona UX dla wszystkich użytkowników

Aspekt techniczny

• Lepszy kod HTML
• Poprawna semantyka
• Lepsza nawigacja klawiaturą

Tradycyjne metody audytu

Ręczny audyt

Wymaga eksperta WCAG, który sprawdza stronę punkt po punkcie. Czasochłonne i kosztowne.

Lighthouse Accessibility

Wbudowany w Chrome DevTools, ale:

• Wymaga uruchomienia audytu
• Nie pokazuje kontekstu błędów
• Ograniczona lista sprawdzeń

axe DevTools

Popularne rozszerzenie, ale:

• Osobne narzędzie od audytu SEO
• Wymaga oddzielnego uruchomienia

UPER SEO Auditor - audyt dostępności

Rozszerzenie UPER SEO Auditor zawiera wbudowany audyt dostępności oparty na WCAG 2.2 Level A i AA.

Jakie kategorie są sprawdzane?

1. Obrazy - alt text, dekoracyjne obrazy
2. Nagłówki - hierarchia, pominięte poziomy
3. Linki - tekst linków, niejednoznaczne linki
4. Formularze - etykiety, instrukcje
5. Język - atrybut lang na html
6. ARIA - poprawne użycie atrybutów
7. Klawiatura - tabindex, focus
8. Kontrast - stosunek kontrastu tekstu
9. Powiększanie - tekst w jednostkach względnych

Jak uruchomić audyt?

1. Otwórz stronę w przeglądarce
2. Uruchom panel UPER SEO Auditor
3. Przejdź do zakładki A11y (lub Accessibility)
4. Wyniki pojawią się automatycznie

Kategorie sprawdzeń

Obrazy (WCAG 1.1.1)

Sprawdzane elementy:

Sprawdzenie	Opis	Impact
Brak alt	Obraz bez atrybutu alt	Critical
Pusty alt na linkedobrazku	Obraz linkowany bez opisu	Serious
Alt = filename	Alt zawiera nazwę pliku	Moderate
Długi alt	Alt > 125 znaków	Minor

Jak naprawić:

<!-- ❌ Źle -->
<img src="hero.jpg">
<img src="logo.png" alt="logo.png">

<!-- ✅ Dobrze -->
<img src="hero.jpg" alt="Zespół pracujący w biurze">
<img src="logo.png" alt="Logo firmy Example">

<!-- Obrazy dekoracyjne -->
<img src="decoration.svg" alt="" role="presentation">

Nagłówki (WCAG 1.3.1)

Sprawdzane elementy:

Sprawdzenie	Opis	Impact
Brak H1	Strona bez nagłówka H1	Serious
Wiele H1	Więcej niż jeden H1	Moderate
Pominięty poziom	H2 → H4 (brak H3)	Moderate
Pusty nagłówek	Nagłówek bez tekstu	Serious

Prawidłowa hierarchia:

<h1>Tytuł strony</h1>
  <h2>Sekcja główna</h2>
    <h3>Podsekcja</h3>
    <h3>Podsekcja</h3>
  <h2>Kolejna sekcja</h2>
    <h3>Podsekcja</h3>

Linki (WCAG 2.4.4)

Sprawdzane elementy:

Sprawdzenie	Opis	Impact
Niejednoznaczny tekst	”Kliknij tutaj”, “Więcej”	Moderate
Pusty link	Link bez tekstu	Critical
Tylko ikona	Link z samą ikoną bez aria-label	Serious

Niejednoznaczne teksty do unikania:

• “Kliknij tutaj”
• “Czytaj więcej”
• “Więcej”
• “Tutaj”
• “Link”

Jak naprawić:

<!-- ❌ Źle -->
<a href="/oferta">Kliknij tutaj</a>
<a href="/blog"><i class="icon-arrow"></i></a>

<!-- ✅ Dobrze -->
<a href="/oferta">Zobacz naszą ofertę</a>
<a href="/blog" aria-label="Przejdź do bloga">
  <i class="icon-arrow"></i>
</a>

Formularze (WCAG 3.3.2)

Sprawdzane elementy:

Sprawdzenie	Opis	Impact
Brak label	Input bez powiązanej etykiety	Critical
Brak id	Input bez id (nie można powiązać label)	Serious
Placeholder jako label	Tylko placeholder, brak label	Moderate

Prawidłowe formularze:

<!-- Metoda 1: label z for -->
<label for="email">Email</label>
<input type="email" id="email" name="email">

<!-- Metoda 2: label opakowujący -->
<label>
  Email
  <input type="email" name="email">
</label>

<!-- Metoda 3: aria-label -->
<input type="search" aria-label="Szukaj na stronie">

Język strony (WCAG 3.1.1)

Sprawdzane elementy:

Sprawdzenie	Opis	Impact
Brak atrybutu lang	<html> bez lang	Serious
Nieprawidłowy kod	lang=“polski” zamiast “pl”	Serious

Prawidłowa deklaracja:

<!DOCTYPE html>
<html lang="pl">
<!-- dla stron wielojęzycznych -->
<p lang="en">This paragraph is in English.</p>

ARIA (WCAG 4.1.2)

Sprawdzane elementy:

Sprawdzenie	Opis	Impact
Nieprawidłowa rola	role=“none” na interaktywnym elemencie	Serious
Brak aria-label	Element z rolą bez nazwy	Moderate
aria-hidden na focusable	Ukryty element dostępny klawiaturą	Critical

Klawiatura (WCAG 2.1.1)

Sprawdzane elementy:

Sprawdzenie	Opis	Impact
Ujemny tabindex	tabindex < 0 na interaktywnym elemencie	Serious
Wysoki tabindex	tabindex > 0 (zakłóca naturalny flow)	Moderate
onclick na div	Klikalne elementy bez obsługi klawiatury	Serious

Kontrast kolorów (WCAG 1.4.3)

Sprawdzane elementy:

Sprawdzenie	Opis	Impact
Niski kontrast tekstu	Stosunek < 4.5:1 dla małego tekstu	Serious
Niski kontrast dużego tekstu	Stosunek < 3:1 dla tekstu ≥18px	Moderate

Wymagane współczynniki:

• Mały tekst (< 18px): 4.5:1
• Duży tekst (≥ 18px bold lub ≥ 24px): 3:1

Powiększanie tekstu (WCAG 1.4.4)

Sprawdzane elementy:

Sprawdzenie	Opis	Impact
font-size w px	Tekst w jednostkach bezwzględnych	Moderate
!important na font-size	Blokuje powiększanie przez użytkownika	Moderate

Prawidłowe jednostki:

/* ❌ Źle */
body { font-size: 16px; }
h1 { font-size: 32px !important; }

/* ✅ Dobrze */
body { font-size: 1rem; }
h1 { font-size: 2rem; }

Wyniki audytu

Score dostępności

Rozszerzenie oblicza wynik dostępności (0-100) na podstawie:

• Critical - 25 punktów za błąd
• Serious - 15 punktów
• Moderate - 5 punktów
• Minor - 1 punkt

Filtrowanie wyników

Możesz filtrować błędy według:

• Kategorii - obrazy, linki, formularze
• Impact - critical, serious, moderate, minor
• WCAG criterion - 1.1.1, 2.4.4, etc.

Eksport raportu

Wyniki audytu są uwzględniane w eksporcie PDF:

• Sekcja Accessibility w raporcie
• Lista błędów z opisami
• Referencje do WCAG
• Rekomendacje naprawy

Co audyt automatyczny NIE sprawdzi?

Automatyczne narzędzia wykrywają ok. 30-40% problemów dostępności. Ręcznie trzeba sprawdzić:

• Sensowność alt textów - czy opisują treść obrazu?
• Logikę nawigacji - czy fokus jest intuicyjny?
• Treść audio/video - czy są napisy/transkrypcje?
• Zrozumiałość - czy język jest prosty?
• Spójność - czy nawigacja jest konsekwentna?

Podsumowanie

Audyt dostępności w UPER SEO Auditor to szybki sposób na:

• Wykrycie typowych błędów WCAG 2.2 Level A/AA
• Kategoryzację problemów według impact
• Zrozumienie kontekstu - co i gdzie poprawić
• Eksport wyników do raportu PDF

To dobry punkt wyjścia przed szczegółowym audytem eksperckim. Dostępność to istotny element szerszej strategii technicznego SEO - więcej o wpływie WCAG i innych technologii na pozycjonowanie przeczytasz w przewodniku po technologiach web i SEO 2026.

Wypróbuj UPER SEO Auditor i sprawdź dostępność swojej strony.

Źródła

1. WCAG 2.2 - W3C https://www.w3.org/TR/WCAG22/

2. Understanding WCAG 2.2 https://www.w3.org/WAI/WCAG22/Understanding/

3. European Accessibility Act https://ec.europa.eu/social/main.jsp?catId=1202

4. Web Accessibility Initiative (WAI) https://www.w3.org/WAI/