Eleuteria

Z czym startowaliśmy?

Zanim usiedliśmy do pisania kodu, dokładnie przetestowaliśmy stronę. Choć Stowarzyszenie robi fantastyczną robotę w świecie realnym, ich cyfrowa wizytówka stawiała przed użytkownikami spore bariery:

• Znikający punkt uwagi: Osoby, które nie mogą używać myszki i nawigują po stronie za pomocą klawiatury (klawisza Tab), dosłownie „błądziły po omacku”. Nie było widać, który link jest aktualnie zaznaczony.
• Tekst nie do rozczytania: Ważne informacje – jak godziny otwarcia poradni przy ul. Dzielnej 7 czy zasady rejestracji – miały zbyt słaby kontrast. Tekst po prostu niknął w tle.
• Niedostępne formularze: Ktoś, kto nie widzi i korzysta ze specjalnego programu czytającego ekran (syntezatora mowy), nie był w stanie wypełnić formularza kontaktowego, bo pola nie były odpowiednio podpisane w kodzie strony.

Co dokładnie zrobiliśmy?

Wdrożyliśmy nowoczesne wytyczne standardu WCAG 2.2. Nie robiliśmy zmian „na pół gwizdka” – skupiliśmy się na realnej wygodzie użytkownika.
1. Wyraźny „ślad” na stronie (Kryterium 2.4.11)
Teraz każdy, kto porusza się po stronie klawiaturą, widzi grubą, dwukolorową i bardzo wyraźną ramkę wokół elementu, na którym się znajduje. Niemożliwe jest zgubienie się podczas przeglądania oferty poradni.

2. Koniec z uciążliwym „przeciąganiem” (Kryterium 2.5.7)
Jeśli na stronie znajdowały się elementy wymagające precyzyjnego przesuwania myszką (np. mapy dojazdu czy galerie zdjęć), zmieniliśmy to. Teraz wystarczy zwykłe, pojedyncze kliknięcie strzałki „lewo/prawo”, co jest ogromnym ułatwieniem dla osób z drżeniem rąk.

3. Duże i wygodne przyciski na telefonach (Kryterium 2.5.8)
Znasz to irytujące uczucie, gdy na smartfonie chcesz kliknąć jeden link, a niechcący włączasz inny? Przebudowaliśmy całą wersję mobilną. Każda ikona społecznościowa, przycisk menu czy odnośnik ma teraz wielkość minimum $24 \times 24$ piksele. Bez problemu trafisz w nie nawet kciukiem w biegu.

4. Ułatwienia dla zmysłów (Nowy panel dostępności)
Dodaliśmy na stronie specjalny, dyskretny widget (panel sterowania), który pozwala użytkownikowi dostosować wygląd witryny pod swoje potrzeby:

• Powiększenie tekstu bez „rozjeżdżania się” układu strony.
• Tryb wysokiego kontrastu (np. jaskrawożółte litery na czarnym tle), idealny dla osób słabowidzących.
• Specjalna czcionka OpenDyslexic, która ułatwia czytanie osobom z dysleksją.

5. Przebudowa „pod maską” (Semantyka i ARIA)
Napisaliśmy kod strony całkowicie od nowa przy użyciu nowoczesnego języka HTML5. Uporządkowaliśmy nagłówki i działy strony. Dodatkowo, ukryte w kodzie znaczniki ARIA na bieżąco „podpowiadają” programom czytającym dla niewidomych, co dzieje się na ekranie (np. „menu zostało rozwinięte” lub „w formularzu brakuje numeru telefonu”).

Jak sprawdziliśmy, czy to naprawdę działa?

Nie wierzymy ślepo automatycznym programom testującym, bo widzą one tylko ułamek błędów. Stronę eleuteria.org.pl przetestowaliśmy potrójnie:

1. Automatycznie – za pomocą profesjonalnych narzędzi (m.in. Axe, Lighthouse).
2. Klawiaturą – nasz ekspert schował myszkę do szuflady i przeszedł całą drogę pacjenta (od wejścia na stronę, po znalezienie numeru rejestracji 882 070 235), używając tylko klawiszy.
3. Złotym standardem – odpaliliśmy programy czytające ekran (NVDA i JAWS), z których korzystają osoby niewidome, i upewniliśmy się, że głos lektora brzmi logicznie i prowadzi użytkownika bezbłędnie.

Efekt końcowy
Strona Stowarzyszenia Eleuteria zyskała cyfrową lekkość, nowoczesny wygląd i stała się w 100% dostępna. Co to oznacza w praktyce?

• Dla pacjentów: Szybki, bezstresowy dostęp do informacji o leczeniu i pomocy w kryzysie.
• Dla Stowarzyszenia: Spokój prawny (zgodność z ustawą o dostępności cyfrowej) oraz znacznie lepsza pozycja strony w wyszukiwarce Google (SEO), ponieważ roboty Google uwielbiają czysty, dobrze napisany kod!