Kompletny przewodnik po dostępności stron internetowych

Dostępność stron internetowych to praktyka budowania stron, z których może korzystać każdy, w tym osoby z niepełnosprawnościami. Obejmuje to szeroki krąg ludzi: kogoś, kto porusza się po stronie klawiaturą zamiast myszą, użytkownika czytnika ekranu, który słyszy stronę zamiast ją widzieć, osobę słabowidzącą, która potrzebuje mocnego kontrastu, i każdego, kto ogląda wideo z wyłączonym dźwiękiem. Ten przewodnik wyjaśnia, czym jest dostępność, dlaczego warto poświęcić jej uwagę i jak ją osiągnąć bez żargonu.

Co naprawdę oznacza dostępność

Międzynarodowym punktem odniesienia są wytyczne Web Content Accessibility Guidelines, znane jako WCAG. Aktualna wersja to WCAG 2.2, a większość organizacji celuje w poziom AA, czyli poziom, do którego odwołują się przepisy takie jak Europejski akt o dostępności. Nie musisz uczyć się wytycznych na pamięć, ale warto znać cztery zasady, na których się opierają. Strona powinna być:

• Postrzegalna. Ludzie mogą przyswoić treść niezależnie od tego, czy ją widzą, słyszą, czy czują. Obrazy mają alternatywy tekstowe, wideo ma napisy, a tekst ma wystarczający kontrast.
• Funkcjonalna. Ludzie mogą obsługiwać stronę tym, czym dysponują, myszą, samą klawiaturą, przełącznikiem lub głosem. Nic ich nie więzi i nic nie zależy od zmysłu ani czynności, których nie mogą wykonać.
• Zrozumiała. Treść czyta się jasno, a interfejs zachowuje się przewidywalnie, więc nic ludzi nie zaskakuje ani nie dezorientuje.
• Solidna. Strona jest zbudowana tak, aby przeglądarki i technologie wspomagające, dziś i w przyszłości, mogły ją niezawodnie interpretować.

Niemal wszystko, co praktyczne w tym przewodniku, sprowadza się do jednej z tych czterech idei.

Dla kogo to jest

Kusi, aby wyobrażać sobie małą grupę użytkowników, ale dostępność jest szersza. Mniej więcej jedna na sześć osób żyje ze znaczną niepełnosprawnością, a o wiele więcej osób korzysta z dostępnego projektowania, nie identyfikując się jako osoby z niepełnosprawnością: starszy klient, ktoś z przejściowym urazem, osoba na wolnym łączu albo każdy, kto używa telefonu w ostrym słońcu. Budowanie z myślą o skrajnych przypadkach poprawia też doświadczenie całej reszty. Napisy pomagają w hałaśliwym pomieszczeniu, mocny kontrast pomaga na tanim ekranie, a czytelna kolejność fokusu pomaga każdemu, kto woli klawiaturę.

Fundamenty, które liczą się najbardziej

Dobra wiadomość jest taka, że praca o największym wpływie jest strukturalna, a nie dekoracyjna. Zadbaj o te fundamenty, a masz za sobą większość drogi do poziomu AA.

Używaj właściwego elementu HTML

Prawdziwy przycisk, prawdziwy link i prawdziwa lista mają wbudowane zachowanie i znaczenie, za darmo. Odtwórz je z ogólnych ostylowanych pudełek, a fokus, obsługę klawiatury i poprawne oznajmianie roli musisz dodawać ręcznie, a większość zespołów coś pomija. To nawyk o najwyższym zwrocie w całej dostępności. Omawiamy go szczegółowo w artykule dlaczego semantyczny HTML wciąż ma znaczenie.

Spraw, aby wszystko działało z klawiatury

Wiele osób nigdy nie używa myszy. Każdy element sterujący powinien być osiągalny i obsługiwalny samą klawiaturą, w logicznej kolejności, z obrysem fokusu, który naprawdę widać. To także najszybszy ręczny test, jaki możesz przeprowadzić na własnej stronie. Zobacz nawigacja klawiaturą, test, który oblewa większość stron.

Dobieraj kolory, które każdy może odczytać

