Dostępnik o niespełnionej obietnicy

Tworząc stronę internetową, aplikację webową lub mobilną, składasz użytkownikom obietnicę. A to nieładnie nie dotrzymywać obietnicy. Dzisiaj chcę Ci przypomnieć, co oznacza rola komponentu interfejsu.

Niedawno pracowałem nad panelem transakcyjnym pewnego banku. Nieważne którego, bo problem dotyczy bardzo wielu miejsc w internecie. Natknąłem się na formularz, w którym czytnik ekranu oznajmiał mi: „Radio button, unchecked”. Świetnie — wiedziałem, co to jest i jak tego użyć. Wcisnąłem strzałkę w dół, żeby przejść do następnej opcji. Nic. Strzałkę w prawo. Nic. Tab? Przeniosło mnie zupełnie gdzie indziej. Coś tu nie grało.

Komponent mówił jedno, a robił co chciał.

To dobra okazja, żeby porozmawiać o tym, czym tak naprawdę jest rola komponentu w kryterium sukcesu 4.1.2.

Kryterium 4.1.2 — nie tylko o etykietach

Kryterium 4.1.2 to „Nazwa, rola, wartość” i jest w zasadzie fundamentem dostępności interfejsów. Mówi o tym, że dla każdego komponentu interfejsu:

· nazwa — może być określona programowo (technologie asystujące wiedzą, jak go etykietować),

· rola — może być określona programowo (technologie asystujące wiedzą, czym ten komponent jest),

· wartość i stan — mogą być programowo odczytywane i ustawiane (technologie asystujące wiedzą, co się aktualnie dzieje).

Dużo uwagi poświęcamy etykietom — bo brakująca etykieta to klasyczny błąd i łatwy do wykrycia. Ale rola to coś więcej niż tylko etykietka na pudełku.

Rola to obietnica

Kiedy komponent ogłasza swoją rolę, składa użytkownikowi obietnicę. Mówi: „Jestem przyciskiem radio — wiesz, jak ze mną działać”. I użytkownik faktycznie wie. Bo przycisk radio to nie tylko słowo — to cały wzorzec zachowania (ang. pattern).

W3C w ramach projektu ARIA Authoring Practices Guide (APG) zebrało wzorce dla ponad 30 rodzajów komponentów. Każdy wzorzec opisuje:

· jakie klawisze powinny działać,

· jak komponent reaguje na fokus,

· jakie stany są wymagane i jak je komunikować,

· czego użytkownik może się spodziewać.

To nie są luźne sugestie. To kontrakt między deweloperem a użytkownikiem — zawarty przez samą rolę komponentu.

Stany i nazwy można przekazać na różne sposoby — niekiedy wystarczy natywny HTML. Atrybut checked na elemencie <input type=”radio”> wystarczy, żeby przeglądarka sama zakomunikowała stan zaznaczenia. Atrybut required zamiast jego odpowiednika ARIA. Kiedy jednak budujesz własny komponent od zera, musisz te informacje zapewnić ręcznie — i tu zaczyna się ryzyko.

Wzorzec Radio Group — co naprawdę znaczy „radio”

Przyjrzyjmy się, co konkretnie obiecuje rola radio. Wzorzec Radio Group w APG jest precyzyjny.

Struktura i etykietowanie:

Grupa radiowa składa się z kontenera (o roli grupy) i poszczególnych opcji. Każda opcja ma stan zaznaczenia — zaznaczona lub nie, przy czym zaznaczona może być co najwyżej jedna.

Ważny szczegół, który często bywa pomijany: cała grupa potrzebuje etykiety. W natywnym HTML robi to <legend> wewnątrz <fieldset>. To właśnie legenda mówi użytkownikowi, o co w ogóle pyta ta grupa przycisków — na przykład „Wybierz metodę płatności”. Bez niej technologie asystujące ogłoszą każdą opcję w oderwaniu od kontekstu.

Zachowanie klawiszowe:

· Tab wchodzi do grupy i wychodzi z niej — ale tylko raz. Fokus trafia na zaznaczoną opcję (lub pierwszą, jeśli żadna nie jest zaznaczona).

· Strzałki (prawo/dół, lewo/góra) poruszają się między opcjami i jednocześnie je zaznaczają. To kluczowe — nie ma tu klawisza Spacji do zaznaczania. Strzałka przesuwa i zaznacza.

