---
title: "Jak sprawdzić dostępność strony internetowej (WCAG)"
description: "Jak przeprowadzić audyt dostępności strony zgodnie z WCAG 2.2. Praktyczny przewodnik po automatycznym sprawdzaniu accessibility w przeglądarce."
date: 2026-01-13
category: UPER
tags: ["Accessibility", "WCAG", "A11y", "Audyt", "UPER SEO Auditor"]
url: https://uper.pl/blog/jak-sprawdzic-dostepnosc-strony-wcag/
---

# 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](https://chromewebstore.google.com/detail/uper-seo-auditor/khhpbeckpphaoiemjdijhbfpjnendage) 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

![Audyt dostępności w UPER SEO Auditor](../../assets/images/blog/uper-seo-auditor-a11y.png)

### 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ć:**

```html
<!-- ❌ Ź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:**

```html
<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ć:**

```html
<!-- ❌ Ź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:**

```html
<!-- 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:**

```html
<!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:**

```css
/* ❌ Ź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](/blog/technologie-web-seo-ranking-google/).

Wypróbuj [UPER SEO Auditor](https://chromewebstore.google.com/detail/uper-seo-auditor/khhpbeckpphaoiemjdijhbfpjnendage) i sprawdź dostępność swojej strony.

## Źródła

1. **WCAG 2.2 - W3C**
[https://www.w3.org/TR/WCAG22/](https://www.w3.org/TR/WCAG22/)

2. **Understanding WCAG 2.2**
[https://www.w3.org/WAI/WCAG22/Understanding/](https://www.w3.org/WAI/WCAG22/Understanding/)

3. **European Accessibility Act**
[https://ec.europa.eu/social/main.jsp?catId=1202](https://ec.europa.eu/social/main.jsp?catId=1202)

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