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

Wyobraź sobie, że budujesz świątynię w Starożytnym Egipcie. Czy chciałbyś, żeby mogła ja odwiedzic 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ć mozliwy do obsługi przez różne metody nawigacji.

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

3. Understandable (Zrozumialosc)

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

1<!-- Okreslenie jezyka 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 (Solidnosc)

Treści muszą być kompatybilne z roznymi technologiami wspomagajacymi.

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 zgodnosci WCAG

WCAG definiuje trzy poziomy zgodnosci:

Poziom A - Minimalne wymagania (np. tekst alternatywny dla obrazów)
Poziom AA - Zalecany standard (np. kontrast kolorow 4.5:1)
Poziom AAA - Najwyzszy standard (np. kontrast 7:1)

Wiekszosc przepisow prawnych wymaga poziomu AA.

Pierwsze kroki w dostępności

Najwazniejsze zasady na początek:

Używaj semantycznego HTML -
```
<nav>
```
,
```
<main>
```
,
```
<article>
```
zamiast samych
```
<div>
```
Dodawaj tekst alternatywny - atrybut
```
alt
```
dla obrazów
Zapewniaj kontrast kolorow - tekst musi być czytelny
Dbaj o nawigacje klawiaturowa - wszystko musi być dostępne z klawiatury
Używaj etykiet w formularzach -
```
<label>
```
powiazany z
```
<input>
```

Tak jak starorzytni Egipcjanie projektowali świątynię dostępne dla wszystkich pielgrzymow, tak my powinniSmy tworzyć strony dostępne dla wszystkich użytkowników internetu.

Przejdź do CodeWorlds→