Optymalizacje stron internetowych na potrzeby osób niepełnosprawnych – jak je przeprowadzić?

Osoby niepełnosprawne jako użytkownicy internetu

W 2017 roku GUS podał, że w Polsce żyje ponad 3 miliony niepełnosprawnych osób powyżej 16 roku życia. Świeższych danych nie podano. Według badania opublikowanego przez Ewę Migaczewską i Tomasza Maslyka z centrum badań Polscy Niepełnosprawni przy AGH w 2013 roku osoby niepełnosprawne stanowiły aż 33% użytkowników sieci. Jednocześnie w 2018 nadal powstają artykuły dowodzące, że mimo rosnącej świadomości o UX, strony internetowe wciąż nie są dostosowane do potrzeb osób niepełnosprawnych. Co zrobić, aby dostosować stronę internetową do potrzeb osób niepełnosprawnych? Najpierw trzeba ich poznać i dowiedzieć się, w jaki sposób korzystają z sieci. Przykładowo osoby niewidome korzystają z desktopowych przeglądarek czytających kod takich jak Webbie. Niektóre przeglądarki takie jak Firefox udostępniają narzędzia pozwalające im poruszać się po sieci. Niewidomym odbiór treści na stronach utrudniają teksty na grafikach, sliderach, w skryptach nieczytanych przez ich przeglądarki. Niedowidzącym – tym cierpiącym na daltonizm, protanopię, tritanopię i inne schorzenia powodujące zaburzenia widzenia – za małe kontrasty, nadmiar grafik czy nieczytelny layout strony. Tematem dostępności stron internetowych zajmują się takie organizacje jak World Wide Web Consortium, które opublikowało Web Content Accessibility Guidelines, czy polska Fundacja Widzialni. A co developerzy i specjaliści SEO mogą zrobić, by dostosować stronę www dla niepełnosprawnych?

Dostosowanie strony internetowej do potrzeb osób niepełnosprawnych

O tym, co należy dostosować do niepełnosprawnych użytkowników i jak tworzyć dostępne dla wszystkich serwisy internetowe, mówią zasady WCAG 2.0, czyli Web Content Accessibility Guidelines. Zostały określone przez Web Accessibility Initiative, czyli inicjatywę W3C i mają status międzynarodowej normy ISO. Wyznaczają podstawowe kwestie, które trzeba przemyśleć, budując stronę. Stąd z kolei wynikają konkretne optymalizacje, których przykłady podam dalej.

Zasady WCAG 2.0

Cztery podstawowe zasady dostępności według WCAG to kolejno: percepcja, funkcjonalność, zrozumiałość i rzetelność. By wypełnić zasadę percepcji, należy przedstawić użytkownikom informacje na stronie i elementy interfejsu w dostępny dla nich sposób. Funkcjonalność oznacza, że elementy interfejsu i nawigacji muszą być użyteczne – każdy z nich powinien mieć przypisaną rolę i powodować konkretną akcję, pojawiać się w jakimś określonym celu. Zrozumiałość, jak łatwo się domyślić, znaczy, że zamieszczona treść powinna być dla użytkownika łatwo przyswajalna, a obsługa interfejsu intuicyjna. Wreszcie aby strona/aplikacja była rzetelna, musi być rzeczowo, merytorycznie i poprawnie technicznie opracowana, tak by mogła być właściwie interpretowana zarówno przez użytkowników, jak i przez technologie, z których korzystają. Co to oznacza w praktyce?

Optymalizacje strony zgodne WCAG 2.0, które możesz wykonać

Poniżej opisuję 5 konkretnych aspektów, które należy dopracować, by stworzyć stronę zoptymalizowaną pod kątem potrzeb osób niepełnosprawnych: niewidomych i niedowidzących. Na każdy z nich składa się w sumie wiele elementów. 1. Zrozumiały dla przeglądarek kod Jak się okazuje, o poprawny i czysty kod źródłowy należy dbać nie tylko ze względu na roboty indeksujące. Warto to robić także z uwagi na przeglądarki dla osób niewidomych, które ten kod czytają liniowo. Na jakie elementy zwrócić uwagę przy tej okazji?

• Zrozumiałą i rzeczywistą kolejność elementów na stronie, czyli zgodność kolejności elementów widzianych z tymi, które zapisane są w kodzie.

