nautil logo czarne

Artykuły

Dostosowanie strony internetowej Centrum Medycznego ALMA MED do WCAG 2.1 AA

1. Otrzymanie audytu dostępności strony, przygotowany przez firmę zewnętrzną

W ostatnim czasie dostaliśmy zlecenie na dostosowanie strony internetowej Centrum Medycznego ALMA MED do standardu WCAG 2.1 AA

Cały proces został poprzedzony audytem zewnętrznej firmy, która wypisała listę błędów i nieścisłości.

Główne błędy wskazane w raporcie to:

    • Brak odpowiednich tekstów alternatywnych do elementów nietekstowych.
    • Nie wszędzie zachowano wymagany minimalny kontrast tekstu do tła.
    • Nagłówki nie posiadają poprawnej struktury.
    • Zastosowano obrazy tekstu.
    • Brak możliwości zatrzymania slidera.
    • Brak dostępu do wszystkich funkcjonalności strony z poziomu klawiatury.
    • Niepoprawnie wdrożony skip link.
    • Fokus nie jest widoczny na wszystkich elementach aktywnych.
    • Niejasny cel linków, brak informacji o otwarciu strony w nowym oknie.
    • Brak wyszukiwarki/mapy strony.
    • Brak Identyfikacji błędu, sugestii korekty błędu, dostępnych etykiet lub instrukcji, kiedy w treści wymagane jest wprowadzenie informacji przez użytkownika.

 

2. Przygotowanie do procesu dostosowania strony oraz audyt wewnętrzny

Przed przystąpieniem do procesu dostosowania strony, zrobiliśmy swój wewnętrzny audyt, aby zlokalizować wszystkie w/w błędy na każdej możliwej podstronie.

Posłużyliśmy się do tego m.in.:

 

3. Wyniki przed i po dokonanym procesie dostosowania strony do standardu WCAG 2.1 AA

Poniżej przedstawiamy dwa zrzuty ekranu, przedstawiające stan strony przed procesem dostosowania.

Wszystkie wykazane błędy w raporcie przez firmę zewnętrzną zostały poprawione.

Ilustracja przedstawia zrzut ekranu z wynikiem automatycznego narzędzia do sprawdzania dostępności stron internetowych WAVE

Jak widać na powyższym zrzucie ekranu, strona zawierała praktycznie błędy w każdej możliwej kategorii. Na stronie głównej znajdowały się ilustracje nie posiadające opisów alternatywnych. Dodatkowo w momencie korzystania z czytników ekranu bardzo często etykiety były odczytywane w języku angielskim. Nie brakowało również elementów o nieprawidłowym kontraście.

Ilustracja poniżej przedstawia stan strony po procesie dostosowania.

Ilustracja przedstawia zrzut ekranu z wynikiem automatycznego narzędzia do sprawdzania dostępności stron internetowych WAVE po przeprowadzonym procesie dostosowania strony do standardu WCAG 2.1 AA.

 

Podobna sytuacja wygląda w narzędziem Lighthouse, które również służy do sprawdzenia, w jakim stopniu strona jest dostępna.

PRZED

Ilustracja przedstawia zrzut ekranu z wynikiem automatycznego narzędzia Lighthouse, do sprawdzania dostępności stron internetowych. Jest to wynik przed dokonaniem zmian na stronie. Wynik wynosi 84 na 100 możliwych punktów

PO

Ilustracja przedstawia zrzut ekranu z wynikiem automatycznego narzędzia Lighthouse, do sprawdzania dostępności stron internetowych. Jest to wynik po dokonaniu zmian na stronie. Wynik wynosi 100 na 100 możliwych punktów.

Poprawa błędów wykrytych przez narzędzia automatyczne to tak naprawdę wierzchołek góry lodowej. Prawdziwa praca rozpoczęła się po sprawdzeniu manualnym. Poprawa błędów w tym wypadku wymagało poprawy zwłaszcza w kodzie PHP oraz CSS. Dotyczyło to przede wszystkich błędów związanych z nieprawidłowym kontrastem, a także z nieprawidłowych odczytem etykiet (których często brakowało) przez czytnik ekranu.

Należy podkreślić, że nie wszystkie błędy udało nam się poprawić. Dotyczy to punktu 4.1.1 mówiącym o prawidłowej semantyce kody. Strona z którą mieliśmy do czynienia była zbudowana na popularnym CMS WordPress do którego była dołączona pokaźna liczba wtyczek. Jak wiadomo wtyczki dodają często czasem kilkutysięczne linie kodu. Zależało nam na tym, aby błędy związane z wytyczną 4.1.1 nie miały wpływ na dostępność strony.