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

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

Osoby niepełnosprawne stanowią około ⅓ użytkowników internetu. Mimo to wiele stron internetowych wciąż nie jest zoptymalizowanych na tyle, by mogli korzystać z nich wszyscy. Dowiedz się, jak te same operacje, które pomagają zwiększyć widoczność strony, mogą wpłynąć na poprawienie jej dostępności z punktu widzenia osób niewidomych i niedowidzących.

Ostatnio na naszym blogu: Google potwierdza listopadowy update wyszukiwania lokalnego

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ć, żeby witryna była zoptymalizowana pod kątem niepełnosprawnych użytkowników? 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 pozycjonerzy mogą zrobić, by zoptymalizować strony na potrzeby osób niepełnosprawnych?

Jak dostosować stronę internetową do potrzeb 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

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ą.

Najprościej mówiąc, zasady WCAG 2.0 wymuszają na projektujących strony i aplikacje konkretnych, przemyślanych i celowych zadań, prostych i praktycznych rozwiązań i nastawienia na określoną funkcję, którą dany serwis ma pełnić.

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.

Układ treści na stronie

Przykład poprawnej kolejności treści
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.
  • 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:
    Onclick - poprawnezamiast:
    Onclick - niepoprawne

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 <strong> 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.
    Czytelne menu strony
    Przykład dobrze czytelnego menu na stronie

    Mniej czytelne menu strony
    Przykład menu o mniejszej czytelności
  • 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.

    Czytelne czcionki
    Przykład Roboto, bardzo czytelnego fontu do sieci
  • 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.
    Spectrum - daltonizm
    Spektrum tęczy widziane przez osobę mylącą czerwień z zielenią (cierpiącą na daltonizm)
    Spectrum - mylenie zieleni z czerwienią
    Spektrum tęczy widziane przez osobę mylącą zieleń z czerwienią

    Spectrum - brak niebieskiego
    Spektrum tęczy widziane przez osobę nierozpoznającą barwy niebieskiej
  • 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.

Strzałki do nawigacji na stronie

Strzałki - powrót do listy

strzałki na stronie - nawigacja
Strzałki w obrębie całej strony oznaczają, że dany element jest podlinkowany. Przykłady poczodzą ze strony https://leonidas-pralineo.pl/

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).

Normalna wersja strony

wersja strony dla niedowidzących
2 wersje strony http://www.gupkrakow.pl/

Jak sprawdzić, czy strona jest dostosowana do potrzeb osób niepełnosprawnych?

Dostępność strony 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 lub za pomocą automatycznych walidatorów, takich jak validator.w3.org lub wave.webaim.org/. Najdokładniejsze elementy przynosi połączenie tych trzech metod.

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.

  5,00 / 5 ( 8 )
Autor
Junior SEO Specialist - Sylwia

Junior SEO Specialist

W Delante od lipca 2018 roku. Z wykształcenia edytor, widzi różnicę między dywizem a półpauzą, ale wolałaby przestać. Po godzinach rozpracowuje nowy piekarnik i robi kolaże. Lubi styl retro.

Ostatnio na naszym blogu

Jesteś ciekawy, jak wygląda pozycjonowanie sklepów internetowych, a może chcesz wejść na rynek szwajcarski i ciekawi Cię, jak wygląda pozycjonowanie zagraniczne? Na naszym blogu znajdziesz odpowiedzi na te pytania i wiele innych porad ważnych dla rozwoju Twojego biznesu.