Kim są ci „wszyscy"?

Kiedy mówimy o dostępności cyfrowej, łatwo pomyśleć, że dotyczy ona wąskiej grupy osób. Ale liczby mówią co innego – w Polsce żyje około 4 milionów osób z orzeczoną niepełnosprawnością, a do tego dochodzą miliony osób starszych, które po prostu gorzej widzą, wolniej czytają albo nie radzą sobie z drobnym tekstem na ekranie telefonu.

W kontekście gabinetu medycznego te grupy są szczególnie istotne. Pacjenci gabinetów rehabilitacyjnych, fizjoterapeutycznych czy geriatrycznych to często osoby z ograniczoną sprawnością rąk, słabszym wzrokiem lub trudnościami poznawczymi. Ale osoby starsze stanowią znaczną część pacjentów w niemal każdej specjalizacji, od stomatologii po dietetykę.

A są jeszcze ograniczenia sytuacyjne: złamana ręka, słońce padające na ekran, trzymanie dziecka na jednej ręce. Dostępna strona jest po prostu wygodniejsza w użytkowaniu dla każdego.

Rezerwacja wizyty – tu najczęściej się pojawiają się problemy

Formularz rezerwacji to zwykle najważniejszy element strony gabinetu. I niestety, to właśnie formularze bywają najbardziej problematyczne pod kątem dostępności. Na co zwrócić uwagę:

Każde pole musi mieć czytelną etykietę

Nie chodzi o szary tekst-placeholder, który znika po kliknięciu. Etykieta powinna być widoczna cały czas, nad polem albo obok niego. Czytniki ekranu odczytują etykiety, żeby użytkownik wiedział, co wpisać. Bez nich osoba niewidoma „widzi" tylko puste pole.

Komunikaty błędów muszą być jasne i powiązane z polem

„Wypełnij wymagane pola" to za mało. Pacjent powinien widzieć dokładnie, które pole wymaga poprawki i co jest nie tak, np. „Podaj numer telefonu w formacie 9 cyfr".

Po lewej: formularz z samymi placeholderami i ogólnym komunikatem błędu. Po prawej: formularz z widocznymi etykietami, oznaczeniem pól wymaganych i precyzyjnym opisem błędu.

Formularz musi działać z klawiaturą

Nie każdy używa myszki. Osoba z ograniczoną sprawnością rąk może nawigować wyłącznie klawiszem Tab. Jeśli nie da się w ten sposób przejść przez formularz i go wysłać – jest problem.

Kalendarze i wybór terminu

Kalendarze do wyboru daty i godziny wizyty to jedne z najbardziej problematycznych elementów na stronach. Często są wygodne dla osób korzystających z myszki, ale kompletnie nieużyteczne dla osób nawigujących klawiaturą lub czytnikiem ekranu. Dobra praktyka: oprócz interaktywnego kalendarza warto dać możliwość wpisania daty ręcznie.

Informacje o usługach – struktura ma znaczenie

Strona gabinetu to przede wszystkim informacja: jakie zabiegi oferujesz, ile kosztują, jak się przygotować do wizyty. Żeby te treści były dostępne, muszą mieć logiczną strukturę.

Nagłówki tworzą hierarchię strony

Nazwa gabinetu czy tytuł podstrony to nagłówek pierwszego poziomu (H1). Sekcje takie jak „Nasze usługi", „Cennik", „Zespół" to nagłówki drugiego poziomu (H2). Poszczególne usługi wewnątrz sekcji to H3. Ta hierarchia pozwala osobie korzystającej z czytnika ekranu „przeskoczyć" do interesującej sekcji, zamiast słuchać całej strony od początku.

Schemat struktury nagłówków strony gabinetu fizjoterapii: H1 – nazwa gabinetu, H2 – sekcje (Usługi, Cennik, Zespół, Umów wizytę, Kontakt), H3 – poszczególne usługi (Terapia manualna, Masaż leczniczy, Rehabilitacja pourazowa). — Nagłówki tworzą „spis treści" strony. Osoba korzystająca z czytnika ekranu może dzięki nim nawigować po sekcjach – zamiast słuchać całej strony od początku.

Cennik powinien być tabelą, nie obrazkiem

Wrzucenie cennika jako grafiki (np. zdjęcie z Canvy) to częsty błąd. Czytnik ekranu nie odczyta tekstu z obrazka. Cennik w formie prawidłowo zbudowanej tabeli HTML jest dostępny, przeszukiwalny i (bonus) lepiej indeksowany przez Google.

