Strona internetowa dostępna dla każdego, czy to możliwe? Grzechy i grzeszki twórców stron internetowych

Temat dostępności stron internetowych dla osób z niepełnosprawnością  dla wielu nie istnieje Nie chodzi o instytucję, bo w tym przypadku kwestia ta została uregulowana Rozporządzeniem Rady Ministrów z dnia 12 kwietnia 2012 r. w sprawie Krajowych Ram Interoperacyjności, minimalnych wymagań dla rejestrów publicznych i wymiany informacji w postaci elektronicznej oraz minimalnych wymagań dla systemów teleinformatycznych.
Aby strony internetowe były w pełni dostępne dla osób z niepełnosprawnościami każdego rodzaju, w tym także z niepełnosprawnością wzrokową należy je tworzyć według wytycznych zawartych w dokumencie WCAG  2.0.

Czym jest to całe WCAG 2.0?

WCAG  2.0 Jest to dokument, w którym są zapisane wszystkie standardy, według których twórcy stron internetowych mają zgodnie z nim konstruować swoje strony w taki sposób, aby każdy użytkownik (bez względu na wiek, sprzęt, czy niepełnosprawność)  był w stanie obsłużyć taką stronę w wygodny dla siebie sposób.

Zalecenia WCAG

  • Materiały filmowe i interaktywne najlepiej, gdy są umieszczone pod jednym adresem.

Dobrze, ale dlaczego materiały mają znajdować się pod jednym adresem? Odpowiedź jest bardzo prosta dużo prościej i łatwiej jest użytkownikowi nawigować po jednej stronie i tam obejrzeć sobie interesujące materiały, niż przechodzić po między stronami, zwłaszcza, gdy strony te mają skomplikowaną strukturę.

  • Możliwość nawigowania po stronie za pomocą programu odczytu ekranu

Mowa tutaj o programach specjalistycznych, z których korzystają osoby niewidome i słabowidzące, czym jest screen reader pisaliśmy już kiedyś. Programy te często mają zaimplementowane specjalne tryby pracy, które ułatwiają nawigacje po stronach internetowych. Prócz określonych przez twórców programu  skrótów, które umożliwiają  nawigację po określonych elementach (np. nagłówkach), Jednak twórca strony może zdefiniować skrót, który będzie przechodził do menu strony. W HTML-u można to osiągnąć używając polecenia atrybuty accesskey=”przypisana litera”. Użytkownik używając sekwencji klawiszy przypisanej danej przeglądarce + accesskey. Przykład: Alt + Shift + M , a tak to wygląda z poziomu kodu:

<a href=”https://www.w3schools.com/html5″ accesskey=”h”>HTML5</a><br>

<a href=”https://www.w3schools.com/css3″ accesskey=”c”>CSS3</a>

Więcej o atrybucie accesskey można przeczytać na stronie w3schools.com

  • Należy zamieścić tekst alternatywny opisujący grafikę oraz tekst niedostępny dla użytkownika. W miarę możliwości należy zapewnić audiodeskrypcję w filmach lub zdjęciach umieszczanych na stronach w ten sposób, aby niewidomy użytkownik mógł się zapoznać z każdym elementem strony tak jak użytkownik widzący

Wiesz jakie to denerwujące gdy nie możesz zobaczyć co jest na obrazku? Wystarczy zamknąć oczy i spróbować domyślić się co jest na obrazku. Dla osób niewidomych napotkanie grafiki często kończy się wypowiedzeniem przez syntezator komunikatu o tym ,że jest to obrazek, nic więcej. Jak to zmienić wystarczy wstawiając obrazek użyć atrybutu alt=”Opis obrazka”. Więcej o tym atrybucie znajdziesz na wspomnianej już wcześniej stronie  w3schools.com

O tym czym jest audiodeskrypcja pisaliśmy już kiedyś. Więc nie ma co się rozpisywać tylko zaprosić do przeczytania poprzedniego wpisu.

  •  Na stronie nie powinny pojawiać się elementy animowane, gdyż rozpraszają użytkownika

Animacje. Często denerwują osobę widzącą, a  co dopiero ma myśleć i robić osoba słabowidząca ,która próbuje skupić swój wzrok na konkretnym elemencie, a tu na wyjeżdża jej jakiś piękny animowany banner. Nie wspomnę już o przestarzałym Flash’u ,który na szczęście jest wypierany przez HTML5. Technologia rozwijana przez Adobe bardzo często powodowała zawieszanie się programów odczytu ekranu a w konsekwencji zdenerwowanie użytkownika.

  • Strona musi posiadać takie elementy, aby były one obsługiwane za pomocą klawiatury, a nie tylko z poziomu myszki.

Brzmi prosto, i jest proste. Chodzi o to by do każdego elementu strony dało się dojść nie tylko metodą „mycha w łapę i klikamy”, ale także po przez naciskanie Tabulatora ,który pozwala nam na przemieszczanie się między elementami strony.

  • Dokumenty, które są udostępniane na stronie na przykład  dokumentu Microsoft Office Word czy PDF powinny być w formie, takiej, aby użytkownik niewidomy był w stanie je przeczytać, nie mając z nimi żadnych problemów

