.animate-view{opacity: 1 !important;}

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

8min.

Komentarze:0

UX
Optymalizacje stron internetowych na potrzeby osób niepełnosprawnych – jak je przeprowadzić?d-tags
20 lutego 2024
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.

8min.

Komentarze:0

Osoby niepełnosprawne jako użytkownicy internetu

W grudniu 2021 roku GUS podał, że w Polsce żyje 2,3 mln osób z orzeczeniem o niepełnosprawności, stopniu niepełnosprawności lub stopniu niezdolności do pracy. Oczywiście nie są to dane oddające realną liczbę osób, które na co dzień potrzebują dostępności w różnych obszarach swojego życia. Jak czytamy na stronie Biura Pełnomocnika Rządu do Spraw Osób Niepełnosprawnych, w 2011 roku 

„[…] prawne orzeczenie o niepełnosprawności lub równoważne posiadało prawie 3,8 mln Polaków (w tym blisko 194 tys. dzieci do lat 16 z aktualnym orzeczeniem o niepełnosprawności), tj. o około 0,3 mln osób więcej w porównaniu z szacunkami z badania BAEL w tym samym okresie.”

Z kolei na stronie GOV przeczytamy, że „w Polsce osób z niepełnosprawnościami, które mają prawne potwierdzenie niepełnosprawności, jest ponad 3 mln. W rzeczywistości jest ich dużo więcej – od 4 do 7 mln.”

Ale odejdźmy na moment od liczb, bo nieważne, czy osób, które szczególnie skorzystają z ułatwień dostępu do treści na Twojej stronie, będzie 3, 4 czy 7 milionów – dostosowanie stron do osób z niepełnosprawnościami jest absolutną podstawą. 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. To nie jest jedna, dwie czy trzy osoby. Dlaczego więc, mimo rosnącej świadomości o UX, strony internetowe wciąż nie są dostosowane do potrzeb osób niepełnosprawnych?

Często wynika to z niewiedzy. Po prostu. Dlatego stworzyliśmy ten artykuł, aby podpowiedzieć Ci, 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.

Jak osoby niepełnosprawne 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 – mowa tu o osobach z daltonizmem, protanopią, tritanopią i innymi schorzeniami powodującymi zaburzenia widzenia – za małe kontrasty, nadmiar grafik czy nieczytelny layout strony.

Ale to jest dopiero początek wyzwań, z których w ogóle nie zdajemy sobie sprawy. Mamy w końcu w społeczeństwie osoby neuroróżnorodne, z dysfunkcjami poznawczymi, epilepsją czy nadwrażliwością słuchową. Warto o nich pamiętać, projektując stronę. I, zanim zaczniesz wątpić –  tak, da się przygotować strony internetowe zgodne z zasadami dostępności, które będą świetnie wyglądać i jeszcze lepiej sprzedawać.

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 deweloperzy i specjaliści SEO mogą zrobić, by dostosować stronę www dla niepełnosprawnych?

Dostosowanie strony internetowej do potrzeb osób niepełnosprawnych A WCAG 2.2

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.2, 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.2

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.2 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ć.

Czym różni się WCAG 2.2 od WCAG 2.0?

WCAG 2.2 jest bardziej kompleksowym i aktualnym zestawem wytycznych dotyczących dostępności stron internetowych niż WCAG 2.0. 

Nowe kryteria

WCAG 2.2 zawiera 9 dodatkowych kryteriów sukcesu, które obejmują m.in.:

  • Dostępność do treści w czasie rzeczywistym. Kryteria te dotyczą m.in. napisów na żywo dla transmisji wideo i czatów na żywo.
  • Ułatwienia dla osób z dysfunkcjami poznawczymi. Kryteria te dotyczą m.in. uproszczenia języka i nawigacji strony.
  • Dostępność dla osób z nadwrażliwością słuchową. Kryteria te dotyczą m.in. możliwości wyłączenia automatycznie odtwarzanych dźwięków.

WCAG 2.2 uaktualnia też niektóre kryteria z WCAG 2.0, dzięki czemu uwzględnia nowe technologie i trendy.

Poziomy zgodności

WCAG 2.2 wprowadza trzy poziomy zgodności: A, AA i AAA. Poziomy te określają, w jakim stopniu strona internetowa spełnia kryteria sukcesu WCAG.

