Wróć do BLOGA

Jak testować dostępność swojej strony według WCAG?

WCAG dla stron medycznych

Czy jako lekarz wiesz czym jest WCAG? A czy Twoja medyczna strona internetowa spełnia wytyczne dotyczące dostępności dla osób z niepełnosprawnościami? W wielu krajach wytyczne WCAG są obowiązkowe. Niestety w Polsce niewiele osób jest świadoma jak ważne jest, aby zadbać o dostępność strony medycznej. W branży medycznej obsługujesz różnych pacjentów. Również tych z różnymi niepełnosprawnościami. Zastanawiałeś się kiedyś jak sprawić, by korzystanie przez nich z Twojej strony WWW było łatwiejsze?

Co to jest WCAG?

WCAG, z angielskiego Web Content Accessibility Guidelines to zbiór międzynarodowych wytycznych dotyczących dostępności treści internetowych. Zostały opracowane przez World Wide Web Consortium (W3C) za pośrednictwem inicjatywy Web Accessibility Initiative (WAI). Celem WCAG jest zapewnienie, że strony internetowe, aplikacje i inne cyfrowe treści są dostępne dla jak najszerszego grona użytkowników, w tym dla osób z różnymi niepełnosprawnościami.

Głównymi aspektami WCAG dla stron medycznych są:

  • Postrzegalność (Perceivable) – treść musi być prezentowana w sposób, który może być postrzegany przez wszystkie zmysły użytkownika, np. tekst alternatywny dla obrazów, napisy do filmów.
  • Funkcjonalność (Operable) – interfejsy użytkownika i nawigacja muszą być funkcjonalne i dostępne dla wszystkich użytkowników. Na przykład, wszystkie funkcje strony powinny być dostępne za pomocą klawiatury.
  • Zrozumiałość (Understandable)– informacje i sposób obsługi interfejsu użytkownika muszą być zrozumiałe. Oznacza to, że teksty powinny być czytelne i zrozumiałe, a zachowanie strony przewidywalne.
  • Solidność (Robust) – treść musi być wystarczająco solidna, aby mogła być niezawodnie interpretowana przez różne technologie wspomagające, np. czytniki ekranowe. Strona powinna być kompatybilna z obecnymi i przyszłymi narzędziami.

Historia WCAG zaczyna się w 1999 roku, kiedy to powstała pierwsza wersja tych wytycznych. Aktualnie korzystamy z wersji WCAG 2.1, która została opublikowana w 2018 roku. Jej głównymi zadaniami jest dodanie nowych kryteriów, skupiających się na dostępności mobilnej dla osób z niepełno sprawnościami poznawczymi. Jednak 5 października 2023 roku została opublikowana wersja WCAG 2.2 i już obowiązuje. Zatem możemy się spodziewać, że niebawem zostanie zaimplementowana do polskiej legislacji.

WCAG dla stron medycznych

Dlaczego WCAG jest kluczowe dla użytkowników z niepełnosprawnościami?

Usuwanie barier w dostępie do informacji

Osoby z różnymi rodzajami niepełnosprawności mogą napotkać liczne bariery podczas korzystania z Internetu. WCAG dla stron medycznych i nie tylko – pomaga eliminować te bariery, zapewniając, że treści są dostępne dla wszystkich, niezależnie od ich zdolności. Na przykład:

  • Osoby niewidome lub słabo widzące – mogą korzystać z czytników ekranu, które odczytują tekst na głos. Teksty alternatywne dla obrazów i odpowiednia struktura nagłówków pomagają im lepiej zrozumieć zawartość strony.
  • Osoby niesłyszące lub niedosłyszące- mogą polegać na napisach i transkrypcjach wideo, aby uzyskać dostęp do informacji audiowizualnych.
  • Osoby z ograniczeniami motorycznymi – mogą korzystać z klawiatury lub urządzeń wspomagających do nawigacji, zamiast myszki. WCAG zapewnia, że wszystkie funkcje strony są dostępne za pomocą klawiatury.

Poprawa użyteczności dla wszystkich użytkowników

Dostosowanie treści internetowych do wytycznych WCAG nie tylko poprawia dostępność, ale także zwiększa ogólną użyteczność strony dla wszystkich użytkowników. Strony, które są łatwiejsze w nawigacji, czytelne i zrozumiałe, oferują lepsze doświadczenie użytkownikom, co może prowadzić do większego zaangażowania i satysfakcji.

Zgodność z przepisami prawa

