Dostępność cyfrowa strony: kogo obowiązuje i od czego zacząć zmiany

Czym jest dostępność cyfrowa i komu służy

Dostępność cyfrowa to cecha strony internetowej, aplikacji lub dokumentu, dzięki której może z nich skorzystać jak najwięcej osób, bez względu na sprawność wzroku, słuchu, rąk czy pamięci. Rządowy serwis poświęcony temu zagadnieniu opisuje ją jako tworzenie rozwiązań zrozumiałych i prostych, z których większość ludzi korzysta bez dodatkowego dostosowywania, a pozostali przy użyciu własnych rozwiązań pomocniczych. Obejmuje ona trzy warstwy: kod strony, interfejs, czyli wygląd i sposób obsługi, oraz publikowane treści.

Konsorcjum W3C, które opracowuje standardy internetu, w wprowadzeniu do dostępności stron wymienia niepełnosprawności słuchu, wzroku, mowy, ruchu, a także poznawcze i neurologiczne. Chodzi o to, by każda z tych osób mogła treść odebrać, zrozumieć, poruszać się po serwisie i wykonać w nim to, po co przyszła: przeczytać ofertę, wysłać zapytanie, kupić produkt.

Nie tylko osoby z niepełnosprawnościami

W3C podkreśla, że z dostępnej strony korzystają również ludzie bez niepełnosprawności. Wymienia użytkowników urządzeń z małym ekranem, osoby starsze, osoby z czasowym ograniczeniem, na przykład ze złamaną ręką albo bez okularów, osoby w trudnych warunkach, takich jak ostre słońce lub miejsce, w którym nie da się włączyć dźwięku, oraz osoby z wolnym łączem.

W codziennej pracy firmy przekłada się to na konkretne sytuacje. Klientka zakładu optycznego z Poznania czyta ofertę w telefonie na przystanku i jasnoszary tekst na białym tle jest dla niej nieczytelny. Starszy pan zamawiający wizytę hydraulika w Łodzi nie trafia palcem w drobny odnośnik z numerem telefonu. Żadna z tych osób nie użyje słowa dostępność, każda po prostu zamknie stronę.

Dostępność a osoby starsze

Zmiany związane z wiekiem pokrywają się w dużej mierze z potrzebami osób z niepełnosprawnościami. W3C w opracowaniu o starszych użytkownikach sieci wymienia cztery obszary. Wzrok słabiej rozróżnia kontrast i kolory. Mniejsza zręczność dłoni utrudnia posługiwanie się myszą i trafianie w małe elementy. Słuch gorzej oddziela mowę od tła, więc nagranie z podkładem muzycznym staje się niezrozumiałe. Słabsza pamięć krótkotrwała i koncentracja utrudniają poruszanie się po rozbudowanym menu oraz dokończenie dłuższego formularza. Według W3C istniejące standardy dostępności odpowiadają na większość tych potrzeb.

Jakie bariery spotykają użytkownicy na stronach firm

Najczęstsze bariery to brak opisu zdjęć, zbyt słaby kontrast, elementy niedziałające z klawiatury, filmy bez napisów oraz formularze, których pól nie da się rozpoznać. Każda z nich uderza w inną grupę odbiorców.

W przypadku osób niewidomych i słabowidzących W3C wymienia w opisie barier wzrokowych między innymi obrazy i przyciski bez tekstu zastępczego, tekst i układ, których nie da się powiększyć bez utraty informacji, brak struktury ułatwiającej orientację, zbyt skomplikowaną nawigację, niewystarczający kontrast oraz brak pełnej obsługi z klawiatury. Osoba korzystająca z czytnika ekranu nie widzi układu strony. Słyszy kolejne elementy w takiej kolejności, w jakiej zapisano je w kodzie, a po stronie porusza się, przeskakując między nagłówkami i odnośnikami. Jeżeli zdjęcie produktu nie ma opisu, usłyszy jedynie nazwę pliku albo nic.