Tekst musi być zrozumiały

Dostępność to nie tylko kod, to też język. Zamiast „krioterapia miejscowa z wykorzystaniem aparatu Zimmer Cryo 6" lepiej napisać „krioterapia miejscowa (leczenie zimnem)" i dopiero potem podać szczegóły. Pacjent nie musi znać nazwy aparatu, żeby podjąć decyzję o wizycie.

Nawigacja – prosta i przewidywalna

Pacjent wchodzi na stronę gabinetu z jednym celem: znaleźć informację albo umówić się na wizytę. Im prościej, tym lepiej.

Menu powinno być proste

Strona gabinetu nie potrzebuje rozbudowanego mega-menu z trzema poziomami zagnieżdżenia. Zazwyczaj wystarczą: usługi, cennik, zespół, kontakt, rezerwacja. Każdy punkt menu powinien być dostępny z klawiatury, a jego aktualny stan (np. „jesteś na podstronie Cennik") jasno oznaczony.

Porównanie nawigacji klawiaturą. Bez widocznego fokusa: użytkownik nie wie, który element menu jest aktywny. Z widocznym fokusem: element Cennik ma wyraźny obrys i podświetlenie. — Widoczny fokus pozwala osobom nawigującym klawiaturą orientować się, gdzie aktualnie się znajdują. Usunięcie outline (outline: none) bez zamiennika to jeden z najczęstszych błędów dostępności.

Skip link – szybki skok do treści

To ukryty link na samej górze strony, widoczny po naciśnięciu klawisza Tab. Pozwala pominąć menu i przejść od razu do głównej treści. Dla osób nawigujących klawiaturą to ogromna wygoda – bez skip linka muszą „przebijać się" przez menu na każdej podstronie.

Stopka z kluczowymi informacjami

Adres gabinetu, telefon, godziny otwarcia – te dane powinny być w stopce na każdej podstronie. Nie jako obrazek, nie jako plik PDF do pobrania, ale jako tekst, który można skopiować, kliknąć (telefon, e-mail), odczytać czytnikiem ekranu.

Kontrast i typografia – czytelność to podstawa

Wyobraź sobie pacjenta po 70-tce, który szuka godzin otwarcia Twojego gabinetu na telefonie. Jasne światło, mały ekran, może nie mieć przy sobie okularów.

Tekst musi mieć odpowiedni kontrast

Kontrast tekstu do tła musi wynosić co najmniej 4,5:1 dla tekstu o standardowym rozmiarze (poniżej 18pt / 24px). Dla dużego tekstu, np. nagłówków, wymagany minimalny kontrast to 3:1. To wymóg WCAG 2.2 na poziomie AA. Jasny szary tekst na białym tle, popularny w „minimalistycznych" projektach, wygląda elegancko, ale jest nieczytelny. Narzędzia takie jak WebAIM Contrast Checker pozwalają to sprawdzić w kilka sekund.

Trzy warianty tekstu 'Godziny otwarcia' na białym tle. Kontrast 1.9:1 – nieczytelny, nie spełnia WCAG. Kontrast 4.7:1 – spełnia WCAG AA. Kontrast 9.4:1 – spełnia WCAG AAA, czytelny dla każdego. — Ten sam tekst, trzy różne poziomy kontrastu. WCAG wymaga minimum 4,5:1 dla tekstu standardowego rozmiaru.

Minimalny rozmiar tekstu

Powszechnie przyjętym minimum jest 16 pikseli, tyle ustawiają domyślnie przeglądarki i taki rozmiar zapewnia wygodne czytanie na większości urządzeń. Strona powinna też poprawnie działać po powiększeniu tekstu do 200% w przeglądarce (Ctrl/Cmd i "+" na komputerze), to wymóg WCAG 2.2 (kryterium 1.4.4). Warto to sprawdzić: jeśli po powiększeniu treści się nakładają, przyciski znikają albo trzeba przewijać w bok, to znak, że strona wymaga poprawek.

Nie przekazuj informacji wyłącznie kolorem

„Pola oznaczone na czerwono są wymagane" – to błąd. Osoba z zaburzeniami widzenia barw może nie odróżnić czerwonego od zielonego. Dodaj gwiazdkę, tekst „pole wymagane" lub ikonę.

Zdjęcia i multimedia – opisy alternatywne

Strona gabinetu bez zdjęć byłaby dziwna – pacjenci chcą zobaczyć gabinet, zespół, sprzęt. Ale każde zdjęcie potrzebuje tekstu alternatywnego (atrybutu alt).

Jak pisać tekst alternatywny

Zamiast alt="zdjęcie1.jpg" czy alt="gabinet" napisz alt="Gabinet fizjoterapeutyczny z łóżkiem do masażu i sprzętem do rehabilitacji". Dzięki temu osoba korzystająca z czytnika ekranu rozumie, co przedstawia obraz.

Zdjęcia dekoracyjne

Jeśli grafika nie niesie treści (np. ozdobna linia, abstrakcyjny wzór w tle), ustaw pusty atrybut alt="" – czytnik ją pominie zamiast próbować opisać coś, co nie ma znaczenia.

Filmy z zabiegami – napisy i transkrypcja

Jeśli publikujesz filmik pokazujący, jak przebiega zabieg, dodaj napisy. Pacjent niedosłyszący powinien otrzymać tę samą informację. Transkrypcja tekstowa to dodatkowy plus, zarówno dla dostępności, jak i dla SEO.

Mapa i dojazd – częsty problem

Prawie każda strona gabinetu ma osadzoną mapę Google. To jest w porządku, ale sama mapa nie wystarczy.

Adres musi być tekstem

Mapa to element wizualny – osoba niewidoma jej nie „przeczyta". Adres gabinetu powinien być na stronie jako zwykły tekst: ulica, numer, kod pocztowy, piętro, informacja o dostępności wejścia.

Sekcja Kontakt i dojazd łącząca mapę Google z pełnym opisem tekstowym: adres z piętrem i informacją o windzie, telefon, godziny otwarcia, opis dojazdu i informacja o dostępności budynku. — Sekcja „Kontakt i dojazd" łączy mapę z pełnym opisem tekstowym – dostępnym dla każdego użytkownika, niezależnie od tego, czy widzi mapę.

Opis dojazdu

„Wejście od ulicy Kwiatowej, drugie piętro, dostępna winda" – takie informacje są niezwykle ważne dla osób z niepełnosprawnością ruchową. To też szansa na wyróżnienie się – pokazujesz, że myślisz o swoich pacjentach.

Dlaczego to się opłaca?

Dostępna strona gabinetu to inwestycja, która się zwraca na kilku poziomach.

Po pierwsze, docierasz do większej grupy pacjentów. Osoby starsze, osoby z niepełnosprawnościami, ich rodziny i opiekunowie – to realni pacjenci, którzy szukają gabinetu w Google.

Po drugie, dostępna strona to lepiej zbudowana strona. Poprawna semantyka HTML, logiczna struktura nagłówków, szybkie ładowanie – to wszystko wpływa pozytywnie na pozycjonowanie w Google. Dostępność i SEO idą w parze.

Po trzecie, to kwestia etyki. Jako gabinet medyczny, Twoją misją jest pomaganie ludziom. Strona, z której część pacjentów nie może skorzystać, stoi w sprzeczności z tą misją.

Jak sprawdzić swoją stronę?

Jeśli masz już stronę, możesz zrobić szybki test samodzielnie:

Spróbuj przejść przez całą stronę używając wyłącznie klawiatury (Tab, Enter, strzałki). Czy dotarłeś do wszystkich elementów? Czy widzisz, gdzie aktualnie jest „fokus", czyli który element jest obecnie aktywny?

Sprawdź, czy strona ma logiczną strukturę nagłówków. W przeglądarce Chrome zainstaluj rozszerzenie HeadingsMap, pokaże Ci hierarchię nagłówków na stronie.

Przetestuj kontrast kolorów na stronie za pomocą narzędzia WebAIM Contrast Checker. Wystarczy podać kolor tekstu i tła.

Powiększ stronę do 200% w przeglądarce (Ctrl/Cmd i "+"). Czy wszystko jest nadal czytelne i funkcjonalne?

To oczywiście nie zastępuje profesjonalnego audytu WCAG, ale pozwala wyłapać najpoważniejsze problemy.

Podsumowanie

Dostępna strona gabinetu medycznego nie wymaga rewolucji. To raczej zbiór dobrych praktyk: czytelne formularze, logiczna struktura, odpowiedni kontrast, opisy zdjęć i nawigacja dostępna z klawiatury. Większość z tych rzeczy to po prostu cechy dobrze zaprojektowanej strony.

Jeśli dopiero planujesz stronę dla swojego gabinetu – najlepiej zbudować ją z myślą o dostępności od pierwszego dnia. Naprawianie istniejącej strony jest zawsze trudniejsze i droższe niż zrobienie tego dobrze od początku.

Mapa strony