W wielu krajach istnieją przepisy prawne wymagające zgodności strony medycznej z WCAG. Szczególnie dotyczy to jednak stron rządowych i instytucji publicznych. Przestrzeganie tych wytycznych pomaga organizacjom unikać problemów prawnych i zapewnia, że spełniają one obowiązujące standardy dotyczące dostępności.

Wspieranie inkluzji społecznej

Zapewnienie dostępności strony medycznej promuje inkluzję społeczną, umożliwiając osobom z niepełnosprawnościami uczestniczenie w życiu cyfrowym na równi z innymi. Dostęp do edukacji, zatrudnienia, usług publicznych i rozrywki jest kluczowy dla pełnego uczestnictwa w społeczeństwie.

Technologia wspomagająca

WCAG dla stron medycznych wspiera rozwój i wykorzystanie technologii wspomagających, takich jak czytniki ekranowe, programy powiększające ekran, urządzenia Braille’a, przełączniki sterowane oddechem i inne. Poprawne kodowanie i struktura stron zgodnie z WCAG pozwala tym technologiom efektywnie interpretować i prezentować treści użytkownikom.

Jak testować dostępność witryny medycznej według WCAG?

W sieci można znaleźć setki firm, które specjalizują się w testowaniu oraz dostosowywaniu stron internetowych pod wytyczne WCAG. Nawet jeśli decydujesz się na współpracę z jedną z nich, warto zorientować się w podstawowych zasadach dostępności stron medycznych. W ten sposób będziesz w stanie gruntownie sprawdzić, czy wykonane prace są zgodne z obowiązującymi zapisami. Na jakie elementy zwrócić uwagę testując WCAG dla stron medycznych?

Kontrast w kolorach

WCAG kontrast kolorów

Kontrast w kolorach jest kluczowym elementem dostępności stron medycznych. Zgodnie z wytycznymi WCAG, minimalny kontrast między tekstem, a tłem powinien wynosić 4.5:1 dla tekstu podstawowego oraz 3:1 dla tekstu dużego (o rozmiarze co najmniej 18 punktów lub 14 punktów w przypadku tekstu pogrubionego). Jednak zaleca się, aby kontrast nie był niższy niż 4.8:1, co dodatkowo zwiększa czytelność i dostępność treści dla użytkowników z wadami wzroku.

Im wyższy stopień kontrastu, tym bardziej dostępna jest strona. Wysoki kontrast jest szczególnie istotny dla osób z niską ostrością wzroku, daltonizmem lub innymi problemami z rozróżnianiem kolorów. Dla zapewnienia odpowiedniego kontrastu, warto regularnie weryfikować kolory na stronie za pomocą dostępnych online narzędzi do sprawdzania kontrastu, takich jak Contrast Checker. Narzędzia te pomagają szybko i dokładnie ocenić, czy wybrana kolorystyka spełnia wymagania WCAG dla stron medycznych.

Dodatkowo warto pamiętać, że minimalny rozmiar fontu na stronie WWW to 12. Jest to minimalny rozmiar, który zapewnia czytelność tekstu dla większości użytkowników, w tym dla osób z wadami wzroku.

Tekst alternatywny, czyli opis alt do zdjęć

WCAG alt do zdjęć

Stosowanie tekstów alternatywnych w elementach graficznych jest kluczowe dla zapewnienia dostępności stron medycznych dla osób z niepełnosprawnością wzroku. Teksty alternatywne (alt text) umożliwiają programom czytającym ekrany przekazanie treści zawartych w obrazach użytkownikom, którzy nie mogą ich zobaczyć.