· W efekcie w grupie radiowej zawsze jest tylko jeden punkt Tab stopu. Żeby wejść do grupy, używasz Tab. Żeby wybrać opcję, używasz strzałek. Żeby wyjść — znowu Tab.

To wzorzec znany użytkownikom czytników ekranu. Kiedy słyszą „radio button”, wiedzą, że muszą użyć strzałek. Kiedy to nie działa — czują się jak w pułapce.

Wzorzec Accordion — rozwinąć i zwinąć

Innym dobrym przykładem jest akordeon — komponent, w którym nagłówki rozwijają i zwijają sekcje treści.

Tutaj kluczowym elementem wzorca jest stan rozwinięcia. Technologie asystujące muszą wiedzieć, czy panel jest otwarty czy zamknięty. W natywnym HTML istnieje do tego element <details> z towarzyszącym <summary> — przeglądarka sama obsługuje stan rozwinięcia i komunikuje go technologiom asystującym. Jeśli jednak budujesz własny akordeon (co jest częste, bo <details> ma ograniczone możliwości stylizacji), stan rozwinięcia trzeba zapewnić ręcznie. Specyfikację zachowania opisuje wzorzec Accordion w APG.

Zachowanie klawiszowe:

· Nagłówek akordeonu zachowuje się jak przycisk — Enter lub Spacja rozwija lub zwija panel.

· Tab przechodzi między nagłówkami (i innymi interaktywnymi elementami na stronie).

· Opcjonalnie strzałki góra/dół mogą poruszać się między nagłówkami, a Home/End skakać do pierwszego i ostatniego.

Pułapka w implementacjach akordeonu bywa inna niż w radio. Często stan rozwinięcia jest zmieniany wizualnie (rotacja strzałki, zmiana tła), ale technologie asystujące tego nie widzą. Użytkownik nie wie, czy panel jest rozwinięty, bo komponent nie zakomunikował zmiany stanu.

Wzorzec Combobox — lista w zasięgu klawiatury

Combobox to pole, które ma towarzyszącą listę opcji. Pojawia się między innymi jako pole wyszukiwania z podpowiedziami albo select z możliwością filtrowania. Wzorzec Combobox w APG jest jednym z bardziej rozbudowanych.

Ten wzorzec jest jednym z trudniejszych do poprawnego zaimplementowania, bo wymaga zarządzania dwoma obszarami jednocześnie — polem edycyjnym i listą.

Zachowanie klawiszowe:

· Strzałka w dół otwiera listę i przenosi fokus na pierwszy element.

· Strzałka w górę opcjonalnie przeskakuje na ostatni element listy.

· Enter wybiera opcję i zamyka listę.

· Escape zamyka listę bez zmian i wraca do pola.

· Znaki drukowane w liście filtrują lub przewijają do opcji zaczynającej się daną literą.

Stan listy — otwarta lub zamknięta — musi być programowo zakomunikowany. Technologia asystująca musi wiedzieć, kiedy lista się pojawiła, bo inaczej użytkownik nie wie, że ma z czego wybierać.

Wiele implementacji łamie ten wzorzec w detalach: lista otwiera się wizualnie, ale fokus pozostaje w polu, a klawisz Escape nic nie robi. Albo Enter zatwierdza formularz zamiast wybierać opcję.

Co się dzieje, gdy wzorzec jest zignorowany

Wróćmy do mojego formularza z początku. Deweloper użył roli radio — może ją tam wrzucił, żeby technologia asystująca powiedziała właściwą nazwę. Ale nie zaimplementował wzorca. Brak obsługi strzałek. Brak zarządzania stanem. Brak jednego Tab stopu na grupę.

Efekt: komponent kłamie. Ogłasza się jako radio, ale zachowuje się jak coś zupełnie innego. Użytkownik próbuje strzałek — nic. Próbuje Space — nic. Zaczyna wciskać Tab po każdej opcji — bo może tak to działa? Może trafi na właściwą kombinację?

To nie jest problem z technologią asystującą. To problem z implementacją, która złamała obietnicę roli.

Wzorce APG — gdzie ich szukać

