Accessibility (WCAG) – podstawy

O czym jest to opracowanie?

Dostępność (accessibility, a11y) to projektowanie stron i aplikacji tak, aby mogły z nich korzystać wszystkie osoby, w tym osoby z niepełnosprawnościami – niewidome, niedowidzące, niesłyszące, z ograniczeniami motorycznymi czy poznawczymi. WCAG (Web Content Accessibility Guidelines) to międzynarodowy standard definiujący zasady dostępności. W Polsce i UE dostępność stron publicznych jest wymagana prawnie.

Dlaczego warto to znać?

Wymogi prawne – unijna dyrektywa EAA wymaga dostępności stron publicznych i komercyjnych
Większa grupa odbiorców – ok. 15% populacji ma jakąś formę niepełnosprawności
Lepsze SEO – wiele praktyk a11y pokrywa się z dobrymi praktykami SEO
Lepsze UX dla wszystkich – dostępna strona jest wygodniejsza dla każdego
Egzaminy zawodowe – temat pojawia się na egzaminach INF.03/INF.04

Cel Twojego opracowania

Zrozumieć czym jest dostępność i dlaczego jest ważna
Poznać standard WCAG i jego cztery zasady (POUR)
Opanować podstawowe techniki: alt, kontrast, fokus, ARIA
Umieć wyjaśnić jak osoby z niepełnosprawnościami korzystają z sieci
Przeanalizować przykład niedostępnej i dostępnej strony

Zakres obowiązkowy

Elementy merytoryczne

Czym jest dostępność
- Definicja a11y (accessibility)
- Typy niepełnosprawności: wzrokowe, słuchowe, motoryczne, poznawcze
- Technologie asystujące: czytniki ekranu, lupy, sterowanie głosem
Standard WCAG
- Poziomy zgodności: A, AA, AAA
- Cztery zasady POUR:
  - Perceivable (Postrzegalność) – treść dostępna zmysłowo
  - Operable (Funkcjonalność) – interfejs można obsługiwać
  - Understandable (Zrozumiałość) – treść i obsługa są zrozumiałe
  - Robust (Solidność) – kompatybilność z technologiami asystującymi
Podstawowe techniki
- Atrybut alt w obrazach
- Kontrast kolorów (minimum 4.5:1)
- Nawigacja klawiaturą (focus, tab order)
- Semantyczny HTML (nagłówki, listy, formularze)
ARIA (Accessible Rich Internet Applications)
- aria-label – etykieta dla elementów bez tekstu
- aria-hidden – ukrywanie przed czytnikami
- aria-describedby – powiązanie opisu z elementem
- Role ARIA – kiedy i jak używać

Wymagane przykłady kodu

Przykład 1

Niedostępny HTML – typowe błędy dostępności

Przykład 2

Dostępny HTML – poprawiona wersja z ARIA

Przykład 3

Formularze dostępne – label, fieldset, aria-describedby

Przykład 4

Nawigacja klawiaturą – focus, skip links

<!-- ❌ NIEDOSTĘPNY HTML - typowe błędy -->
<!DOCTYPE html>
<html> <!-- Brak atrybutu lang -->
<head>
    <title>Strona</title>
</head>
<body>
    <!-- ❌ Brak struktury nagłówków -->
    <div class="logo">
        <!-- ❌ Obrazek bez alt -->
        <img src="logo.png">
    </div>

    <!-- ❌ Menu bez semantyki, klikalne divy -->
    <div class="menu">
        <div onclick="goTo('/')">Start</div>
        <div onclick="goTo('/produkty')">Produkty</div>
    </div>

    <!-- ❌ Brak nagłówka H1 -->
    <div class="title" style="font-size: 24px; font-weight: bold;">
        Witamy na stronie
    </div>

    <!-- ❌ Niewystarczający kontrast -->
    <p style="color: #999; background: #fff;">
        Ten tekst ma za mały kontrast.
    </p>

    <!-- ❌ Formularz bez label -->
    <form>
        <input type="text" placeholder="Twoje imię">
        <input type="email" placeholder="Email">
        <!-- ❌ Przycisk bez opisu -->
        <button><img src="send.png"></button>
    </form>

    <!-- ❌ Linki bez sensu poza kontekstem -->
    <a href="/artykuł-1">Czytaj więcej</a>
    <a href="/artykuł-2">Czytaj więcej</a>
    <a href="/artykuł-3">Kliknij tutaj</a>

    <!-- ❌ Automatyczne odtwarzanie video -->
    <video autoplay>
        <source src="video.mp4">
    </video>
</body>
</html>