Ogólne wytyczne dotyczące tworzenia alt do zdjęć:

  • Grafika zawierająca tekst: Należy zawsze wstawić tekst alternatywny, który dokładnie odzwierciedla zawartość tekstową grafiki. Na przykład, jeśli grafika zawiera cytat “Innowacja jest kluczem do przyszłości”, tekst alternatywny powinien brzmieć “Innowacja jest kluczem do przyszłości”.
  • Grafika ozdobna: Powinna posiadać pusty tekst alternatywny alt=””. Takie podejście informuje programy czytające ekrany, że grafika jest dekoracyjna i nie zawiera istotnych informacji. Na przykład, jeśli na stronie znajduje się tło z delikatnym wzorem, tekst alternatywny powinien wyglądać tak: alt=””.
  • Grafika typu zdjęcia, wykresy itp.: Powinna posiadać krótki opis alternatywny, który jasno i zwięźle opisuje, co przedstawia dana grafika. Jeśli zdjęcie przedstawia psa bawiącego się w parku, tekst alternatywny mógłby brzmieć: “Pies bawiący się w parku”. W przypadku skomplikowanych zdjęć lub diagramów, bardziej szczegółowy opis powinien być umieszczony w pobliżu obrazu. Na przykład, dla diagramu ilustrującego złożone dane ekonomiczne, tekst alternatywny może być krótki: “Diagram przedstawiający dane ekonomiczne”, a szczegółowy opis znajdować się poniżej grafiki.
  • Grafika z celami (linkami): Powinna posiadać tekst alternatywny, który jasno określa cel linku. Na przykład, jeśli grafika jest linkiem do strony z kontaktami, tekst alternatywny powinien brzmieć: “Przejdź do strony kontaktowej”.

 5 wskazówek jak pisać dobrej jakości teksty alternatywne

  1. Pisz krótko, ale wyczerpująco – skup się na meritum. Opisz tylko to, co znajduje się na obrazku. Najważniejsze jest, aby po przeczytaniu opisu osoba niewidząca mogła wyobrazić sobie daną sytuację. Na przykład zamiast pisać “Na zdjęciu znajduje się pies bawiący się w parku”, napisz “Pies bawi się w parku”.
  2. Nie zapychaj treści – unikaj zbędnych zwrotów, takich jak “Na zdjęciu widać” czy “Zdjęcie przedstawia”. Przejdź od razu do opisu, np. zamiast “Na zdjęciu widać grupę dzieci bawiących się w parku”, napisz “Grupa dzieci bawi się w parku”.
  3. Nie używaj strony biernej – tekst powinien być dynamiczny i przyjemny w odbiorze. Zamiast pisać “Drzewo jest widziane w tle”, napisz “Drzewo rośnie w tle”.
  4. Używaj czasowników – skup się na czasownikach, aby opis był bardziej dynamiczny. Przymiotniki są również ważne, ale nie wzbogacaj opisu na siłę. Na przykład, zamiast “Duży, zielony park z pięknymi kwiatami”, napisz “Park z kwiatami”.
  5. Nie wszystkie zdjęcia muszą mieć tekst alternatywny – w przypadku grafik ozdobnych, które nie niosą istotnych informacji, użyj pustego tekstu alternatywnego alt=””.

Tworzenie tekstów alternatywnych to kluczowy element WCAG dla stron medycznych. Prawidłowe stosowanie opisów alt sprawia, że treści są dostępne dla wszystkich użytkowników, niezależnie od ich zdolności do widzenia obrazów. Przestrzeganie powyższych wytycznych pomoże w tworzeniu dostępnych i przyjaznych dla użytkowników stron internetowych.

Linki w WCAG

WCAG jak tworzyć linki

Linki na stronach internetowych odgrywają istotną rolę w nawigacji i dostępności, szczególnie dla osób korzystających z technologii wspomagających. Zgodnie z wytycznymi WCAG, ważne jest, aby linki były jednoznaczne i informacyjne.

