Audyt dostępności WCAG stron szkolnych w praktyce- studium przypadku

Strony internetowe szkół są pierwszym miejscem kontaktu rodziców, uczniów i społeczności lokalnej z instytucją. Ich dostępność cyfrowa ma kluczowe znaczenie dla społeczności szkolnej. To dlatego zgodnie z obowiązującymi przepisami szkoły jako podmioty publiczne są zobowiązane do zapewnienia dostępności cyfrowej swoich stron internetowych. W celu określenia poziomu dostępności najlepiej zacząć od audytu dostępności.

W ramach audytu sprawdziliśmy dwie strony szkolne pod kątem zgodności z wymaganiami WCAG 2.1 na poziomie AA zgodnie z obowiązującym prawem dla podmiotów publicznych. Celem było zidentyfikowanie najczęściej występujących problemów oraz pokazanie praktycznych wyzwań związanych z tworzeniem dostępnych treści w środowisku edukacyjnym.

Podczas audytu dostępności WCAG strony zostały przetestowane zgodnie z 49 kryteriami. Przeprowadzone zostały zarówno testy eksperckie, jak i automatyczne. Strony zostały również przetestowane pod kątem użycia czytników ekranu. Jedna ze stron wykorzystała gotowy, dostępny szablon.

Obydwie strony zawierały podobne elementy: Kontakt, Aktualności, O szkole, Dla rodziców, Rekrutacja. Zawartość treści również była podobna oprócz treści tekstowych, musieliśmy przetestować również dokumenty oraz nagrania wideo. 

Z tego artykułu dowiesz się:

• Jakie są najczęstsze kategorie błędów znalezione na stronach szkolnych.
• Jakie najczęstsze kryteria dostępności nie są spełnione w przypadku stron szkolnych.
• Na co powinniśmy zwracać uwagę, budując serwisy dla jednostek publicznych, które z założenia powinny być dostępne.

Powszechnie występującym problemem jest brak zachowania kontrastu. Dotyczy to zarówno kontrastu między kolorami tekstu i tła, jak i ramkami fokusa czy elementów nietekstowych. Kontrast nie jest spełniony dla istotnych z punktu widzenia użytkownika elementów strony np. dla nawigacji czy elementów aktywnych, które prowadzą do akcji. Brak odpowiedniego kontrastu stanowi problem dla osób z problemami wzroku.

Niespełniając kontrastu naruszamy następujące kryteria dostępności:

• 1.4.3 Kontrast (Minimum) AA
• 2.4.7 Widoczny fokus AA 
• 1.4.11 Kontrast elementów nietekstowych AA