<!-- ✅ DOSTĘPNY HTML - poprawiona wersja -->
<!DOCTYPE html>
<html lang="pl"> <!-- ✅ Język dokumentu -->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Nazwa firmy - Strona główna</title>
</head>
<body>
    <!-- ✅ Skip link do głównej treści -->
    <a href="#main-content" class="skip-link">
        Przejdź do głównej treści
    </a>

    <header>
        <!-- ✅ Obrazek z opisem alt -->
        <img src="logo.png" alt="Logo Nazwa Firmy">

        <!-- ✅ Semantyczna nawigacja z ARIA -->
        <nav aria-label="Menu główne">
            <ul>
                <li><a href="/">Strona główna</a></li>
                <li><a href="/produkty">Produkty</a></li>
                <li><a href="/kontakt">Kontakt</a></li>
            </ul>
        </nav>
    </header>

    <main id="main-content">
        <!-- ✅ Poprawna hierarchia nagłówków -->
        <h1>Witamy na stronie Nazwa Firmy</h1>

        <!-- ✅ Wystarczający kontrast (min. 4.5:1) -->
        <p style="color: #333; background: #fff;">
            Ten tekst ma odpowiedni kontrast.
        </p>

        <section aria-labelledby="articles-heading">
            <h2 id="articles-heading">Nasze artykuły</h2>

            <article>
                <h3>Tytuł artykułu 1</h3>
                <p>Opis artykułu...</p>
                <!-- ✅ Opisowy tekst linka -->
                <a href="/artykuł-1">
                    Przeczytaj artykuł "Tytuł artykułu 1"
                </a>
            </article>
        </section>

        <!-- ✅ Video z napisami, bez autoplay -->
        <video controls>
            <source src="video.mp4" type="video/mp4">
            <track kind="captions" src="napisy.vtt" srclang="pl" label="Polski">
            Twoja przeglądarka nie obsługuje video.
        </video>
    </main>

    <footer>
        <p>&copy; 2024 Nazwa Firmy</p>
    </footer>
</body>
</html>

<style>
/* Skip link - widoczny tylko po focus */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #000;
    color: #fff;
    padding: 8px;
    z-index: 100;
}

.skip-link:focus {
    top: 0;
}

/* Widoczny fokus dla nawigacji klawiaturą */
a:focus,
button:focus,
input:focus {
    outline: 3px solid #007bff;
    outline-offset: 2px;
}
</style>

<!-- Dostępny formularz -->
<form>
    <!-- ✅ Fieldset grupuje powiązane pola -->
    <fieldset>
        <legend>Dane osobowe</legend>

        <!-- ✅ Label powiązany z input przez for/id -->
        <div class="form-group">
            <label for="name">
                Imię i nazwisko
                <span aria-hidden="true">*</span>
                <span class="sr-only">(pole wymagane)</span>
            </label>
            <input
                type="text"
                id="name"
                name="name"
                required
                autocomplete="name"
            >
        </div>

        <div class="form-group">
            <label for="email">
                Adres email
                <span aria-hidden="true">*</span>
            </label>
            <input
                type="email"
                id="email"
                name="email"
                required
                autocomplete="email"
                aria-describedby="email-help"
            >
            <!-- ✅ Opis powiązany przez aria-describedby -->
            <p id="email-help" class="help-text">
                Na ten adres wyślemy potwierdzenie
            </p>
        </div>
    </fieldset>

    <fieldset>
        <legend>Preferencje kontaktu</legend>

        <!-- ✅ Grupa radio z aria-describedby -->
        <div role="radiogroup" aria-describedby="contact-help">
            <div>
                <input type="radio" id="contact-email" name="contact" value="email">
                <label for="contact-email">Email</label>
            </div>
            <div>
                <input type="radio" id="contact-phone" name="contact" value="phone">
                <label for="contact-phone">Telefon</label>
            </div>
        </div>
        <p id="contact-help" class="help-text">
            Wybierz preferowany sposób kontaktu
        </p>
    </fieldset>

    <!-- ✅ Komunikat błędu powiązany z polem -->
    <div class="form-group error">
        <label for="password">Hasło</label>
        <input
            type="password"
            id="password"
            name="password"
            required
            aria-invalid="true"
            aria-describedby="password-error"
        >
        <p id="password-error" class="error-message" role="alert">
            Hasło musi mieć minimum 8 znaków
        </p>
    </div>

    <!-- ✅ Przycisk z jasnym opisem -->
    <button type="submit">
        Wyślij formularz
    </button>
</form>

<style>
/* Tekst tylko dla czytników ekranu */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
</style>