Tekst potrzebuje wystarczającego kontrastu względem tła, a kolor nigdy nie może być jedynym sposobem przekazywania znaczenia. To jedna z najczęstszych usterek i jedna z najłatwiejszych do naprawy, gdy znasz docelowe wartości. Nasz przewodnik po dobieraniu kolorów, które każdy może odczytać omawia konkretne liczby.

Pisz prawdziwe alternatywy tekstowe

Obrazy, które niosą znaczenie, potrzebują tekstu alternatywnego, aby użytkownicy czytników ekranu otrzymali te same informacje, a obrazy dekoracyjne trzeba oznaczyć jako dekoracyjne, aby były pomijane. Dobry tekst alternatywny pomaga też wyszukiwarkom zrozumieć Twoje obrazy. Zobacz tekst alternatywny, dobry dla dostępności, dobry dla SEO.

Buduj formularze, które ludzie mogą ukończyć

Formularze to miejsce, w którym wielu odwiedzających decyduje się zostać klientami, więc niezrozumiały lub niedostępny formularz kosztuje Cię bezpośrednio. Pola z etykietami, czytelne błędy i sensowne grupowanie pomagają każdemu dotrzeć do końca. Jak to zrobić, wyjaśniamy w artykule dostępne formularze przynoszą więcej zapytań.

Dlaczego to się opłaca Twojej firmie

Dostępność często przedstawia się jako kwestię zgodności z przepisami, ale przede wszystkim oznacza ona większą publiczność i lepsze doświadczenie. Dostępna strona dociera do większej liczby klientów, konwertuje więcej z nich i naraża Cię na mniejsze ryzyko prawne, w miarę jak przepisy o dostępności zaostrzają się w Unii Europejskiej i poza nią. Argument biznesowy przedstawiamy w artykule dlaczego dostępność opłaca się biznesowo.

Jest też cichy bonus. Ta sama struktura, która pomaga technologiom wspomagającym, sensowne nagłówki, prawdziwe punkty orientacyjne, opisowe linki i porządne alternatywy, to dokładnie to, co czytają wyszukiwarki, aby zrozumieć stronę. Dostępność i SEO opierają się na tych samych fundamentach, więc ta praca opłaca się podwójnie.

Uwaga o e-commerce

Sklepy internetowe mają swoje szczególne punkty nacisku: galerie produktów, filtry, wybór wariantów i kasę, która nie może nikogo zgubić. Niedostępna kasa to porzucona sprzedaż. Jeśli sprzedajesz online, lista kontrolna dostępności dla sklepów internetowych obejmuje części, które liczą się najbardziej.

Jak testować

Nie potrzebujesz laboratorium, aby zacząć. Krótka, powtarzalna rutyna wychwytuje większość problemów:

1. Odłóż mysz i przejdź przez całą stronę klawiszem Tab. Czy możesz dotrzeć do wszystkiego i wszystko obsłużyć, i czy zawsze widzisz, gdzie jesteś?
2. Uruchom automatyczny walidator, taki jak axe lub Lighthouse. Nie wychwyci wszystkiego, ale szybko wskaże oczywiste usterki.
3. Sprawdź kontrast kolorów względem docelowych wartości AA.
4. Wypróbuj czytnik ekranu przez dziesięć minut. W większości systemów jeden jest już wbudowany.

Narzędzia automatyczne znajdują może jedną trzecią problemów, więc łącz je z powyższymi ręcznymi testami. Celem nie jest idealny wynik, tylko strona, z której prawdziwa osoba naprawdę może korzystać.

Od czego zacząć

Jeśli to brzmi jak dużo, zacznij od fundamentów: poprawny HTML, działająca kolejność klawiatury i wystarczający kontrast. Te trzy rzeczy same usuwają większość barier. Potem pracuj nad tekstem alternatywnym, formularzami i resztą jako stałym nawykiem, a nie jednorazowym projektem.

Jeśli chcesz wsparcia, dostępność jest wbudowana we wszystko, co robimy, a oferujemy ją także jako osobną usługę. Zobacz dostępność stron internetowych albo rozpocznij projekt i powiedz nam, na czym Twoja strona stoi dzisiaj.