[caption id="attachment_12546" align="aligncenter" width="715"] Przykład poprawnego układu treści tabeli w kodzie. Przeglądarka dla niewidomych po etykiecie od razu przeczyta jej wartość. W wersji niepoprawnej najpierw opisano by w kodzie kolumnę etykiet, później wartości, a ich układ graficzny zmodyfikowano by za pomocą CSS-a.[/caption]

• Zbudowanie strony tak, by można się było na niej poruszać także wyłącznie za pomocą klawiatury. Tu należy zadbać przede wszystkim o to, by wszystkie linki były aktywne bez użycia myszy. Każdy znacznik <a> musi tu więc zawierać atrybut href. Bywa to pomijane, kiedy przy łączach wykorzystywane są zdarzenia typu onclick. By nie utrudniały osobom niepełnosprawnym korzystania ze strony, należy przedstawić je następująco: zamiast:

2. Poprawna struktura serwisu Na poprawną strukturę serwisu składają się element title, meta description, nagłówek H1, nagłówki H2, H3 i niższych rzędów oraz semantyczne formatowanie tekstu, czyli doskonale znane pozycjonerom i co rusz optymalizowane.

• Tytuł strony będzie pierwszą informacją, jaką przeczyta robot przeglądarki dla niewidomych – zupełnie tak, jak w przypadku botów Google, musi więc zawierać informacje o tym, czym strona jest, jakie są jej cel i przeznaczenie. Zostanie także wykorzystany do nazwania pliku ze stroną, jeżeli użytkownik postanowi zapisać ją do odczytu offline.
• By nagłówki były dopasowane do potrzeb osób niepełnosprawnych, powinny ułatwiać orientację w hierarchii strony, a w żadnym wypadku nie być wykorzystywane losowo do graficznego wyróżniania tekstu. By zmieniać rozmiar tekstu należy wykorzystywać CSS, a nie nagłówki różnych rzędów.
• Znaczniki <b> i <em>, tak ważne przy wyróżnianiu słów kluczowych, w nadmiarze mogą zaszkodzić – tradycyjnie jako oznaka manipulacji dla Google, ale także jako zaciemnienie przekazu czytanego przez przeglądarki dla niewidomych. Nie należy też obejmować nimi tekstu, który już znajduje się w obrębie jakiegoś nagłówka.
• By ułatwić czytelność, nie należy też nadużywać znaczników <span> i miejscowo formatować tekstu.

3. Przejrzysty layout strony Czytelny wygląd strony jest kluczowy, by zapewnić pozytywne doświadczenie użytkownika. W przypadku osób z problemami ze wzrokiem ma jeszcze większe znaczenie. By tacy użytkownicy w ogóle mogli się na stronie poruszać:

• Strona powinna mieć klarowne i uszeregowane menu z czytelnym podziałem na kategorie. Choć mogłoby się wydawać, że WERSALIKI zwiększą czytelność nazw kategorii, nie jest to prawdą. Słowa w układzie takim jak w zdaniu czytane są szybciej, bo mają więcej elementów wyróżniających. Lepiej więc nie stosować w menu nazw zapisanych drukowanymi literami. Należy też zadbać o odpowiednie odległości między kolejnymi elementami menu oraz o wyraźny kontrast między nimi a tłem, a także o dostateczną (ale nieprzesadzoną) grubość liter. [caption id="attachment_12559" align="aligncenter" width="750"] Przykład dobrze czytelnego menu na stronie[/caption] [caption id="attachment_12561" align="aligncenter" width="750"] Przykład menu o mniejszej czytelności[/caption]
• Krój pisma wykorzystany na stronie musi być czytelny i mieć wszystkie znaki wykorzystywane w danym języku. Dobranie kroju do projektowania na potrzeby sieci jest osobnym i zbyt obszernym tematem, by go tu w całości poruszać, jednak podstawowe wyznaczniki dobrze czytelnego fontu do internetu są następujące: jest bezszeryfowy, ma niewielki kontrast (czyli części liter mają podobną grubość) i dużą wysokość x. Przykładami takich czytelnych fontów będą Lato, Roboto, Arial. [caption id="attachment_12563" align="aligncenter" width="750"] Przykład Roboto, bardzo czytelnego fontu do sieci[/caption]
• Nie warto przesadzać z różnorodnością kolorów na stronie. Dobrze z kolei zadbać o wyraźny kontrast między nimi, jednocześnie uważając, by nie zestawiać kolorów problematycznych, takich, które nie są rozróżniane przez osoby cierpiące na ślepotę barwną. Mylą one np. czerwień z zielenią i odwrotnie, kolor niebieski z czarnym. [caption id="attachment_12565" align="aligncenter" width="750"] Spektrum tęczy widziane przez osobę mylącą czerwień z zielenią (cierpiącą na daltonizm)[/caption] [caption id="attachment_12567" align="aligncenter" width="750"] Spektrum tęczy widziane przez osobę mylącą zieleń z czerwienią[/caption] [caption id="attachment_12569" align="aligncenter" width="750"] Spektrum tęczy widziane przez osobę nierozpoznającą barwy niebieskiej[/caption]
• Aby ułatwić osobie korzystającej z przeglądarki dla niewidomych poruszanie się w formularzach, trzeba poprawnie oznaczyć informacje o błędach. Muszą pojawiać się one przed polem, by użytkownik najpierw mógł je usłyszeć, a później poprawić błędnie wprowadzone dane.

