Dostępność serwisu internetowego dla osób niepełnosprawnych możemy rozważać z kilku punktów widzenia. Pomińmy dziś kwestie projektu graficznego oraz samej architektury informacji serwisu, a skupmy się na tym, jak na zwiększenie dostępności może wpłynąć dobry kod HTML i CSS.
Twoja strona internetowa nie jest dostępna dla każdego potencjalnego użytkownika z powodu samego faktu obecności w internecie. Istnieją grupy użytkowników w przypadku których serwis musi spełniać dodatkowe wymagania technicznym. W przeciwnym razie korzystanie z niego będzie dla nich bardzo trudne lub nawet niemożliwe. Są to np. osoby niewidome i niedowidzące korzystające z czytników ekranu, osoby niepełnosprawne ruchowo, użytkownicy urządzeń mobilnych (warto pamiętać, że ich liczba dynamicznie rośnie) lub np. osoby starsze, które słabiej rozumieją nowoczesną technologię.
Dodaj atrybut ALT do ilustracji
Każda ilustracja przekazująca treść, a wstawiona do strony przy użycia znacznika IMG powinna posiadać atrybut ALT definiujący tekst alternatywny:
W atrybucie ALT umieść tekst opisujący ilustrację. Nie ma to być tekst uzupełniający, ani zbiór słów kluczowych przeznaczonych dla SEO. Wręcz przeciwnie. Dzięki tekstowemu opisowi ilustracji użytkownicy nie mogący zobaczyć ilustracji będą mogli zapoznać się z opisem i zrozumieją lepiej zawartość serwisu. Pliki graficzne o charakterze dekoracyjnym powinny posiadać ALT pusty:
Zadbaj o wyjaśnienia skrótów
Jeśli używasz na stronie niestandardowych, trudnych do zrozumienia skrótów, powinieneś wyjaśnić użytkownikom ich znaczenie. Skorzystaj w tym celu z kodu:
ARA-A
Dodatkowe wyjaśnienie będzie widoczne po wskazaniu tekstu kursorem myszy. Dodatkowo skrót zostanie odczytany przez czytniki ekranu. Oczywiście nie ma potrzeby wyjaśniania skrótów powszechnie rozumianych, takich jak PZPN czy nawet HTML.
Stosuj prawdziwe nagłówki, akapity i listy.
Kolejnym elementem wpływającym na dostępność serwisu jest stosowanie znaczników HTML zgodnie z ich przeznaczeniem. Czytniki ekranu umożliwiają łatwe poruszanie się po stronie, jeśli zawiera ona prawdziwe nagłówki, akapity oraz listy. Na szczęście obecnie niemal wszyscy webmasterzy nauczyli się z nich korzystać.
Jeśli jednak nie zdążyłeś się tego nauczyć, to pamiętaj, aby wszystkie listy na stronie były przedstawione przy użyciu znaczników UL lub OL, łącznie z menu nawigacyjnym. Do stworzenia nagłówków koniecznie użyj znaczników H1, H2, H3 i kolejnych. W tym znacznika H1 użyj na stronie tylko raz, do oznaczenia najważniejszego nagłówka. Pamiętaj również o akapitach (jeszcze kilka lat temu niektórzy twórcy stron nie stosowali znaczników P niemal wcale).
Zwiększ dostępność tabel
Przedstawiając dane tabelaryczne, może je uczynić bardziej dostępnymi przez zastosowanie odpowiednich znaczników i atrybutów. Atrybut SUMMARY dodaje do tabeli opis:
Czytniki ekranu używane przez osoby niewidome i niedowidzące odczytają to podsumowanie. Tak samo odczytane zostaną wyjaśnienia dla komórek TH stworzone przez atrybut ABBR:
| Nie | ... |
|---|
Przy pierwszym czytaniu zostanie odczytana rozbudowana wersja nagłówka. Przy kolejnych już tylko wersja skrócona.
Formularze
O wysoki poziom dostępności możesz również zadbać tworząc formularze. Pamiętaj, aby posiadały one znacznik LABEL określający etykietę dane pola:
Użytkownik po kliknięciu w tak stworzoną etykietę natychmiast przejdzie do edycji pola formularza. Opis odczytują również czytniki ekranu. Dłuższe formularze podziel na części przy użyciu znaczników FIELDSET i LEGEND:
Kolejność menu i treści
W kodzie strony treść powinieneś umieścić przed nawigacją. Niezależnie od tego, czy menu znajduje się w lewej czy prawej kolumnie. O ich właściwe ułożenie możesz zadbać stosując odpowiedni układ kolumnowy. Dzięki temu użytkownicy czytników ekranu w pierwszej kolejności będą mogli zapoznać się z treścią danej podstrony bez konieczności „odsłuchiwania” menu.
Trudniejsza sytuacja ma miejsce, gdy menu znajduje się w górnej części serwisu. W takiej sytuacji pomocny może być tzw. „skiplink”, czyli łącze umożliwiające bezpośrednie przejście do treści, a umieszczone przed nawigacją:
W takim wypadku DIV zawierający treść musi mieć nadany odpowiedni identyfikator. Wobec linku możesz zastosować na przykład poniższy kod:
#skiplink {
position: absolute;
left: -20000px;
top: auto;
width:1px;
height:1px;
overflow:hidden
}
CSS dla urządzeń mobilnych
Coraz więcej użytkowników do surfowania w internecie wykorzystuje urządzenia mobilne. Serwis internetowy powinien być przystosowany do ich potrzeb. Jedna z możliwości do przygotowanie drugiej wersji serwisu. Takie rozwiązanie jest odpowiednie, gdy chcesz nie tylko dostosować wygląd strony, ale także zmniejszy ilość treści lub zmienić ich hierarchię.
Jeśli chcesz jedynie dostosować wygląd serwisu, użyj specjalnego arkusza stylów dostosowanego do potrzeb mobilnych użytkowników dołączonego do strony z użyciem atrybutu MEDIA:
Warto przy tym pamiętać, że np. iPhone nie obsługuje tego rodzaju stylów i zgodnie z zaleceniami Apple zaserwowanie mu alternatywnego arkusza wymaga użycia kodu:
Dodatkowe materiały
W poszukiwaniu szerszych informacji na temat dostępności warto zajrzeć na poniższe strony:
- http://www.dostepny.net
- http://dezinformacja.org/dia/
- http://www.dostepne.info