Osoby, które nie posługują się myszą, obsługują stronę klawiaturą lub urządzeniem, które ją zastępuje. W3C zaznacza, że dostępna strona udostępnia z klawiatury wszystkie swoje funkcje, co pozwala działać także sterowaniu głosem. Barierą jest więc rozwijane menu reagujące wyłącznie na najechanie kursorem, okno z informacją o plikach cookie, którego nie da się zamknąć klawiszem, albo brak widocznego zaznaczenia elementu, na którym aktualnie znajduje się użytkownik.

Osoby głuche i słabosłyszące tracą treść filmów oraz nagrań pozbawionych napisów lub zapisu tekstowego. W3C przypomina, że taki zapis służy także wyszukiwarkom, które nie przetwarzają dźwięku. Osobom z trudnościami poznawczymi przeszkadzają z kolei ruchome elementy odciągające uwagę i komunikaty o błędach, z których nie wynika, co należy poprawić.

Znaczna część tych barier wynika z drobnych zaniedbań przy projektowaniu i dodawaniu treści. Opis zdjęcia wpisuje się w systemie zarządzania treścią w jednym polu, a właściwy kontrast wybiera się na etapie projektu graficznego. Dlatego temat najlepiej poruszyć już wtedy, gdy powstaje brief na stronę internetową.

Kogo obowiązują przepisy o dostępności cyfrowej

Obowiązki prawne mają dwie grupy: podmioty publiczne, które muszą zapewnić dostępność wszystkich swoich stron i aplikacji mobilnych, oraz przedsiębiorcy oferujący konsumentom produkty i usługi wymienione w przepisach unijnych i polskich. Dla większości firm prywatnych znaczenie ma pojęcie usług handlu elektronicznego.

Podmioty publiczne

Sektor publiczny obowiązuje ustawa o dostępności cyfrowej stron internetowych i aplikacji mobilnych podmiotów publicznych. Jak wynika z odpowiedzi na najczęstsze pytania w serwisie rządowym, dotyczy ona między innymi jednostek sektora finansów publicznych, niektórych osób prawnych finansowanych w ponad połowie ze środków publicznych, a także organizacji pozarządowych działających na rzecz zdrowia, osób z niepełnosprawnościami i seniorów. Wymaga spełnienia wytycznych WCAG w wersji 2.1 oraz opublikowania deklaracji dostępności, czyli dokumentu opisującego, w jakim stopniu strona jest dostępna.

Dla firmy prywatnej ta ustawa ma znaczenie pośrednie. Jeżeli wykonują Państwo stronę lub system rezerwacji dla urzędu, szkoły czy szpitala, zamawiający będzie oczekiwał zgodności z tymi wymaganiami.

Firmy prywatne: Europejski i Polski Akt o Dostępności

Przedsiębiorców dotyczy unijna dyrektywa w sprawie wymogów dostępności produktów i usług, nazywana Europejskim Aktem o Dostępności. Wśród usług dla konsumentów wskazuje ona usługi łączności elektronicznej, dostęp do audiowizualnych usług medialnych, wybrane elementy transportu pasażerskiego, bankowość detaliczną, książki elektroniczne oraz usługi handlu elektronicznego. Obejmuje też produkty, między innymi komputery, terminale płatnicze, bankomaty i czytniki książek elektronicznych.

Do polskiego prawa dyrektywę wprowadziła ustawa o zapewnianiu spełniania wymagań dostępności niektórych produktów i usług przez podmioty gospodarcze, określana jako Polski Akt o Dostępności. Jej przepisy są już stosowane. Serwis rządowy wyjaśnia, że usługi handlu elektronicznego to usługi oferowane lub świadczone na odległość, przez strony internetowe i urządzenia mobilne, na indywidualne żądanie konsumenta, w celu zawarcia umowy. Pojęcie jest szerokie: obejmuje wszelkie formy oferowania usług przez internet, na przykład ubezpieczenia, usługi zdrowotne oraz sprzedaż odzieży, kosmetyków i leków.

Wyłączenie mikroprzedsiębiorców