Czy osoba  niewidoma jest w stanie zobaczyć zdjęcie? Oczywiście ,że nie. Skan jest zdjęciem, grafiką tak samo jak obrazek i zapoznanie się z jego treścią nie jest możliwe. Owszem istnieją programy typu OCR ,ale one też nie zawsze działają tak jak trzeba. Wiele programów takich jak Adobe Acrobat potrafi tworzyć pliki PDF dostępne dla używających czytnika ekranu.

  • Strona powinna zawierać nagłówki, łącza, listy, ponieważ elementy te ułatwiają nawigację po stronie internetowej. Powoduje to , że użytkownik porusza się na podanej stronie szybciej, w porównaniu do strony nie mającej wyżej wymienionych elementów.

Wyobraźmy sobie ,że mamy książkę, dużo łatwiej  jest znaleźć konkretny tekst lub jego fragment jeżeli strona jest  podzielona na rozdziały, a rozdziały te na pod rozdziały, dużo łatwiej jest również nawigować po stronie internetowej.

  • Dla osób słabowidzących zaleca się odpowiedni kontrast

Czasem niektóre elementy zlewają się ze sobą. Aby wyróżnić ważne elementy strony warto używać innych ale nie podobnych do siebie kolorów. Jak sprawdzić czy strona ma odpowiedni kontrast?  Trzeba skorzystać kalkulatora kontrastu. Link do narzędzia  ColorWheel

  • Odpowiednie zaetykietowanie pól formularzy i przycisków pomoże niewidomemu  użytkownikowi łatwiej je obsłużyć. Przykładami mogą być: wypełnianie formularza przelewu w serwisie bankowym, zamówienie biletu na komunikację czy zarezerwowanie noclegu w hotelu.

Każdy element na stronie jest określany przez czytnik ekranu odpowiednią etykietą np. przycisk, pole edycyjne itp. Ale co zrobić w sytuacji gdy na stronie jest 10 przycisków, 30 linków i  100 pól edycyjnych należy je odpowiednio opisać, tak aby program mógł oznajmić użytkownikowi nie tylko typ kontrolki na stronie ale również jej nazwę np.:  „Stacja początkowa  Pole edycyjne” wtedy użytkownik wie że ma w to pole wpisać skąd chcę jechać, a nie gdzie. Gdyby takie pola nie były by zaetykietowane zamiast kupić bilet z Warszawy do Gdańska mogli byśmy kupić bilet z Gdańska do Warszawy, a to jest różnica prawda?

  • Serwis powinien dać się obsłużyć w urządzeniach, które mają wyłączoną obsługą CSS.

Strona z wyłączonym CSS? Wygląda paskudnie  jednak surowy wygląd i brak fajerwerków rozpraszających uwagę pozwala na lepsze skupienie i łatwiejszą nawigację po stronie. Dla osób widzących można to wyglądać źle, ale zdecydowanie ułatwia to pracę czytnikom ekranu.

  • Brak odpowiednich opisów łączy, odnośników, co stanowi problem z łatwym nawigowaniem po stronie. Brak opisów dezorientuje użytkowników korzystających z programu odczytu ekranu.

Wyobraźmy sobie link w treści artykułu. Link ten prowadzi do strony sklepu na której możemy kupić recenzowany produkt. Mamy fragment tekstu: „Produkt możesz zakupić tutaj”, gdzie jakie tutaj? Oczywiście chodzi o stronę wspomnianego sklepu ,jednak dużo lepiej by to wyglądało gdyby napisać Produkt możesz zakupić na stronie sklepu internetowego XYZ.pl” brzmi lepiej, a użytkownik wie gdzie zostanie przeniesiony po kliknięciu danego łącza.

  • Stosowanie kodu przy rejestrowaniu lub logowaniu do jakiegokolwiek serwisu, przepisania go z obrazka nie jest możliwe do wykonania przez osoby niewidome i słabowidzące.

„Potwierdź ,że jesteś człowiekiem” brzmi śmiesznie, jednak nie dla wszystkich, zmora osób z dysfunkcją wzroku (i nie tylko) chodzi o CAPTCHA, ile razy zdarzyło ci się  błędnie przepisać kod? Mi zdarza się to średnio 4 razy dziennie. Te kody spotkane są wszędzie – na forach, w sklepach internetowych, w bankach. Oczywiście istnieje znana wszystkim (albo i nie) reCAPHA ,która umożliwia zamiast  przepisywania kodu z obrazka, przepisanie kodu z nagrania, a i to nie często nie do odsłuchania. Pomyśl o tym  co myślą osoby z dysfunkcją zarówno wzroku jak i słuchu.

  • Stosowanie tabel, których nie jest się w stanie odczytać przy pomocy programu odczytu ekranu. Dane te powinny być podane w formie tekstu, który użytkownik będzie w stanie odczytać.

Tabele –  zmora  niewidomych, ciężkie do nawigacji, paskudne, brzydkie. Drogi Twórco a pomyślałeś kiedyś że tabelkę można przedstawić w formie tekstowej. Jak? Przykład:

Tabela w formie graficznej.

Ta sama tabela w formie tekstowej.

Ale to nie wszystko…

W dzisiejszym świecie jest jeszcze ogrom stron internetowych, które nie są konstruowane zgodnie wymaganiami, aby niewidomi i słabowidzący mogli z niej skorzystać w komfortowy sposób. Za to istnieją serwisy, które dbają o dostępność swojej strony tak, aby każdy użytkownik mógł z nich skorzystać. To tylko niektóre wytyczne WCAG 2.0 ,jeśli chcesz zapoznać się z nimi wszystkimi zapraszamy do przeczytania dokumentacji WCAG 2.0.

W niedalekiej przyszłości przyjrzymy się dostępności pewnej popularnej strony internetowej.

 

 

Zostaw odpowiedź

Twoj adres e-mail nie bedzie opublikowany.