Pozycja bocznego menu np. Stołówka ma kontrast 4.01 (kolor pierwszego planu: #ffffff, kolor tła: #c0680b, rozmiar czcionki: 12.0pt (16.002px). Poziom kontrastu dla tego elementu powinien wynosić 4:5:1 ze względu na rozmiar czcionki. Gdyby czcionka była większa niż 18px lub 14px i pogrubiona kontrast byłyby wystarczający.

Nieprawidłowa struktura  oraz zawartość nagłówków to kolejny powszechny problem identyfikowany podczas audytu dostępności WCAG.

Na stronach brakuje nagłówka h1 mimo tego, że nagłówek h1 jest najważniejszym nagłówkiem na stronie i oznaczamy nim tytuł danej strony. Bardzo często na stronie istnieją również puste nagłówki. Czytniki ekranu podaje informacje o istniejącym nagłówku, ale nie idzie za nim informacja, co jest zawarte w tym nagłówku. Użytkownik korzystający z czytnika ekranu wprowadzony jest w błąd poznawczy. Nagłówki służą do nawigacji osobom korzystającym z czytników ekranu ich brak lub złe użycie stanowi zatem duży problem.

Omijając nagłówki lub pozostawiając je pustymi, naruszamy następujące kryteria dostępności:

• 1.3.1 Informacje i relacje A
• 2.4.6 – Nagłówki i etykiety AA

Na stronie głównej brakuje nagłówka h1. Tytuł strony oznaczony jest jako nagłówek h2. ​Przykładowym nagłówkiem h1 mógłby być: Zespół Szkół Nr 22 im. Emiliana Konopczyńskiego.

Podobną funkcję jak nagłówki pełnią punkty orientacyjne. One również pomagają w nawigacji po stronie przy włączonym czytniku ekranu.

Główne błędy dotyczące punktów orientacyjnych to puste landmarki, które nie zawierają żadnych elementów nawigacyjnych. Użytkownik korzystający z czytnika ekranu otrzymuje informację o ich istnieniu, jednak po wejściu w ten obszar, nie znajduje żadnej treści. Brak takich informacji wprowadza w błąd i sprawia, że landmark staje się bezużyteczny jako punkt orientacyjny. Występują również złe nazwy landmarków, np. podawana jest ta sama nazwa dla menu głównego i bocznego. Użytkownik korzystający z czytnika nie wie wtedy, co jest głównym bocznym a co pomocniczym menu.

Tworząc złą strukturę punktów orientacyjnych, naruszamy następujące kryteria dostępności:

•  1.3.1 Informacje i relacje A

Na stronie zastosowano landmark banner, który z założenia powinien zawierać kluczowe informacje identyfikujące serwis (np. nazwę strony, logo, wyszukiwarkę lub inne elementy globalne). W analizowanym przypadku landmark banner zawiera wyłącznie link „Przejdź do treści” i nie dostarcza żadnych informacji o stronie. Użytkownicy korzystający z czytników ekranu, po wejściu w landmark banner, oczekują treści nagłówkowych strony. Brak takich informacji wprowadza w błąd i sprawia, że landmark staje się bezużyteczny jako punkt orientacyjny.

Brak alternatywy tekstowej to jeden z najczęstszych problemów dostępności. Dotyczy on zarówno pojedynczych zdjęć, jak i galerii. Obraz przekazuje informacje, ale nie dociera on do osób niewidomych i potrzebny jest tekst, który opisze to, co oddaje obraz. 

Pomijając alternatywy tekstowe, naruszamy następujące kryteria dostępności:

• 1.1.1 Treści nietekstowe A 
• 1.4.5 Obrazy tekstu AA

Wszystkie zdjęcia mają ten sam opis alt:  “Powiększ obraz”. To stanowi problem dla osób korzystających z czytnika ekranu. Nie wiedzą one, co zawiera obraz.

Brak alternatywy tekstowej dla grafiki, która zawiera kluczowe informacje dla czytelnika np. o godzinie zebrania, przebiegu zebrania ect. Informacje przedstawione są w postaci obrazu, a nie tekstu. Brak jest alternatywy tekstowej. Osoby korzystające z czytnika ekranu nie mają dostępu do danych informacji. Czytnik ich nie czyta. Należy unikać takich rozwiązań, gdzie tekst jest częścią zdjęcia. Najlepiej byłoby po prostu przekazać taką informację za pomocą tekstu. Przenieść treści z obrazu do html. Zdjęcie może pozostać dekoracyjne z alt=””.

Materiały wideo wymagają innych rozwiązań. Dla osób niesłyszących i słabosłyszących stosuje się napisy, transkrypcje. Osoby niewidome i słabowidzące korzystają z audiodeskrypcji, które umożliwiają śledzenie narracji i zrozumienie przekazywanych informacji.

Pomijając transkrypcje, audiodeskrypcje naruszamy następujące kryteria dostępności:

• 1.2.3 – Audiodeskrypcja lub alternatywa tekstowa dla mediów (nagranie) A
• 1.2.5 – Audiodeskrypcja (AA)

Wideo przedstawiające wirtualny spacer po liceum nie zawiera audiodeskrypcji ani transkrypcji. Informacje przekazywane wyłącznie w warstwie wizualnej, takie jak wygląd budynku i przestrzeni szkoły, nie są dostępne dla osób niewidomych.

Problem braku opisu nie dotyczy tylko treści wizualnych i multimedialnych, dotyczy również linków. Brak opisu celu linków znajdujących się na stronie jest powszechnie występującym problemem.

Nie opisując prawidłowo linków, naruszamy następujące kryteria dostępności:

• 2.4.4 Cel linku (z kontekstem) A
• 1.1.1 – Treści nietekstowe A

Na stronie znajduje się link do pliku PDF. Użytkownik nie jest poinformowany o tym, że ​​link spowoduje otwarcie dokumentu PDF. Brak tej informacji może wprowadzić w dezinformacje osoby korzystające z czytników ekranu.

Na stronach szkolnych bardzo dużą część treści stanowią różnego rodzaju dokumenty. Są to dokumenty PDF, Microsoft Office różnego rodzaju prezentacje. Są one bardzo często niedostępne, a co więcej niedostępny jest sam dostęp do nich. 

1. Wybranie gotowego, dostępnego szablonu nie gwarantuje pełnej zgodności z wymaganiami dotyczącymi dostępności. Często szablony trzeba dostosować do własnych potrzeb, a w trakcie tych modyfikacji mogą pojawić się problemy z dostępnością. 
2. Zanim przystąpimy do pracy nad stroną, warto zweryfikować wybraną paletę kolorów. Niektóre zestawienia kolorów należy od razu wykluczyć, ponieważ trudno będzie zapewnić im wystarczający kontrast dla tekstów, elementów interfejsu i stanów fokusa.
3. Dostępność strony to nie tylko szablon, ale również publikowane na bieżąco treści. Jeśli osoby edytujące stronę nie znają zasad dostępności, utrzymanie zgodności z WCAG w dłuższej perspektywie staje się bardzo trudne.
4. Dodanie wtyczki dostępności, nie załatwia sprawy dostępności a wręcz przeciwnie często nam ją psuje. Pod “przykrywką” wtyczki myślimy, że będziemy mieli dostępną stronę, ale żeby wtyczka dobrze zadziałała, to najpierw musimy mieć zrobione dobrze fundamenty, więc strona musi być dostępna.
5. Nie powinniśmy zapominać o tym, że częścią zawartości strony są też dokumenty, one również muszą być dostępne. W przypadku instytucji szkolnej tych dokumentów jest bardzo dużo. Warto rozważyć, które z nich muszą mieć format PDF, a które jednak możemy zostawić w HTML, który jest bardziej dostępny.

---

Kto musi mieć deklarację dostępności i co musi ona zawierać?

Jak wygląda audyt dostępności strony internetowej ?

Ile kosztuje audyt dostępności cyfrowej i od czego zależy cena?

Audyt pokazał, że nawet wykorzystanie gotowego szablonu deklarowanego jako „dostępny” nie gwarantuje pełnej zgodności z WCAG 2.1. Dostępność strony wymaga świadomego projektowania, uwzględnienia odpowiednich kolorów, poprawnej struktury treści oraz przygotowania dokumentów i multimediów. Podobnie wdrożenie wtyczki dostępności nie rozwiązuje problemów,  fundamenty strony muszą być solidne.

Dobre praktyki dostępności to proces, nie jednorazowa akcja. Case study pokazuje, że edukacja osób tworzących i edytujących treści, świadome projektowanie oraz systematyczna weryfikacja są kluczowe, aby strona szkolna była naprawdę dostępna dla wszystkich użytkowników. Jeśli jesteś koordynatorem dostępności w twojej szkole i potrzebujesz wsparcia sprawdź naszą ofertę audytu dostępności dla instytucji publicznych.

FAQ – Najczęściej zadawane pytania