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.:

• WAVE (https://wave.webaim.org/)


• Color Contrast Checker (https://www.tpgi.com/color-contrast-checker/)


• ANDI (https://www.ssa.gov/accessibility/andi/help/install.html)


• Lighthouse (https://chrome.google.com/webstore/detail/lighthouse/)


• oraz wiedzą naszych ekspertów :)

 

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.

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.

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

PO

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.