Co warto wiedzieć o dostępności stron dla niepełnosprawnych

3 Czerwiec 2017
1 Komentarze

W Polsce żyje około 5,5 mln osób z różnymi rodzajami niepełnosprawności – ruchowymi, fizycznymi lub umysłowymi. To oznacza, że co siódmy Polak jest osobą niepełnosprawną. Czy może skorzystać z Twojej strony? Czy będzie w stanie przeczytać treść, wypełnić formularz lub dokonać zakupu?

Z tego artykułu dowiesz się:

  • jakie trudności napotykają niepełnosprawni, podczas korzystania z Internetu
  • jak usprawnić na swojej stronie: elementy graficzne, tekstowe i video, tak by ułatwić poruszanie się po niej niepełnosprawnym
  • jakie korzyści niesie ze sobą dostosowanie strony do osób niepełnosprawnych.

Oto Pani Barbara. W wyniku nieprawidłowego leczenia zaćmy nie widzi od 3 lat.

Osoba niewidoma

Jak ułatwić surfowanie po Internecie Pani Barbarze i innym osobom niewidomym?

 

Ustal jakie elementy powinny być wyróżnione na stronie i wyraźnie zaznacz je w znacznikach html (używaj nagłówków i tytułów, poprawnie oznaczaj listy, tabele itp.)

Osoby niewidome korzystają z czytników ekranu – aplikacji, które rozpoznają i czytają elementy tekstowe wyświetlane na stronach. W przypadku używania takich programów, design strony nie ma żadnego znaczenia, ogromne znaczenie ma natomiast, poprawna semantyka strony (użycie znaczników html zgodnie z obowiązującymi normami).

Dlaczego?

Bo program przetwarza stronę na tekst i dodaje informacje pobrane z kodu html. Zatem niewidomy zostaje poinformowany, które informacje są tytułami, nagłówkami, listami, tabelami, czy linkami. W efekcie oczami wyobraźni widzi strukturę strony.

Jeśli dana strona nie ma poprawnych znaczników html, niewidomy musi przeczytać stronę w całości od góry do dołu, aby cokolwiek z niej wywnioskować. Co więcej, programy czytające często mają ustalone skróty klawiaturowe, ułatwiające nawigację np. klawisz H – służy w niektórych programach do poruszania się tylko po nagłówkach, a klawisz F – ułatwia przejście do formularza. Dzięki poprawnym znacznikom niewidomi będą mogli szybko przeskanować stronę po wszystkich nagłówkach i najważniejszych elementach, tak jak pełnosprawni użytkownicy w kilka sekund skanują stronę wzrokiem.

 

Dodaj alternatywny tekst do elementów graficznych

Fachowo: przypisz znacznikom img atrybuty alt.  Dzięki temu, oprogramowanie przetwarzające tekst na mowę przeczyta osobom niewidomym, co znajduje się na grafice, zdjęciu czy wykresie.

 

Nie używaj grafik, które przedstawiają sam tekst np. skany. 

Jeśli umieszczasz załączniki w formacie „pdf”, zadbaj o to, aby były rozpoznawalne przez syntezator mowy.

 

Pan Piotr ma 65 lat i jest osobą niedowidzącą.

Osoba niedowidząca

Jak pomóc osobom starszym i niedowidzącym?

 

Pozwól na powiększenie tekstu.

Dobra strona internetowa to taka, na której możemy powiększyć tekst dwukrotnie, nie tracąc przy tym na jej funkcjonalności i przejrzystości (żadne elementy nie uciekają poza krawędzie przeglądarki, strona mieści się poziomo w oknie itp.).

Doskonała strona to taka, która umożliwia użytkownikom powiększenie tekstu za pomocą jednego przycisku widocznego na stronie. Oczywiście można powiększyć stronę za pomocą komendy „CTR +”, jednak często powoduje to zniekształcenie obrazów, a nawet pokrywanie się ze sobą linijek tekstu.

 

Przemyśl jak skonstruować CAPTCHA.

