Dostępność strony (WCAG) — dlaczego się opłaca

Kiedy myślimy o stronie internetowej, zwykle wyobrażamy sobie osobę, która widzi ekran, trzyma mysz i bez trudu klika. Rzeczywistość jest bogatsza. Część odwiedzających korzysta z czytników ekranu, inni poruszają się wyłącznie klawiaturą, jeszcze inni mają słabszy wzrok albo oglądają stronę w pełnym słońcu na telefonie. Dostępność to projektowanie tak, żeby każda z tych osób mogła skorzystać z witryny bez frustracji.

W Eurolingo traktujemy dostępność nie jako dodatek dla wąskiej grupy, lecz jako element dobrego rzemiosła, który przy okazji poprawia wyniki dla wszystkich. W tym artykule wyjaśniamy, czym jest WCAG, jakie są podstawy i dlaczego dbanie o dostępność zwyczajnie się opłaca.

Czym jest dostępność i WCAG

Dostępność strony (po angielsku accessibility, w skrócie a11y) to jej zdolność do bycia użyteczną dla osób z różnymi ograniczeniami: wzroku, słuchu, ruchu czy percepcji. WCAG, czyli Web Content Accessibility Guidelines, to międzynarodowy zbiór wytycznych opisujących, jak tworzyć treści dostępne. To dziś powszechnie przyjęty punkt odniesienia dla dostępności w sieci.

WCAG opiera się na czterech zasadach: treść ma być postrzegalna, funkcjonalna, zrozumiała i solidna technicznie. Wytyczne mają też poziomy zgodności oznaczane A, AA i AAA. W praktyce większość projektów celuje w poziom AA, który stanowi rozsądny i szeroko uznawany standard.

Podstawy, od których warto zacząć

Dostępność brzmi poważnie, ale wiele da się zrobić prostymi krokami. Oto obszary, które przynoszą największy efekt przy stosunkowo małym nakładzie.

Kontrast kolorów

Jasnoszary tekst na białym tle wygląda elegancko na makiecie, lecz staje się nieczytelny dla osób ze słabszym wzrokiem i na tanich ekranach. WCAG określa minimalne proporcje kontrastu między tekstem a tłem. Warto sprawdzać je narzędziem do pomiaru kontrastu jeszcze na etapie projektu, zanim kolory trafią do kodu.

Opisy alternatywne obrazów

Atrybut alt to tekst opisujący obraz, odczytywany przez czytniki ekranu i wyświetlany, gdy grafika się nie załaduje. Opis powinien mówić, co jest na zdjęciu i po co ono tam jest. Zdjęcia czysto dekoracyjne można oznaczyć pustym alt, żeby czytnik je pominął i nie zaśmiecał odczytu.

Nawigacja klawiaturą

Nie każdy używa myszy. Cała strona powinna dać się obsłużyć klawiszem Tab i Enter: przejść przez menu, wypełnić formularz, otworzyć i zamknąć okno. Kluczowy jest przy tym widoczny wskaźnik fokusu, czyli obramowanie pokazujące, na którym elemencie się właśnie znajdujemy. Usuwanie tego obramowania dla urody to jeden z częstszych błędów.

Struktura nagłówków

Nagłówki H1, H2 i H3 to nie kwestia wielkości czcionki, lecz mapa treści. Powinny tworzyć logiczną hierarchię: jeden H1 na stronę, pod nim H2 dla sekcji, a niżej H3. Osoby korzystające z czytnika przeskakują między nagłówkami, żeby szybko znaleźć to, czego szukają, dokładnie tak jak my przebiegamy wzrokiem po tytułach.

Dostępne formularze

Każde pole formularza potrzebuje etykiety powiązanej z nim technicznie, a nie tylko wizualnie umieszczonego obok tekstu. Dzięki temu czytnik ekranu wie, co należy wpisać. Komunikaty o błędach powinny być przekazywane także tekstem, a nie jedynie zmianą koloru pola na czerwony, bo samego koloru nie odczyta osoba niewidoma ani nie odróżni część osób z daltonizmem.

Dlaczego dostępność się opłaca

Dostępność bywa traktowana jak koszt, tymczasem to inwestycja z kilkoma zwrotami naraz.

• Większa grupa odbiorców: osoby z niepełnosprawnościami to znacząca część społeczeństwa, a dostępna strona nie odsyła ich do konkurencji
• Lepsze SEO: uporządkowane nagłówki, opisy alt i czytelna struktura to sygnały, które pomagają też wyszukiwarkom
• Wygoda dla wszystkich: dobry kontrast i obsługa klawiaturą pomagają również osobom bez niepełnosprawności, na przykład w słońcu albo przy zmęczonych oczach
• Wymogi prawne: podmioty publiczne w Polsce mają obowiązek zapewnienia dostępności cyfrowej, a regulacje w tym obszarze stopniowo się poszerzają
• Wizerunek: firma, która myśli o wszystkich użytkownikach, buduje wrażenie rzetelności i dojrzałości

Dostępność najczęściej nie oznacza budowania osobnej wersji strony. Oznacza zbudowanie jednej, zrobionej porządnie od początku.

Od czego zacząć

Nie trzeba od razu porywać się na pełny audyt zgodności. Dobrym pierwszym krokiem jest sprawdzenie kilku rzeczy na własnej stronie: czy da się ją przejść samą klawiaturą, czy obrazy mają sensowne opisy alt, czy kontrast tekstu jest wystarczający i czy nagłówki układają się w logiczną hierarchię.

Pomagają w tym darmowe narzędzia i wbudowane audyty w przeglądarce, które wychwytują najczęstsze problemy. Warto też przetestować stronę z włączonym czytnikiem ekranu, żeby usłyszeć, jak brzmi w praktyce. To często otwiera oczy bardziej niż długa lista wytycznych.

Podsumowanie

Dostępność to nie osobny projekt dla wybranych, tylko sposób myślenia o stronie, który sprawia, że jest ona lepsza dla każdego. Kontrast, opisy alt, obsługa klawiaturą, porządne nagłówki i uczciwe formularze to fundament, który zwiększa zasięg, wspiera SEO i chroni przed problemami prawnymi.

Jeśli chcesz się dowiedzieć, jak Twoja strona radzi sobie z dostępnością, chętnie ją przejrzymy i wskażemy najważniejsze poprawki. W Eurolingo projektujemy witryny, z których wygodnie korzysta się niezależnie od tego, jak kto patrzy na ekran. Napisz do nas i porozmawiajmy o tym, co da się poprawić.