Wdrażanie standardów WCAG: Przewodnik po tworzeniu dostępnych aplikacji internetowych
26.04.2024
Autor
Wojciech Puchalski
Kategorie
Wprowadzenie do dostępności internetowej
Dostępność (ang. Accessibility). Termin ten niedługo może być bardzo istotny w kontekście projektowania aplikacji internetowych. Coraz częściej mówi się o tym, że wszystko co ważne w sieci, powinno być dostępne dla wszystkich, a więc także osób z różnymi niepełnosprawnościami, które mają trudności z odczytywaniem nieprzygotowanej pod kątem właśnie wspomnianej dostępności strony. Jako softwarehouse specjalizujący się między innymi w aplikacjach opartych na TYPO3 jesteśmy gotowi pomóc Ci w procesie tworzenia w pełni dostosowanej do standardów dostępności strony WWW.
Czym są standardy WCAG?
WCAG (Web Content Accessibility Guidelines) to zestaw wytycznych opracowany przez World Wide Web Consortium (W3C), które określają zasady tworzenia dostępnych aplikacji online. Obecnie obowiązującą wersją standardów jest WCAG 2.2. Trwają prace nad WCAG 3.0.
Cztery podstawowe zasady WCAG
WCAG składa się z czterech głównych grup (zasad):
1. Postrzegalność (Perceivable) – informacje przedstawiane przez witrynę muszą być tak podane, żeby mogły zostać odebrane przez osoby z różnymi ograniczeniami (np. dodanie tekstu alternatywnego do obrazków dla osób niewidomych).
2. Funkcjonalność (Operable) – kontrolki i inne komponenty muszą być dostępne dla osób z różnymi ograniczeniami (np. osoby z ograniczeniami ruchowymi powinny być w stanie korzystać z klawiatury zamiast z myszki).
3. Zrozumiałość (Understandable) – informacje na stronie i jej obsługa powinny być możliwie zrozumiałe dla osób z niej korzystających (np. język witryny powinien być podany, żeby czytnik ekranu mógł odpowiednio odczytać stronę).
4. Solidność (Robust) – struktura i działanie strony powinno spełniać standardy odpowiednie dla zastosowanych technologii, co ma umożliwić długotrwałe funkcjonowanie strony. Czyli z jednej strony jest to np. odpowiednie zakańczanie i zagnieżdżanie tagów tam gdzie standard HTML tego wymaga. Z drugiej dla czytników ekranu ważne jest, żeby np. kontrolki formularzy miały określone stany (np. zaznaczony / niezaznaczony) i odpowiednie role (np. role=checkbox), co jest szczególnie ważne jeśli np. używa się własnych komponentów zamiast używać standardowych elementów (np. <span> zamiast <input type="checkbox">).
Jak wdrożyć WCAG w swoich aplikacjach internetowych?
W obrębie każdej grupy podane są bardziej szczegółowe wytyczne, będące wskazówkami dla osób projektujących witrynę. Każda wytyczna zawiera mierzalne kryteria, wedle których ocenić można, czy jej założenia zostały zrealizowane. Kryteria te nazywane są kryteriami sukcesu. W tzw. dokumentach towarzyszących (ang. supporting documents) każde kryterium jest szczegółowo omówione. Każde z kryteriów przyporządkowane jest do jednego z poziomów dostępności. Wyróżniono trzy takie poziomy A (podstawowy), AA oraz AAA (najwyższy). Dla realizacji poziomu AA należy spełnić kryteria tak dla poziomu A, jak i AA. Analogicznie sytuacja wygląda w przypadku poziomu AAA.
Poniżej przedstawiamy tylko niektóre z najważniejszych wytycznych dotyczących dostępności. Jest ich oczywiście dużo więcej, ale na pewno aplikacja zgodna z WCAG powinna uwzględniać następujace elementy:
1. Alternatywne treści dla multimediów – obrazy, pliki dźwiękowe i wideo muszą posiadać dodatkowo tekst, który następnie może być odczytywany przez czytniki ekranowe (oprogramowanie, które konwetuje tekst na syntezowany głos lub inną formę wyjścia dźwiękowego)
2. Responsywność strony – strona internetowa powinna automatycznie dostosowywać się do różnych szerokości ekranów urządzeń, zapewniając użytkownikom spójne i czytelne doświadczenie, niezależnie od tego, czy korzystają z komputera, tabletu czy smartfona.
3. Obsługa klawiatury – wszystkie funkcjonalności strony powinny być dostępne i obsługiwane za pomocą samej klawiatury, umożliwiając użytkownikom łatwe poruszanie się i interakcję bez konieczności korzystania z myszki.
4. Kontrola czasu – użytkownicy powinni mieć kontrolę nad czasem wyświetlania zawartości, szczególnie w przypadku elementów poruszających się lub zmieniających się automatycznie, aby uniknąć przekraczania limitów czasowych, które mogłyby utrudnić odczytanie treści.
5. Odczytywanie komunikatów przez technologie asystujące – wszystkie ważne komunikaty i okna modalne powinny być zaprojektowane tak, aby były odczytywane i interpretowane poprawnie przez technologie asystujące, zapewniając pełne zrozumienie treści wszystkim użytkownikom.
6. Skalowalność treści – możlia jest zmiana wielkości tekstu i innych elementów bez utraty funkcjonalności lub zawartości.
7. Kontrast – tekst na stronie powinien w znacznym stopniu wyróżniać się od tła, tak by osoby z ograniczoną percepcją wzrokową mogły go odczytać.
8. Przyjazne adresy URL – umożliwi to szybkie zrozumienie zawartości strony na podstawie samego adresu.
9. Weryfikacja danych – użytkownicy powinni mieć możliwość weryfikacji swoich danych przed ich wysłaniem. Pozwoli to wyeliminować potencjalne błędy w formularzach.
10. Pomoc kontekstowa – podczas wypełniania formularzy i innych interakcji użytkownicy powinni mieć dostęp do pomocy kontekstowej, która wyjaśnia, co jest wymagane lub oczekiwane w danym polu.
11. Informacje o statusie lub stanie – użytkownicy korzystający z technologii asystujących powinni otrzymywać informacje o statusie lub stanie interakcji, aby móc łatwo śledzić zmiany i aktywności na stronie.
To tylko niektóre, bardzo ogólne przykłady wytycznych dotyczących Accessibility. Należy pamiętać, że cały dokument WCAG jest obszerny i bardzo szczegółowy. Część podpunktów ma charakter bardzo niskopoziomowy. Są tam między innymi wskazówki dotyczące kodu HTML czy JavaScript. Natomiast część z nich sugeruje w ogólny sposób, jakie funkcjonalności czy zachowania systemu powinny być wdrożone.
Korzyści z przestrzegania wytycznych WCAG
Już teraz standardy WCAG na poziomie AA są obligatoryjne dla stron WWW instytucji publicznych, takich jak np. urzędy. Warto również zauważyć, że 28 czerwca 2025 r. w życie wejdzie Europejski Akt Dostępności, który nakłada obowiązek przestrzegania standardów dostępności na szerszy zakres produktów, w tym e-commerce. Jest więc bardzo możliwe, że w najbliższych latach termin Accessibility zrewolucjonizuje rynek produkcji oprogramowania, a wiele aplikacji WWW będzie musiało przejść solidną przebudowę.
Dlaczego warto wybrać FNX Group do projektowania dostępnych stron?
Jako doświadczona firma specjalizująca się w tworzeniu aplikacji internetowych jesteśmy gotowi pomóc Ci w stworzeniu strony, która uwzględni wytyczne WCAG, przez co stanie się ona dostępna dla większej liczby potencjalnych klientów, a także unikniesz późniejszych problemów, spowodowanych wejściem w życie przepisów nakazujących wdrożenie WCAG na poziomie AA.
Do analizy Accessibility wykorzystujemy narzędzia automatyczne takie jak WAVE, Axe devTools, Browserstack i inne. Wykonujemy także własną analizę kodu oraz testy manualne dostępności. Staramy się wdrażać standardy WCAG od początku cyklu tworzenia produktu.
Warto przeczytać
AI
AI pod lupą! - Nowa era regulacji i przejrzystości w Unii Europejskiej