Wiele stron wciąż wymaga od użytkowników potwierdzenia tego, że nie są robotami, stosując zaawansowane Captcha. Tymczasem takie Captcha np. polegające na przepisaniu zniekształconych liter z obrazka, jest barierą nie do przejścia dla osób słabowidzących lub niewidomych.

Jak z tego wybrnąć? Można stosować prostsze Captcha np. zlecić użytkownikom wykonanie łatwego działania matematycznego lub tylko odznaczenia pola „nie jestem robotem” (ReCaptcha).

Aktualnie Google pracuje również nad nową wersją uwierzytelnienia, która samodzielnie odróżni robotów od ludzi, bez udziału użytkowników. W takim mechanizmie, Captcha pojawi się tylko w sytuacji, gdy system oznaczy aktywność użytkownika jako podejrzaną.

Jeśli chcesz być na bieżąco, na temat postępu prac nad wdrażaniem ReCaptcha, możesz zapisać się do poniższego formularza, udostępnionego przez Google. Przejdź do formularza. 

 

Zadbaj o odpowiedni kontrast

Każda treść, na którą użytkownik patrzy dłużej niż przez 2 sekundy, powinna być wyraźnie widoczna i cechować się wysokim kontrastem w stosunku do tła (zgodnie z WCAG kontrast pomiędzy tekstem, a tłem powinien wynosić: 4,5:1.).

Na większą swobodę możesz pozwolić sobie przy projektowaniu menu oraz nagłówków, gdyż zwykle są to pojedyncze wyrazy i użytkownicy rzadko patrzą na nie dłużej niż 2 sekundy.

 

Tomek ma 24 lata i cierpi na zespół Aspergera.

 

Osoba z zespołem Aspergera

Jak pomóc takim osobom jak Tomek, z zaburzeniami poznawczymi i neurologicznymi np. z ADHD, autyzmem, zespołem Aspergera.

 

Dodaj opcję zatrzymania animacji na stronie

Migające i ruchome elementy serwisu np. efekt paralaksu, mogą powodować u niepełnosprawnych różnego rodzaju napady np. epilepsji lub migreny. Ponadto, użytkownicy mogą nie mieć wystarczająco dużo czasu, aby skupić się na danym elemencie, zanim animacja zniknie.

[ Przy okazji, być może pamiętasz wpadkę Apple z 2013 roku? Zaraz po premierze iOS 7, 25% użytkowników zgłosiło koncernowi  objawy choroby lokomocyjnej, występujące podczas patrzenia na animacje w telefonie. Jak widać, animacje mogą również przeszkadzać pełnosprawnym użytkownikom.]

 

Dopracuj nawigację

Nawigacja powinna wyglądać i działać tak samo na każdej zakładce strony. Ponadto warto zadbać o wiele mechanizmów nawigacyjnych, tak aby użytkownicy łatwo mogli się odnaleźć w bieżącej lokalizacji. Możesz użyć jednocześnie paska nawigacyjnego, pola wyszukiwania, mapę strony lub zastosować nawigację okruszkową.

 

Poprawnie nazywaj linki

Linki powinny zostać nazwane (i opisane w kodzie html), w taki sposób, aby jasno dawały do zrozumienia, gdzie użytkownik wyląduje po ich kliknięciu. Unikaj używania niejednoznacznych zwrotów takich jak: przeczytaj więcej, kliknij tutaj.

 

U Pana Marka 2 lata temu wykryto daltonizm.

Osoba cierpiąca na daltonizm

Jak pomóc osobom, które nie rozpoznają wszystkich kolorów i ich odcieni?

 

Nie stosuj koloru, jako jedynego źródła przekazywania informacji.

Osoby, które nie rozróżniają kolorów nie zauważą, że np. kolor czerwony sugeruje błąd podczas wypełniania formularza. W takim przypadku dobrym pomysłem jest dodatkowe wzmocnienie ważnych elementów (w tym przypadku błędów w formularzu) przez podpowiedzi tekstowe lub znaki graficzne (na przykład wykrzyknik).