Z zakresu ustawy wyłączono usługi oferowane lub świadczone przez mikroprzedsiębiorcę. Dyrektywa definiuje mikroprzedsiębiorstwo jako firmę zatrudniającą mniej niż 10 osób, której roczny obrót lub roczna suma bilansowa nie przekracza 2 mln euro. Jednoosobowa pracownia ceramiki ze sklepem internetowym zazwyczaj więc obowiązkom nie podlega, natomiast sieć drogerii sprzedająca konsumentom przez internet już tak. Przy ocenie własnej sytuacji liczą się szczegóły, dlatego w razie wątpliwości warto poprosić o opinię prawnika.

Przepisy wyłączają też część treści, między innymi treści zarchiwizowane oraz treści stron trzecich, których firma nie finansuje, nie tworzy i nie kontroluje.

Co przepisy oznaczają dla sklepu i serwisu usługowego

Firma objęta Polskim Aktem o Dostępności musi nie tylko dostosować stronę, lecz także poinformować o tym konsumentów, ocenić zgodność swoich usług i w określonych przypadkach zawiadomić organ nadzoru. Nadzór nad usługami handlu elektronicznego sprawuje Minister Cyfryzacji.

Zakres tych czynności opisuje rządowa strona o obowiązkach informacyjnych w Polskim Akcie o Dostępności. Usługodawca podaje konsumentom informację o oferowanej usłudze, o tym, co jest potrzebne do korzystania z niej, oraz o sposobie, w jaki usługa spełnia wymagania dostępności. Informacja sama musi być dostępna dla osób ze szczególnymi potrzebami i znajduje się w regulaminie świadczenia usług albo w równoważnym dokumencie.

Usługodawca ocenia też, czy jego usługi spełniają wymagania. Jeżeli któraś ich nie spełnia, niezwłocznie informuje o tym ministra, podając adres strony, opis każdej niezgodności oraz stan działań naprawczych z przewidywanym terminem zakończenia. Przepisy dopuszczają wyjątek, gdy spełnienie wymagania oznaczałoby zasadniczą zmianę podstawowych cech usługi albo nieproporcjonalne obciążenie. Taką ocenę trzeba jednak udokumentować i zgłosić, więc nie jest to sposób na pominięcie tematu.

Serwis rządowy zwraca uwagę, że dostępność wymaga stałego utrzymania, ponieważ każda zmiana na stronie może ją pogorszyć. Nowy baner, okno czatu albo kolejny formularz mogą wprowadzić barierę, której wcześniej nie było. Dlatego w firmach prowadzących sklep internetowy dobrze jest wyznaczyć osobę, która przed publikacją większych zmian wykonuje krótki przegląd opisany w dalszej części.

Jeśli chcą Państwo zamówić stronę internetową, zachęcamy do kontaktu: tel. 222 500 844 lub mailowo: biuro@pozycjonowaniestron.pl

Standard WCAG: cztery zasady i trzy poziomy zgodności

Miarą dostępności strony są wytyczne WCAG, czyli Web Content Accessibility Guidelines, co oznacza wytyczne dla dostępności treści internetowych. To międzynarodowy standard opracowany przez W3C. Odwołuje się do niego europejska norma EN 301 549 i przepisy wielu państw, w tym polskie.

Z przeglądu standardu na stronach W3C wynika, że wytyczne uporządkowano według czterech zasad. Treść ma być postrzegalna, czyli możliwa do odebrania co najmniej jednym zmysłem. Ma być funkcjonalna, a więc dająca się obsłużyć nie tylko myszą. Ma być zrozumiała w warstwie języka i działania. Ma wreszcie być solidna, czyli poprawnie odczytywana przez przeglądarki i technologie wspomagające. Pod zasadami znajduje się 13 wytycznych, a pod nimi kryteria sukcesu, czyli konkretne wymagania, które da się przetestować.

Każde kryterium ma jeden z trzech poziomów: A, AA lub AAA. Poziom A to minimum. Zgodność na poziomie AA wymaga spełnienia wszystkich kryteriów A i AA i to ten poziom jest punktem odniesienia w przepisach. W objaśnieniach dotyczących zgodności W3C zaznacza, że nie zaleca wymagania poziomu AAA dla całych serwisów, ponieważ w przypadku części treści nie da się spełnić wszystkich jego kryteriów. Zgodność odnosi się przy tym do pełnych stron: nie można jej deklarować z pominięciem fragmentu, na przykład stopki lub okna z czatem.

