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 HTMLu 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:

[code=HTML] HTML5 CSS3 [/code]

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

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:

oraz ta sama tabela w formie tekstowej. Zobacz tabelkę - złośliwość bloga DP ,który nie chciał umieścić grafiki.

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.