Strona internetowa dostępna dla wszystkich i przyjazna osobom niepełnosprawnym
TECHNOLOGY
DESIGN
Dlaczego powinniśmy tworzyć strony dostępne dla osób niepełnosprawnych
Dostępność stron internetowych to temat, który zyskuje na znaczeniu, zarówno z punktu widzenia moralnego, jak i biznesowego. Jeśli nie przekonują Cię aspekty etyczne, oto twarde dane, które powinny Cię zainteresować:
- Dwie trzecie transakcji e-commerce jest porzucanych przez osoby niewidome z powodu braku dostępności - Departament Handlu USA
- 90% stron internetowych jest niedostępnych dla osób niepełnosprawnych, które korzystają z technologii wspomagających - AbilityNet,
- Ok. 80 milionów mieszkańców Uni Europejskiej posiada niepełnosprawności - europarl.europa.eu.
- Według statystyk WHO. W 2015 r. 217 mln ludzi na całym świecie miało umiarkowane lub ciężkie zaburzenia widzenia, a do 2050 r. liczba ta ma wzrosnąć do 588 mln - WHO,
Strona internetowa dostępna dla niepełnosprawnych to tak na prawdę strona dostępna dla wszystkich
Tworzenie dostępnych stron internetowych to nie tylko kwestia dostosowania ich do potrzeb osób niepełnosprawnych, ale także poprawa jakości użytkowania dla wszystkich odwiedzających. Zasady dostępności, takie jak logiczna struktura strony, obsługa klawiaturą czy przyjazny UX/UI, sprawiają, że strona staje się łatwiejsza w obsłudze i bardziej intuicyjna. Dodatkowo, te same zasady są pozytywnie oceniane przez roboty indeksujące, co może poprawić pozycjonowanie strony w wynikach wyszukiwania.
Używanie opisów zdjęć (alt)
Opis zdjęć (atrybut alt) jest kluczowy dla osób niewidomych, które korzystają z czytników ekranu. Podczas gdy tekst jest przetwarzany na mowę, czytnik odczytuje zawartość atrybutu alt. Aby był on użyteczny, opis musi być konkretny, zwięzły i prawdziwy. Odpowiednie użycie alt tekstu wspomaga nie tylko dostępność, ale również SEO strony.
Nawigacja za pomocą klawiatury
Tworzoną przez siebie stronę internetową postaraj się odwiedzić i nawigować po niej bez użycia myszki bądź touchpada. Postaraj się wczuć w sytuacje osoby niepełnosprawnej i sprawdź czy może skorzystać ze wszystkich niezbędnych funkcjonalności.
Nawigowanie powinno odbywać się za pomocą przycisku “tab” i “shift + tab”, a kliknięcie na link na którym aktualnie jest “focus” powinno odbyć się za pomocą przycisku “enter”. Dodatkowe przyciski mogą się przydać przy uzupełnianiu formularza, sprawdź czy formularz jest przyjazny osobie niepełnosprawnej.
Kontrast tekstu
Międzynarodowy standard dostępności WCAG wyjaśnia jak sprawić, by treści były bardziej dostępne. Prowadzone zostały trzy poziomy wytycznych: A, AA i AAA. Większość stron internetowych stara się osiągnąć poziom AA, dla którego poziom kontrastu tekstu wynosi minimum 4,5:1. Wyjątkiem są bardzo duże teksty których wartość kontrastu może wynieść minimum 3:1. Poziom kontrastu tekstu możesz zbadać wchodząc w devtoolsy a następnie, dokonaj inspekcji interesującego Cię elementu (“command + shift + C” - iOS).
APCA (Advanced Perceptual Contrast Algorithm)
Czyli zaawansowany algorytm kontrastu percepcyjnego to nowy sposób obliczania kontrastu w oparciu o badania nad percepcją kolorów. W porównaniu z wytycznymi AA/AAA, APCA jest bardziej zależne od kontekstu.
Kontrast jest obliczany na podstawie następujących cech:
- właściwości przestrzenne (grubość czcionki i rozmiar tekstu)
- kolor tekstu (postrzegana różnica jasności między tekstem a tłem)
- kontekst (światło otoczenia, otoczenie i zamierzony cel tekstu)
Przeglądarka chrome zawiera eksperymentalną funkcję zastępującą wytyczne dotyczące współczynnika kontrastu AA/AAA przez APCA.
Język strony
Strona powinna mieć zadeklarowany język aby czytnik ekranu mógł na starcie zidentyfikować w jaki tryb odczytu ma przejść. Jak różnić się może sposób odczytu w zależności od języka możesz sprawdzić nawet teraz w translatorze od google, kopiując ten tekst, ustawiając tekst w innym języku niż zadeklarowany i włączając odczyt głosowy.
Jeśli na naszej stronie znajduje się część w innym języku tak samo powinniśmy zadbać żeby miała ona jasno oznaczony język.
Przyjazne linki
Postaraj się by linki udostępnione w tekście były łatwo czytane dla screenreaderów. Nie nie będzie to komunikat w typie “kliknij tutaj” ponieważ jest on zbyt mało opisowy i nie przekazuje informacji co kryje się pod linkiem, tak samo niech nie będzie to pełny adres URL ponieważ czytniki stron będą czytały cały adres przez co komunikat stanie się niezrozumiały. Niech link swoją treścią w zwięzły sposób przekazuje co znajduje się w środku. Przykłady tworzenia linków
Zbędne fajerwerki
Chcąc wyróżnić się na tle innych stron internetowych często ulegamy pokusie umieszczenia w niej zbyt dużej ilości fajerwerków wizualnych a czasem również akustycznych. Pamiętajmy, że pewne elementy na stronie które wyglądają estetycznie i atrakcyjnie mogą rozpraszać albo powodować problemy dla czytników stron.
Takim przykładem mogą być emoji które będą potraktowane jako słowo, przez co nasz tekst przy zbyt dużej ilości emoji może stać się niezrozumiały. Przykład zbyt dużej ilości emoji
Muzyka która trwa dłużej niż 3 sekundy powinna mieć możliwość wyłączenia i włączenia z poziomu klawiatury. Dźwięki płynące ze strony internetowej mogą zagłuszać mowę generowaną przez czytniki ekranu.
Transkrypcja i napisy
Jeśli na stronie znajdują się materiały wideo lub audio, warto zadbać o ich transkrypcję i napisy. Dzięki temu osoby niesłyszące lub mające trudności ze słuchem będą mogły korzystać z tych materiałów, co zwiększy dostępność treści i pozytywnie wpłynie na ocenę strony przez roboty indeksujące.
Poprawność semantyczna strony internetowej
Budując stronę internetową, używaj tagów adekwatnych dla miejsca w których zostały użyte. Logiczna struktura strony wyrażona w tagach jak: section, article, nav, footer itd. pozytywnie wpłynie na pozycję w wyszukiwarkach oraz będzie lepiej zrozumiana dla czytników ekranowych używanych przez osoby niepełnosprawne.
Testuj stronę
Przetestuj swoją stronę internetową. Udaj się do devtools, gdzie znajduje się opcja emulowania wad wzroku i sprawdź jak będą widzieć Twoją stronę osoby z wadami wzroku. Przejdź przez wszystkie funkcjonalności bez użycia myszki. Sprawdź kontrast i wielkość czcionek.
Pamiętaj też, że co chwilę pojawiają się nowości i warto trzymać rękę na pulsie. W opcjach devtools często pojawiają się nowe opcje eksperymentalne.
Jak wygląda przyszłość osób niepełnosprawnych w Internecie?
Technologia nieustannie zmienia sposób, w jaki osoby z niepełnosprawnościami wchodzą w interakcję z cyfrowym światem. Przykład Apple, który wprowadza funkcję wykrywania drzwi, to tylko jedno z wielu rozwiązań pomagających osobom niewidomym lub niedowidzącym. Dzięki innowacjom technologicznym, granice w dostępności stopniowo znikają. Już teraz warto inwestować w dostępność stron internetowych, aby przygotować się na przyszłość, w której osoby z niepełnosprawnościami będą mogły w pełni korzystać z globalnej wioski cyfrowej.
Podsumowanie
Projektowanie nowoczesnych stron internetowych to nie tylko spełnianie oczekiwań biznesowych, ale także odpowiedzialność za zapewnienie, by każdy użytkownik miał równy dostęp do treści. Zadbaj o dostępność swojej strony, a nie tylko poprawisz jej widoczność w wyszukiwarkach, ale także otworzysz drzwi dla nowych użytkowników. Strony internetowe dostępne dla osób niepełnosprawnych to przyszłość, która już teraz ma znaczenie w globalnym internecie.