Która wersja WCAG jest właściwa

W obiegu funkcjonują wersje 2.0, 2.1 i 2.2. Każda kolejna dodaje kryteria, nie zmieniając wcześniejszych, więc strona zgodna z wersją 2.2 jest zgodna także z poprzednimi. Wersja 2.1 dodała 17 kryteriów, a wersja 2.2 kolejnych 9. W3C zaleca stosowanie najnowszej, natomiast polska ustawa dla podmiotów publicznych odwołuje się do wersji 2.1.

Zgodnie z zestawieniem zmian w wersji 2.2 element, na którym znajduje się użytkownik klawiatury, nie może być całkowicie zasłonięty przez inną treść, na przykład przyklejony pasek menu. Klikalne elementy powinny mieć co najmniej 24 na 24 piksele CSS albo odpowiedni odstęp od sąsiednich. Danych podanych wcześniej w tym samym procesie nie należy wymagać ponownie, a logowanie nie może opierać się wyłącznie na zapamiętywaniu lub przepisywaniu, jeśli nie ma rozwiązania alternatywnego.

Od czego zacząć: pierwszy przegląd strony

Pracę najlepiej rozpocząć od krótkiego przeglądu kilku najważniejszych podstron, wykonanego według listy prostych testów W3C i uzupełnionego o wynik narzędzia automatycznego. Taki przegląd nie rozstrzyga, czy strona jest zgodna ze standardem, ale szybko pokazuje najpoważniejsze bariery.

Na początek warto wskazać podstrony, przez które przechodzi klient: stronę główną, stronę usługi lub kategorii, kartę produktu, koszyk z formularzem zamówienia oraz kontakt. Szablon jest wspólny dla wielu adresów, więc błąd znaleziony na jednej karcie produktu występuje zazwyczaj na wszystkich. W3C opublikowało zestaw prostych testów do pierwszego przeglądu, które wykona osoba bez przygotowania technicznego w zwykłej przeglądarce.

1. Tytuł strony

   Tytuł widoczny na karcie przeglądarki powinien krótko opisywać zawartość i różnić się od tytułów innych podstron.

2. Teksty zastępcze obrazów

   Każdy obraz powinien mieć atrybut alt. Obraz niosący informację otrzymuje opis oddający jego sens, a obraz ozdobny ma atrybut pusty, aby czytnik go pominął.

3. Nagłówki

   Tytuły sekcji powinny być oznaczone w kodzie jako nagłówki i tworzyć logiczną hierarchię, bez przeskakiwania poziomów.

4. Kontrast

   Stosunek kontrastu tekstu zwykłej wielkości do tła powinien wynosić co najmniej 4,5 do 1.

5. Powiększenie tekstu

   Po powiększeniu do około 200 procent tekst nie może być obcięty ani nachodzić na inne elementy.

6. Obsługa z klawiatury

   Posługując się wyłącznie klawiszami Tab, Enter i strzałkami, należy dotrzeć do każdego odnośnika, przycisku i pola. Kolejność musi być logiczna, a zaznaczenie bieżącego elementu widoczne.

7. Formularze

   Każde pole potrzebuje etykiety powiązanej z nim w kodzie. Pola wymagane nie mogą być oznaczone samym kolorem, a komunikat o błędzie nie może usuwać wpisanych danych.

8. Ruch i multimedia

   Treść, która porusza się samoczynnie dłużej niż pięć sekund, musi dać się zatrzymać. Film potrzebuje napisów, a dźwięk nie powinien włączać się sam.

W3C zastrzega, że testy te nie są rozstrzygające. Strona, która je przejdzie, nadal może mieć poważne bariery, a zestaw pomija między innymi jakość tekstów odnośników i budowę tabel z danymi.

Co pokaże narzędzie automatyczne

Uzupełnieniem przeglądu ręcznego jest PageSpeed Insights, publiczne narzędzie Google dostępne bez opłat i bez logowania. Po wpisaniu adresu w pole na ekranie startowym i uruchomieniu analizy raport pokazuje cztery kategorie. Jedną z nich dokumentacja narzędzia nazywa Dostępność, obok kategorii Wydajność, Sprawdzone metody i SEO. Wynik 90 lub wyższy uznawany jest za dobry, od 50 do 89 za wymagający poprawy, a poniżej 50 za słaby.

