Główne założenia WCAG 2.1

15.04.2021

Wszystkie strony internetowe i aplikacje mobilne podmiotów publicznych muszą być dostępne cyfrowo. Wynika to bezpośrednio z Ustawy z 4 kwietnia 2019r. o dostępności cyfrowej stron internetowych i aplikacji mobilnych podmiotów publicznych.

WCAG to skrót od Web Content Accessibility Guidelines czyli wytycznych dotyczących dostępności treści internetowych. Obecnie obowiązuje wersja 2.1 tych wytycznych.

Opisują one jak stworzyć stronę www lub aplikację mobilną, aby były możliwe do odbioru przez osoby z niepełnosprawnościami, np. wzroku, słuchu, ruchu ale też dla osób z niepełnosprawnością intelektualną oraz trudnościami poznawczymi.

WCAG 2.1 bazuje na 4 głównych zasadach:

  • postrzegalność
  • funkcjonalność
  • zrozumiałość
  • solidność

Powyższe zasady nie są zbiorem ściśle technicznych uwag, zmuszają raczej do otworzenia się na myślenie o różnych użytkownikach stron internetowych. Dlatego też twórca strony powinien zastanowić się np. jak dostosuje zdjęcia na stronie, dla osób które ich nie widzą? Jak zaplanuje poruszanie się po witrynie dla użytkowników, którzy nie korzystają z myszy? Jak zapewni dostępność dla osób, które potrzebuję powiększyć rozmiar strony lub zmienić jej kolory? To tylko niektóre z bardzo wielu zagadnień, o których musimy pamiętać tworząc dostępną stronę internetową. Co istotne – zasady dostępności cyfrowej dotyczą zarówno kodu strony, jej treści jak i sposobu ich działania. Dlatego też tworzenie strony wymaga współpracy całego zespołu odpowiedzialnego za poszczególne elementy.

Spróbujmy rozłożyć na czynniki pierwsze każdą z czterech kluczowych zasad dostępności cyfrowej. Podzielone są one na 13 wytycznych, a każda z nich prezentuje konkretne wymagania (zwane „kryteriami sukcesu”).

1. Postrzegalność

Zapewnij możliwość korzystania ze strony internetowej lub aplikacji mobilnej za pomocą zmysłów dostępnych dla użytkowników. Możesz to uzyskać dzięki:

  • tekstom alternatywnym dla treści nietekstowych (np. opis zdjęć i grafik będzie pomocny dla osób niewidomych)
  • napisom do materiałów audio i video (będzie to nieocenione wsparcie dla osób niesłyszących)
  • logicznej strukturze treści strony (nagłówki, listy itd. będą pomocne dla osób korzystających z czytników ekranów)
  • odpowiednim oznaczeniom każdej funkcji (np. formularz), tak aby relacje pomiędzy treścią były poprawnie zdefiniowane
  • wyróżnieniom opierającym się jedynie na kolorze
  • odpowiedniemu kontrastowi na stronie i możliwości jego indywidualnego dopasowania
  • czytelności strony, gdy zostanie ona powiększona o 200%
  • niepublikowaniu tekstów w formie obrazów (np. skany dokumentów jako nieczytelne pliki PDF będą niemożliwe do odczytanie dla osób korzystających z czytników ekranów)
  • zapewnieniu responsywności – dostosowaniu się widoku strony do wielkości ekranu urządzenia (a więc strona powinna być czytelna nie tylko na monitorach komputera, ale też na tabletach i smartfonach)

2. Funkcjonalność

Stwórz możliwość znajdowania i używania treści niezależnie od tego jak użytkownik nawiguje na stronie (np. korzysta z samej klawiatury albo samej myszy). Pomocne w tym będą:

  • możliwość obsłużenia wszystkiego za pomocą tylko klawiatury
  • umożliwienie odtwarzania, wstrzymania lub zatrzymania poruszajacych się elementów
  • nieumieszczanie na stronie migających treści (będą one uciążliwe np. dla osób z epilepsją światłoczułą lub z wrażliwym wzrokiem)
  • umieszczenie linku pozwalającemu szybko przejść do określonej treści
  • zapewnienie zrozumiałych i pasujących tytułów stron oraz opisów linków mówiących dokąd prowadzą
  • w przypadku formularzy zapewnienie etykiet i opisów wyjaśniających co należy wpisać w konkretne pole
  • dobra widoczność elementu obecnie wybranego za pomocą klawiatury
  • proste gesty na ekranach dotykowych
  • możliwość modyfikacji skrótów klawiszowych

3. Zrozumiałość

Spraw, aby treści i sposób działania strony była zrozumiała dla użytkowników. Możesz to osiągnąć dzięki:

  • prosty język (unikaj języka urzędniczego oraz wysoko specjalistycznego)
  • treści przedstawiaj krótko i zwięźle, eliminuj słowa zbędne
  • wyjaśniaj stosowane skróty, akronimy
  • w kodzie strony umieść informację o języku treści strony
  • zapewnij spójny wygląd poszczególnych podstron
  • umieść zrozumiałe etykiety w polach formularza, a także jasne komunikaty o błędach formularza i instrukcje jak je poprawić

4. Solidność

Zasada ta nazywana jest „kompatybilnością”. Zapewnij możliwość korzystania ze strony internetowej lub aplikacji mobilnej w wielu programach użytkowników (np. przeglądarkach internetowych oraz czytnikach ekranu osób niewidomych). Uzyskasz to dzięki:

  • zastosowaniu prawidłowego kodu zgodnego ze standardem sieciowym HTML
  • dostępnych dla użytkowników korzystających z technologii asystujących informacji o statusie
  • zgłaszaniu przez technologie asystujące pojawiających się komunikatów czy okien modalnych