/* Kontrast kolorów - WCAG wymaga minimum 4.5:1 dla tekstu */

/* ❌ ZŁY KONTRAST */
.low-contrast {
    color: #999;           /* Jasny szary */
    background: #fff;      /* Białe tło */
    /* Kontrast: 2.85:1 - NIEZGODNE z WCAG */
}

/* ✅ DOBRY KONTRAST */
.high-contrast {
    color: #333;           /* Ciemny szary */
    background: #fff;      /* Białe tło */
    /* Kontrast: 12.63:1 - ZGODNE z WCAG */
}

/* Dla dużego tekstu (18px+) wymagany kontrast to 3:1 */
.large-text {
    font-size: 24px;
    color: #767676;        /* Kontrast: 4.54:1 - OK dla dużego tekstu */
}


/* FOKUS - widoczny dla nawigacji klawiaturą */

/* ❌ NIGDY nie usuwaj outline bez alternatywy! */
a:focus {
    outline: none; /* ZŁE! Użytkownicy klawiatury nie widzą gdzie są */
}

/* ✅ Wyraźny, widoczny fokus */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
    outline: 3px solid #007bff;
    outline-offset: 2px;
}

/* ✅ Alternatywa: stylowany fokus */
.custom-focus:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.5);
    border-color: #007bff;
}

/* Focus-visible - fokus tylko dla klawiatury (nie myszy) */
button:focus-visible {
    outline: 3px solid #007bff;
}


/* SKIP LINK - skok do głównej treści */
.skip-link {
    position: absolute;
    top: -100%;
    left: 0;
    background: #000;
    color: #fff;
    padding: 1rem;
    z-index: 9999;
    transition: top 0.3s;
}

.skip-link:focus {
    top: 0;
}


/* UKRYCIE wizualne, ale dostępne dla czytników */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

Zakres rozszerzony (dla wyższych ocen)

Testowanie dostępności – narzędzia (axe, WAVE, Lighthouse)
Poziomy WCAG – różnice między A, AA, AAA
Nawigacja z czytnikiem ekranu – demonstracja działania
Responsive a11y – dostępność na urządzeniach mobilnych
JavaScript a a11y – dynamiczne treści, focus management
Regulacje prawne – dyrektywa EAA, ADA, Section 508

Proponowana struktura pracy

Struktura podstawowa

Wstęp (0.5 strony) – znaczenie dostępności, statystyki
Typy niepełnosprawności (1 strona) – wzrokowe, słuchowe, motoryczne
Standard WCAG (1 strona) – POUR, poziomy A/AA/AAA
Podstawowe techniki (1.5 strony) – alt, kontrast, fokus, semantyka
ARIA (1 strona) – aria-label, role, kiedy używać
Analiza przykładu (1 strona) – niedostępna vs dostępna strona
Podsumowanie (0.5 strony) – checklista dostępności
Bibliografia

Pytania kontrolne

Czym jest WCAG i jakie ma poziomy zgodności?
Co oznacza skrót POUR w kontekście dostępności?
Jaki minimalny kontrast wymaga WCAG dla tekstu?
Dlaczego nie można usunąć outline:none bez alternatywy?
Kiedy używać aria-label, a kiedy alt?
Jak działają czytniki ekranu?
Co to jest skip link i dlaczego jest ważny?
Dlaczego semantyczny HTML jest podstawą dostępności?

Najczęstsze błędy

Błąd	Jak poprawić?
Brak przykładu kodu	Pokaż niedostępny i dostępny HTML
Tylko wymienienie zasad	Wyjaśnij każdą zasadę POUR
Ignorowanie ARIA	Omów podstawowe atrybuty aria
Brak omówienia fokusu	Focus jest kluczowy dla klawiatury
Brak testów	Wspomnij o narzędziach (axe, WAVE)
Pomijanie semantyki	HTML semantyczny to fundament a11y

Zasoby

WCAG 2.1 Guidelines Oficjalne wytyczne WCAG 2.1

WebAIM Zasoby i narzędzia dostępności

MDN: Accessibility Przewodnik dostępności na MDN

axe DevTools Narzędzie do testowania dostępności

Do dzieła!

To więcej niż praca zaliczeniowa

Dostępność to obowiązek etyczny i prawny. Tworząc dostępne strony, dbasz o wszystkich użytkowników. To umiejętność, która będzie coraz bardziej ceniona w branży.

Wykorzystaj lekcje – konsultuj wątpliwości, pokazuj postępy! Pracuj iteracyjnie – outline -> draft -> kod -> redakcja