Wynik ten trzeba czytać ostrożnie. Z dokumentacji wynika, że ocena ułatwień dostępu w Lighthouse, czyli silniku stojącym za raportem, jest średnią ważoną audytów. Każdy kończy się wynikiem pozytywnym albo negatywnym, bez punktów częściowych, a kontrole ręczne wymienione w raporcie nie wpływają na liczbę punktów. Wysoki wynik oznacza więc tylko tyle, że automat nie znalazł błędów, które potrafi wykryć. W3C w omówieniu oceny dostępności stwierdza, że żadne narzędzie samo nie ustali, czy serwis spełnia standardy, i że potrzebna jest ocena kompetentnego człowieka.

Najbardziej przydatna część raportu to lista niezaliczonych audytów ze wskazaniem konkretnych elementów. Warto przepisać ją do wspólnej tabeli z wynikami testów ręcznych, podając adres podstrony, opis elementu i rodzaj bariery. Taka tabela staje się planem napraw.

Najpoważniejsze bariery i kolejność napraw

Naprawy warto zacząć od barier, które całkowicie uniemożliwiają skorzystanie ze strony, następnie zająć się tymi, które utrudniają odbiór treści, a na końcu dopracować wygodę. Odpowiada to w przybliżeniu przejściu od kryteriów poziomu A do kryteriów poziomu AA.

Sam standard nie przypisuje poziomom wagi ani pilności, a wybór docelowego poziomu W3C pozostawia organizacji. Kolejność opisana poniżej jest więc naszą praktyką, opartą na prostym kryterium: ilu osobom dana bariera zamyka drogę do kontaktu lub zakupu.

Na pierwszym miejscu stawiamy obsługę z klawiatury. Jeżeli do menu, przycisku zamówienia albo pola formularza nie da się dotrzeć bez myszy, osoba korzystająca z czytnika ekranu lub sterowania głosem nie wykona żadnej czynności. Drugie miejsce zajmują formularze, ponieważ przez nie przechodzi każde zapytanie i zamówienie. Pole bez etykiety jest dla czytnika anonimowym polem tekstowym. Więcej o budowie pól piszemy w tekście o tym, ile pól powinien mieć formularz kontaktowy.

<img src="lazienka-po-remoncie.jpg" alt="Łazienka po remoncie: biała wanna i szare płytki">
<img src="ozdobna-linia.png" alt="">

<label for="telefon">Numer telefonu (pole wymagane)</label>
<input type="tel" id="telefon" name="telefon" required>

Trzecia grupa to teksty zastępcze i nazwy elementów. Dotyczy to zdjęć, ale przede wszystkim ikon pełniących funkcję przycisków: lupy, koszyka, symbolu menu. Ikona bez nazwy jest dla czytnika jedynie słowem przycisk. Czwarta grupa obejmuje strukturę: tytuły podstron, nagłówki i zrozumiałe teksty odnośników. Ich uporządkowanie pomaga jednocześnie czytelnikom i wyszukiwarkom, o czym piszemy w tekście o tym, jak wygoda użytkownika przekłada się na widoczność.

Piąta grupa to kontrast i wielkość tekstu. Jasny odcień firmowy często nie spełnia wymaganego stosunku 4,5 do 1 na białym tle, a rozwiązaniem bywa ciemniejszy wariant tego samego koloru. Szósta grupa to multimedia: napisy do filmów i możliwość zatrzymania przesuwających się banerów. Siódma to dokumenty do pobrania, takie jak cenniki w plikach PDF, które najprościej zastąpić zwykłą podstroną z tekstem.