Innym przykładem są linki. Jeśli będą wyróżnione tylko za pomocą innego koloru, daltoniści mogą w ogóle ich nie dostrzec. Warto zatem wyróżnić je nie tylko kolorem, ale także podkreśleniem.

 

 

Pani Magdalena jest chora na zespół RSI tzw. zespół myszy komputerowej.

 

Osoba cierpiąca na zaburzenia motoryczne

 

Jak pomóc osobom cierpiącym na zaburzenia motoryczne?

 

Dostosuj swoją stronę do obsługi z poziomu klawiatury.

Osoby z zaburzeniami motorycznymi oraz niewidomi nie korzystają z myszki. Dlatego tak ważne jest, aby stronę można było przejść z poziomu klawiatury i łatwo dostać się do jej najważniejszych części takich jak linki i formularze.

Przy okazji, dla osób które nawigują stronę za pomocą klawiatury, warto dodać wyraźny fokus (w postaci obramowania) do wszystkich elementów. Dzięki temu niepełnosprawny, w trakcie nawigowania będzie dokładnie wiedział, który element ma oznaczony.

 

Zosia ma 25 lat i jest głuchoniema od urodzenia.

 

Osoba głuchoniema

Jak pomóc osobom głuchoniemym i niedosłyszącym?

 

Pisz prosto, bez użycia trudnych słów

Dla osób głuchoniemych podstawowym językiem komunikacji jest język migowy (język znaków).  Z kolei język mówiony jest dla nich tym, czym dla nas np. język angielski. Potrafią się w nim porozumieć, ale zdarzają się słowa, których nie rozumieją. Ponadto język migowy ma inną strukturę gramatyczną i nie da się przetłumaczyć wielu słów dosłownie. Warto zatem zadbać o to, aby prezentowane treści nie były zbyt skomplikowane, pozbawione skrótów i żargonu.

 

 Zapewnij transkrypcję wszystkich materiałów audio i napisy do materiałów video

Napisy powinny być zsynchronizowane z dźwiękiem i obrazem oraz zawierać również opis wszelkich zdarzeń dźwiękowych (np. oklaski). W przypadku materiałów audio warto stworzyć osobny plik lub podstronę z transkrypcją, dostępną w formacie html.

 

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

Przetestuj ją!

Testowanie dostępności stron internetowych i dostosowywanie ich do niepełnosprawnych niesie ze sobą szereg korzyści.

Ułatwiamy życie tym, którzy i tak mają już pod górkę. Sprawiamy, że nasze strony stają się bardziej użyteczne i przyjazne, nie tylko niepełnosprawnym, ale także osobom starszym i młodzieży. A to procentuje w liczbie nowych klientów.

Co jeszcze?

Osiągamy lepszą pozycję w wyszukiwarkach (ma na to wpływ m.in. stosowanie poprawnych znaczników html).

Upraszczamy obsługę naszej strony na urządzeniach mobilnych oraz kształtujemy wizerunek naszej firmy jako firmy odpowiedzialnej społecznie.

 


Artykuł został stworzony w oparciu o standardy WCAG (Web Content Accessibility Guidelines). To szereg wytycznych na temat dostępności treści stron internetowych, uznanych przez większość krajów Europy i sygnowanych przez ONZ.

Tymczasem jeśli zastanawiasz się, czy Twoja strona jest dostosowana do osób niepełnosprawnych i/lub jak możesz ją usprawnić,  zleć nam audyt dostępności. Wykonamy kompleksową analizę Twojej strony. Dostarczymy kilkudziesięcio-stronicowy raport wraz ze wskazówkami, co zmienić lub poprawić, tak aby Twój serwis był w pełni zgodny z  międzynarodowymi standardami WCAG.

 

Katarzyna Iwanicka
Content Marketing Manager

1
Dodaj komentarz

avatar
1 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
SylwiaRecent comment authors
  Subscribe  
najnowszy najstarszy oceniany
Powiadom o
Sylwia
Gość
Sylwia

Bardzo ciekawy i inspirujący artykuł.