Czym jest dostępność stron internetowych (a11y)?

Wyobraź sobie, że budujesz świątynię w Starożytnym Egipcie. Czy chciałbyś, żeby mogła ją odwiedzić tylko wybrana grupa ludzi, czy raczej wszyscy - od faraona po zwykłego rybaka? Dostępność stron internetowych (accessibility, w skrócie a11y) to idea, że każdy użytkownik - niezależnie od swoich możliwości - powinien mieć równy dostęp do treści w internecie.

Dlaczego dostępność jest ważna?

Około 15% populacji świata żyje z jakąś formą niepełnosprawności. To ponad miliard ludzi! Mogą to być osoby:

• Niewidome lub słabowidzące - korzystają z czytników ekranowych (screen readers)
• Niesłyszące - potrzebują napisów do multimediów
• Z ograniczoną sprawnością ruchową - nawigują klawiaturą, nie myszką
• Z trudnościami poznawczymi - potrzebują prostego, czytelnego designu
• Z tymczasowymi ograniczeniami - złamaną ręką, jasne słońce na ekranie

Dostępność to nie tylko etyczny obowiązek - to również wymóg prawny w wielu krajach (np. European Accessibility Act w UE).

WCAG 2.1 - Standardy dostępności

WCAG (Web Content Accessibility Guidelines) to międzynarodowy standard stworzony przez W3C. Opiera się na czterech filarach, które można zapamiętać akronimem POUR:

1. Perceivable (Postrzegalność)

Treści muszą być prezentowane w sposób dostępny dla zmysłów użytkownika.

1<!-- ŹLE - brak tekstu alternatywnego -->
2<img src="piramida.jpg">
3
4<!-- DOBRZE - opis dla czytników ekranowych -->
5<img src="piramida.jpg" alt="Wielka Piramida w Gizie o zachodzie słońca">

2. Operable (Funkcjonalność)

Interfejs musi być możliwy do obsługi przez różne metody nawigacji.

1<!-- Przycisk dostępny z klawiatury -->
2<button onclick="openMenu()">Otwórz menu</button>
3
4<!-- Link z widocznym focusem -->
5<a href="/kontakt" class="nav-link">Kontakt</a>

3. Understandable (Zrozumiałość)

Treści i interfejs muszą być zrozumiałe dla użytkowników.

1<!-- Określenie języka strony -->
2<html lang="pl">
3
4<!-- Czytelne etykiety formularzy -->
5<label for="email">Adres e-mail:</label>
6<input type="email" id="email" name="email">

4. Robust (Solidność)

Treści muszą być kompatybilne z różnymi technologiami wspomagającymi.

1<!-- Poprawna struktura HTML -->
2<!DOCTYPE html>
3<html lang="pl">
4<head>
5    <meta charset="UTF-8">
6    <title>Muzeum Egipskie</title>
7</head>
8<body>
9    <header>
10        <nav>...</nav>
11    </header>
12    <main>...</main>
13    <footer>...</footer>
14</body>
15</html>

Poziomy zgodności WCAG

WCAG definiuje trzy poziomy zgodności:

• Poziom A - Minimalne wymagania (np. tekst alternatywny dla obrazów)
• Poziom AA - Zalecany standard (np. kontrast kolorów 4.5:1)
• Poziom AAA - Najwyższy standard (np. kontrast 7:1)

Większość przepisów prawnych wymaga poziomu AA.

Pierwsze kroki w dostępności

Najważniejsze zasady na początek:

1. Używaj semantycznego HTML - <nav>, <main>, <article> zamiast samych <div>
2. Dodawaj tekst alternatywny - atrybut alt dla obrazów
3. Zapewniaj kontrast kolorów - tekst musi być czytelny
4. Dbaj o nawigację klawiaturową - wszystko musi być dostępne z klawiatury
5. Używaj etykiet w formularzach - <label> powiązany z <input>

Tak jak starożytni Egipcjanie projektowali świątynie dostępne dla wszystkich pielgrzymów, tak my powinniśmy tworzyć strony dostępne dla wszystkich użytkowników internetu.

1<!DOCTYPE html>
2<html lang="pl">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Wprowadzenie do dostepnosci</title>
7    <link rel="stylesheet" href="style.css">
8</head>
9<body>
10    <h1>Czym jest dostepnosc (a11y)?</h1>
11
12    <section>
13        <h2>Przyklad 1: Obraz BEZ tekstu alternatywnego</h2>
14        <img src="https://placehold.co/300x200/d4af37/1a1a2e?text=Piramida" >
15        <p class="bad">Brak atrybutu alt - czytnik ekranowy nie wie co jest na obrazku!</p>
16    </section>
17
18    <section>
19        <h2>Przyklad 2: Obraz Z tekstem alternatywnym</h2>
20        <img src="https://placehold.co/300x200/d4af37/1a1a2e?text=Piramida"
21             alt="Wielka Piramida w Gizie na tle zachodzacego slonca">
22        <p class="good">Atrybut alt opisuje zawartosc obrazu</p>
23    </section>
24
25    <section>
26        <h2>Przyklad 3: Formularz dostepny vs niedostepny</h2>
27
28        <div class="comparison">
29            <div>
30                <h3 class="bad">Niedostepny</h3>
31                <input type="text" placeholder="Wpisz imie">
32            </div>
33            <div>
34                <h3 class="good">Dostepny</h3>
35                <label for="name">Imie:</label>
36                <input type="text" id="name" name="name">
37            </div>
38        </div>
39    </section>
40
41    <section>
42        <h2>Przyklad 4: Semantyczny HTML</h2>
43        <header>
44            <nav aria-label="Przykladowa nawigacja">
45                <ul>
46                    <li><a href="#section1">Sekcja 1</a></li>
47                    <li><a href="#section2">Sekcja 2</a></li>
48                </ul>
49            </nav>
50        </header>
51        <main>
52            <p>Semantyczne znaczniki pomagaja czytnikom ekranowym.</p>
53        </main>
54    </section>
55</body>
56</html>