• Całą ścieżkę od strony głównej do wysłania formularza da się przejść samą klawiaturą.
• Bieżący element jest wyraźnie zaznaczony i nie chowa się pod paskiem menu.
• Każde pole formularza ma etykietę, a komunikat o błędzie wskazuje, co poprawić.
• Zdjęcia niosące informację mają opis, a ikony pełniące funkcję przycisków mają nazwę.
• Każda podstrona ma własny tytuł, a nagłówki tworzą logiczny układ.
• Tekst ma kontrast co najmniej 4,5 do 1 i daje się powiększyć do 200 procent.
• Filmy mają napisy, a ruchome elementy da się zatrzymać.
• Przyciski w wersji na telefon są na tyle duże, że łatwo w nie trafić palcem.

Ostatni punkt łączy dostępność z zasadami, które opisujemy w tekście o tym, jak projektować wersję mobilną strony.

Typowe pomyłki przy wdrażaniu dostępności

Najczęstsza pomyłka polega na potraktowaniu dostępności jako dodatku instalowanego jednym kliknięciem, a nie jako cechy samej strony. Pozostałe błędy wynikają zwykle z pośpiechu albo z nadmiernego zaufania do automatów.

Pierwszym przykładem jest poprzestanie na wyniku narzędzia. Automat potwierdzi, że zdjęcie ma tekst zastępczy, lecz nie oceni, czy opis ma sens. Sklep z Poznania, w którym wszystkie zdjęcia otrzymały hurtowo ten sam opis z nazwą firmy, formalnie zaliczy audyt, a klient korzystający z czytnika nadal nie dowie się, co przedstawiają fotografie.

Drugi błąd to założenie, że wystarczy nakładka z przyciskami zmiany kontrastu i wielkości liter. Takie funkcje bywają pomocne, ale nie naprawiają kodu: nie dopiszą etykiet do pól, nie nadadzą nazw ikonom i nie sprawią, że menu zacznie działać z klawiatury. To nasza ocena wynikająca z przeglądów serwisów, w których nakładka była jedynym podjętym działaniem.

Trzeci błąd dotyczy treści dodawanych po wdrożeniu. Redakcja publikuje zdjęcia bez opisów, wstawia tekst jako obraz, oznacza śródtytuły pogrubieniem zamiast nagłówkiem i podpisuje odnośniki słowami tutaj lub więcej. Krótka instrukcja dla osób dodających treści jest więc równie ważna jak poprawki w kodzie. Czwarty błąd to odkładanie tematu do następnej przebudowy, choć opisy zdjęć, tytuły podstron i etykiety pól da się poprawić od razu.

Kiedy potrzebna jest pomoc specjalisty

Wsparcie z zewnątrz jest potrzebne wtedy, gdy firma podlega przepisom i musi rzetelnie ocenić zgodność, gdy bariery tkwią w szablonie lub wtyczkach oraz gdy planowana jest nowa strona. Pierwszy przegląd i poprawki redakcyjne można wykonać własnymi siłami.

Ocena zgodności to praca innego rodzaju niż proste testy. W3C wskazuje dla niej osobną metodykę i podkreśla wartość udziału osób z niepełnosprawnościami w roli testujących. Jej wynikiem jest raport odnoszący się do poszczególnych kryteriów, na którym można oprzeć informację dla konsumentów. Treść takich dokumentów warto skonsultować z prawnikiem.

Druga sytuacja dotyczy ograniczeń technicznych. Jeżeli gotowy motyw generuje menu niedostępne z klawiatury albo wtyczka koszyka tworzy pola bez etykiet, potrzebny jest programista. Podczas tworzenia stron wymagania dostępności wpisujemy do założeń od początku, ponieważ na etapie makiet zmiana kontrastu lub wielkości przycisku jest najprostsza. Temu samemu służy projektowanie UX.

Przegląd dostępności warto połączyć z innymi pracami. Wiele ustaleń pokrywa się z tym, co obejmuje kompleksowy audyt SEO: tytuły podstron, struktura nagłówków, opisy obrazów. Nie wynika z tego, że dostępność podnosi pozycje w wynikach wyszukiwania. Pewne jest tylko tyle, że te same elementy służą ludziom i pomagają wyszukiwarce zrozumieć treść.

Jeśli chcą Państwo zamówić stronę internetową, zachęcamy do kontaktu: tel. 222 500 844 lub mailowo: biuro@pozycjonowaniestron.pl