Każdy link na stronie powinien jasno wskazywać, dokąd prowadzi (np. do strony „Kontakt”, co jest szczególnie istotne dla użytkowników korzystających z czytników ekranu. Unikaj powtarzania linków do tych samych stron na tej samej podstronie, ponieważ może to wprowadzać zamieszanie. Na przykład, zamiast stosować ogólnikowe „Napisz”, lepiej napisać „Przejdź do formularza kontaktowego”. Taki opis jest bardziej informacyjny i precyzyjny, co poprawia doświadczenie użytkownika.

Podczas edytowania linków w HTML, używaj atrybutu title, aby dostarczyć dodatkowych informacji na temat celu linku, ale unikaj powtarzania tych samych fraz w różnych miejscach.

<a href=”regulamin.html” title=”Regulamin konkursu letniego”>Przeczytaj Regulamin konkursu letniego</a>

Taki sposób opisu linków nie tylko spełnia wytyczne WCAG dla stron medycznych. Również ułatwia nawigację i zrozumienie celu linków wszystkim użytkownikom.

Struktura nagłówków na dostępnych stronach medycznych

WCAG struktura nagłówków

Prawidłowa struktura nagłówków jest kluczowa dla dostępności i nawigacji na stronach internetowych. Każda strona powinna mieć tylko jeden nagłówek H1, który jasno definiuje główny temat strony. Nagłówki powinny być zorganizowane hierarchicznie, od najważniejszego H1 do najmniej ważnych H2, H3 itd. Unikaj pustych nagłówków oraz pustych paragrafów (<p></p>), ponieważ mogą one wprowadzać zamieszanie dla użytkowników korzystających z technologii wspomagających.

Poprawna struktura nagłówków:

<h1>Główny temat strony</h1>

<h2>Podtemat 1</h2>

<h3>Szczegółowy temat 1.1</h3>

<h2>Podtemat 2</h2>

<h3>Szczegółowy temat 2.1</h3>

Nagłówki są niezwykle ważnych elementem, jeśli chodzi o dostępność strony medycznej. Dzielą one treść na mniejsze i bardziej czytelne czytelne fragmenty. Pomaga to w interpretacji nie tylko osoby, które korzystają z technologii wspomagających. Również inni pacjenci, dzięki odpowiednio przygotowanym nagłówkom, sprawniej znajdą interesujące ich informacje.

Formularze online dostosowane pod WCAG

WCAG formularz online

Wiele stron medycznych posiada formularze np. kontaktowe. Należy pamiętać, że takie elementy również wymagają dostosowania ich wyglądu pod względem dostępności WCAG. Aby dopasować formularz online do WCAG dla stron medycznych należy:

  • Etykiety danych – ważne jest, aby etykiety danych były umieszczone poza polami formularza. Etykiety to zazwyczaj wyszarzane informacje, które znajdujemy wewnątrz pól do uzupełniania np. „Imię i nazwisko” czy „Tutaj wpisz treść swojej wiadomości”. Takie informacje oczywiście są niezwykle ważne, ale powinny się znaleźć bezpośrednio nad polem do wpisania tych danych. Dodatkowe instrukcje można zamieścić np. w nawiasie.
  • Nawigacja tabulatorem – przetestuj nawigację za pomocą klawisza Tab. Naciśnij klawisz Tab i przechodź nim przez stronę. Elementy na stronie powinny być dostępne w logicznej kolejności, zgodnie z ich rozmieszczeniem. Jeśli tabulator nie przechodzi przez elementy w odpowiedniej kolejności, należy to skorygować. Przykładem problemu może być sytuacja, gdy tabulator przeskakuje niektóre pola formularza lub linki, co może wprowadzać użytkowników w błąd.

Domyślny język strony

WCAG domyślny język strony

Zapewnienie, że domyślny język strony jest prawidłowo ustawiony, jest kluczowym aspektem dostępności stron medycznych zgodnie z wytycznymi WCAG. Na wszystkich stronach powinien być ustawiony jako domyślny język polski, co nie tylko wspiera użytkowników, ale także pomaga w prawidłowym działaniu technologii wspomagających, takich jak czytniki ekranowe.

Dodatkowo, jeśli strona zawiera fragmenty w innych językach, należy te fragmenty odpowiednio oznaczyć, używając atrybutu lang w odpowiednich znacznikach HTML. Na przykład, gdy na stronie w języku polskim znajduje się cytat po angielsku:

<p>To jest przykładowy tekst po polsku.</p>

<p lang=”en”>This is a sample text in English.</p>

Takie oznaczenie pomoże czytnikom ekranowym i innym technologiom wspomagającym poprawnie zinterpretować i odczytać tekst w różnych językach, co dodatkowo zwiększa dostępność i użyteczność strony.

Czy warto wprowadzić WCAG dla stron medycznych?

Temat dostępności stron medycznych dla osób z różnymi niepełno sprawnościami jest coraz głośniejszy. Każda aktualizacja wytycznych wprowadza nowe usprawnienia, które mają swoje odniesienie nie tylko w WCAG, ale również np. w UX. Uważamy, że szczególnie w branży medycznej, zadbanie o wygodę w korzystaniu ze stron WWW dla pacjentów, którzy słabiej widzą, gorzej słyszą lub mają problemy motoryczne – jest niezwykle istotne. Zadbaj o łatwość w korzystaniu z Twojej medycznej strony WWW. Nie zapominaj przy tym o żadnym ze swoich pacjentów.

Jeśli masz jakieś pytania – śmiało skontaktuj się z nami. Zespół Medycznego Marketingu od lat wspiera lekarzy i placówki z branży medycznej w drodze do rozwoju. Wspólnie ustalamy cele i realizujemy je. Tym samym nie tylko polepszamy wrażenia pacjentów, ale także mnożymy zyski firm medycznych.

Scroll to top