4. Intuicyjna nawigacja na stronie Orientację na stronie można ułatwić, pamiętając o następujących kwestiach:

• Osobom z dysfunkcjami wzroku w nawigowaniu po stronie pomagają elementy takie jak mapa serwisu, wewnętrzna wyszukiwarka, powiązane podstrony. Zaplanowane i sensownie poprowadzone linkowanie wewnętrzne pomoże więc nie tylko w pozycjonowaniu serwisu, ale i w poruszaniu się na stronie.
• W lokalizacji na stronie pomogą także breadcrumbs, które wskażą użytkownikowi ścieżkę dotarcia do podstrony, na której się znalazł. O tym, czym są tzw. okruszki chleba, pisaliśmy jakiś czas temu.
• Elementy graficzne, które mają taką samą funkcję (np. strzałki, rozwinięcia opisów itd.), powinny mieć też spójną formę, za to nie być wykorzystywane w innej roli. Dzięki temu użytkownicy będą wiedzieli, co mogą znaleźć pod danym symbolem.

[caption id="attachment_12575" align="aligncenter" width="605"] Strzałki w obrębie całej strony oznaczają, że dany element jest podlinkowany. Przykłady poczodzą ze strony https://leonidas-pralineo.pl/[/caption] 5. Adekwatne opisy alternatywne Pozycjonując strony, zawartość atrybutów alt optymalizujemy zazwyczaj pod kątem słów kluczowych, na które ma wyświetlać się dana strona. Tymczasem z perspektywy osób z dysfunkcjami wzroku opisy alternatywne są bardzo ważne jako zastępcza informacja o tym, co się na materiale graficznym znajduje. Warto pamiętać o tym, konstruując te opisy, i zawierając w nich nie tylko frazy kluczowe, ale i dodatkowe informacje. 6. Alternatywne wersje strony Oczywiście nie zawsze da się spełnić wymienione wyżej wymagania graficzne. W takiej sytuacji warto zamieścić na stronie buttony umożliwiające użytkownikowi samodzielne modyfikowanie jej wyglądu: wielkość liter, ich kontrast (czarno-biały i czarno-żółty). [caption id="attachment_12579" align="aligncenter" width="750"] 2 wersje strony http://www.gupkrakow.pl/[/caption]

Strony internetowe dla niepełnosprawnych. Jak sprawdzić, czy strona jest odpowiednio dostosowana?

Dostosowanie strony www dla niepełnosprawnych można sprawdzić na trzy sposoby:

• z udziałem specjalisty, który dzięki liście kontrolnej WCAG analizuje elementy serwisu (metodę na tej podstawie opracowała Fundacja Widzialni),
• z udziałem zróżnicowanej grupy użytkowników niepełnosprawnych,
• za pomocą automatycznych walidatorów, takich jak validator.w3.org lub wave.webaim.org/. Najdokładniejsze elementy przynosi połączenie tych trzech metod.

Dostosowanie stron internetowych dla osób niepełnosprawnych. Podsumowanie

Część z optymalizacji, które zwiększą dostępność strony dla osób niepełnosprawnych, pomoże również w pozycjonowaniu jej. Najważniejsze z nich to czysty kod, poprawna struktura serwisu i hierarchia nagłówków, przejrzysty layout i intuicyjna nawigacja. Warto nad nimi popracować, by nie tylko zoptymalizować stronę na potrzeby osób niewidomych i niedowidzących, ale także zwiększyć jej widoczność w ogóle.