Jeśli budujesz coś niestandardowego albo sprawdzasz, czy komponent jest poprawnie zaimplementowany — APG Patterns to pierwsze miejsce, do którego warto zajrzeć. Każdy wzorzec ma szczegółowy opis, działający przykład w przeglądarce i specyfikację klawiatury.

To nie jest literatura do przeczytania raz — to dokumentacja referencyjna, do której wracasz przy każdej niestandardowej kontrolce. Jeżeli zajmujesz się testowaniem stron lub aplikacji, znajdziesz tam podpowiedzi, jak komponent powinien się zachowywać w prawidłowy sposób.

Gotowe komponenty też wymagają konfiguracji

Można by myśleć, że problem jest prosty do ominięcia: wystarczy użyć gotowego komponentu z popularnej biblioteki. Radix UI, Headless UI, Material UI — lista jest długa, a każda z tych bibliotek obiecuje dostępność od razu, bez dodatkowej pracy.

I rzeczywiście — wiele z tych komponentów implementuje wzorce APG poprawnie. Ale „dostępny” w dokumentacji biblioteki nie znaczy „dostępny bez dodatkowej konfiguracji”.

Combobox z popularnej biblioteki będzie działał poprawnie — jeśli przekażesz mu właściwą etykietę. Akordeon obsłuży stan rozwinięcia — ale tylko jeśli nie zmienisz struktury DOM w sposób, który to zerwie. Komponent radio group może tracić grupowanie, gdy elementy są renderowane w osobnych kontenerach.

Wzorzec APG jest tu niezastąpionym punktem odniesienia. Nawet używając gotowej biblioteki, możesz wziąć specyfikację klawiatury i po prostu sprawdzić: czy Tab, strzałki, Enter i Escape działają tak jak powinny? Czy stan jest ogłaszany? To test, który zajmuje kilka minut i wychwytuje błędy konfiguracji, zanim trafią do użytkowników.

Kilka zdań podsumowania

Kryterium 4.1.2 wymaga, żeby rola była ogłaszana programowo. Ale to tylko połowa roboty. Druga połowa — ta, której kryterium nie mówi wprost, ale która wynika z samej natury ról — to zaimplementowanie zachowania, które ta rola ze sobą niesie.

Rola bez wzorca to puste słowo.

Wieści o dostępności

Wojtek Kutyła, jeden z najlepszych specjalistów od semantycznego HTML w Polsce, prowadzi kurs poświęcony właśnie temu tematowi. Trzy godziny materiału wideo, ćwiczenia, certyfikat. Polecam — szczególnie jeśli chcesz lepiej rozumieć, dlaczego natywne elementy HTML są pierwszym wyborem w budowaniu dostępnych interfejsów. Kurs semantycznego HTML — Wojtek Kutyła

Webinar GAAD: Building Accessible Whiteboards and Diagrams — 21 maja 2026, online, godz. 14:00 CET. Synergy Codes organizuje bezpłatny webinar z okazji Światowego Dnia Świadomości Dostępności. Temat: jak sprawić, żeby interaktywne tablice i narzędzia do diagramowania były dostępne. 45 minut, prelegenci z doświadczeniem w produktach. Szczegóły i rejestracja

Konferencja „Dostępność cyfrowa: od obowiązku do standardu jakości” — 21 maja 2026, Ministerstwo Cyfryzacji w Warszawie + online (Zoom). Organizator: PFRON. Stacjonarnie — brak miejsc, ale można dołączyć zdalnie. W programie: standardy dostępności, usługi dla seniorów, wyzwania regulacyjne dla firm po wdrożeniu Europejskiego Aktu o Dostępności. Rejestracja online

I to by było na tyle. Jest maj, więc można zawiesić na ścianie mapę świata w układzie Merkatora. Weź czerwone pinezki i śledź doniesienia prasowe, a potem wbijaj te pineski w miejscach, gdzie są pożary. Pierwszą możesz wbić w Puszczę Solską. Pamiętaj też, żeby kupić wystarczająco dużo, bo mogą Ci się szybko skończyć. Tak czy inaczej - AutomaticA11y 2026 już za 10 dni. Nie mogę się doczekać, żeby spotkać się z ludźmi zajaranymi dostępnością, jak ja. Spokojnego tygodnia i byle do przodu.