Inne zmiany

  • Nowe techniki – WCAG 2.2 zawiera nowe techniki, które pomagają w spełnieniu kryteriów sukcesu.
  • Ulepszona dokumentacja  –  Dokumentacja WCAG 2.2 została ulepszona, aby była bardziej przejrzysta.

Dostosowanie strony internetowej do WCAG 2.2 sprwi, że będzie ona dostępna dla szerszego grona użytkowników, w tym dla osób niepełnosprawnych.

Optymalizacje strony zgodne WCAG 2.2, które możesz wykonać na swojej stronie

Poniżej opiszemy 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

Powyżej 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 - poprawne
    zamiast:
    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>, 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.
optymalizacja strony z delante

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.

 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. Poniżej 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

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/

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

Dostosowanie strony www dla niepełnosprawnych można sprawdzić na kilka sposobów:

  • 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/,
  • używając narzędzia Inne narzędzia zewnętrzne, które pomagają zwizualizować sobie, jak funkcjonuje strona dla różnych osób, np.:

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

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.

Autor
Ola Drewniak SEO Content Team
Autor
Ola Drewniak

Content Specialist

specjalistka ds. contentu w Delante. Z wykształcenia edytorka. Od 5 lat działa w świecie marketingu  –  najpierw w social mediach krakowskich wydawnictw, potem w SEO i copywritingu, aż zdecydowała się rozwijać w kierunku content marketingu i połączyć swoje umiejętności organizacji i językowego wyczucia. Aktualnie działa nad projektami contentowymi w Delante, przeprowadzając audyty treści, układając content plany oraz tworząc treści dla najbardziej wymagających klientów. Prywatnie kocia behawiorystka, przyszła trenerka psów oraz miłośniczka tatuaży i gier RPG.

Autor
Ola Drewniak SEO Content Team
Autor
Ola Drewniak

Content Specialist

specjalistka ds. contentu w Delante. Z wykształcenia edytorka. Od 5 lat działa w świecie marketingu  –  najpierw w social mediach krakowskich wydawnictw, potem w SEO i copywritingu, aż zdecydowała się rozwijać w kierunku content marketingu i połączyć swoje umiejętności organizacji i językowego wyczucia. Aktualnie działa nad projektami contentowymi w Delante, przeprowadzając audyty treści, układając content plany oraz tworząc treści dla najbardziej wymagających klientów. Prywatnie kocia behawiorystka, przyszła trenerka psów oraz miłośniczka tatuaży i gier RPG.

FAQ

Czym są dyrektywy WCAG 2.0?

Web Content Accessibility Guidelines (WCAG 2.0) to zasady stworzone przez Web Accessibility Initiative, które wskazują jak dostosować i tworzyć serwisy internetowe przystępne dla każdego użytkownika, a zwłaszcza osób z niepełnosprawnościami. Do podstawowych wytycznych zaliczyć możemy percepcję, funkcjonalność, zrozumiałość i rzetelność. Standardy te mają pozytywny wpływ na wrażenia użytkowników oraz działania SEO.

Jak dostosować stronę internetową do potrzeb niepełnosprawnych?

Strony internetowe dopasowane do potrzeb osób z niepełnosprawnościami powinny posiadać:

  • zrozumiały dla przeglądarek kod,
  • poprawną strukturę serwisu,
  • przejrzysty layout strony,
  • intuicyjną nawigację na stronie,
  • adekwatne opisy alternatywne,
  • alternatywne wersje strony.

Jak sprawdzić, czy strona jest dostosowana do potrzeb osób z niepełnosprawnościami?

W internecie możemy znaleźć wiele narzędzi, które umożliwiają sprawdzenie czy nasza strona internetowa jest dopasowana do potrzeb niepełnosprawnych użytkowników. Najlepsze z nich to validator.w3.org oraz wave.webaim.org. Dobrym rozwiązaniem jest również skonsultowanie swojego projektu strony internetowej ze specjalistą, który przeanalizuje ją przy pomocy wytycznych WCAG. Dopełnieniem tych działań będzie wykonanie testów funkcjonalności z udziałem grupy osób niepełnosprawnych. 

Uzyskaj bezpłatną wycenę

Nagrody

Nagroda - Deloitte 2021 Nagroda - IPMA Nagroda - US Search Awards 2021 Nagroda - European eCommerce Awards 2022 Nagroda - Global Agency Awards 2022 Nagroda - European Search Awards 2022