Dostępność stron internetowych (accessibility)

• Google zachowuje się jak niewidomy, ograniczony ruchowo i umysłowo użytkownik
• Użytkownicy urządzeń mobilnych (telefony komórkowe, palmtopy itd.) mają podobne problemy, co niepełnosprawni
• Strona musi być użyteczna czytana przez automat albo wyświetlana po linijce przez czytniki Braille’a dla niewidomych. W wielu krajach jest to nawet wymóg prawny
• Użytkownicy o słabszym wzroku będą używali większych czcionek i projekt naszej strony musi to „wytrzymać”
• Nie wszystkie wyświetlacze pokażą naszą stronę w kolorze i nie wszyscy użytkownicy będą kolory widzieć. Dla wielu osób piękna czerwień jest tak samo szara, jak bujna zieleń
• Oprócz niewidomych, obrazków nie zobaczą też posiadacze powolnych połączeń internetowych
• Wielu użytkowników nie może użyć myszki. Np. dlatego, że ich telefon komórkowy nie ma czegoś takiego albo z powodu problemów ruchowych
• Nie wszyscy mają duże monitory. Jest wiele małych ekranów urządzeń mobilnych, różnych paneli i po prostu starszych monitorów
• W wielu firmach obowiązuje zakaz instalowania plug-inów i uruchamiania skryptów w przeglądarkach. A interesują nas też internauci szperający zawodowo lub w przerwie na kawę

Linki muszą wyglądać jak linki nawet dla daltonistów. Muszą wyraźnie odróżniać się kolorem (najlepiej niebieskim, bo jest „najbezpieczniejszy” dla mających kłopoty z kolorami) oraz podkreśleniem, wytłuszczeniem lub w inny, niezależny od kolorów sposób

• Dodawaj linkom atrybut title, gdy tekst linku nie wyjaśnia dokładnie, dokąd link prowadzi. Wspólnie, tekst między tagami _i oraz tytuł linku, powinny dawać jasną wiadomość, dokąd link prowadzi
• Dodawaj często używanym linkom atrybut accesskey. Dzięki temu osoby mające trudności z używaniem myszki będą mogły szybko użyć linku, który potrzebują, naciskając ALT+numer.
  N.p.: Strona główna
  […] Wiadomości dnia
• Dodawaj ukryty dla widzących link „pomiń nawigację”, najlepiej z klawiszem skrótu. Taki link można ukryć elegancko definiując mu styl display:none
• Unikaj otwierania linków w nowych oknach. Uniemożliwia to użytkownikom wybór, czy rzeczywiście chce otworzyć stronę w nowym oknie a do tego „zabija” przycisk „back” przeglądarki. Jeżeli dobrze opiszesz link przez jego treść i tytuł, to nie będziesz musiał się bać, że użytkownik nieświadomie ucieknie z Twojej strony

Według standardu HTML, wszystkie obrazki muszą mieć parametr alt czyli tekst alternatywny mogący zastąpić obrazek

• Tekst alternatywny nie jest podpisem ani dodatkowym wyjaśnieniem, ale opisem, co widać na obrazku. Jest przeznaczony dla osób, które nie chcą lub nie mogą obejrzeć grafiki lub zdjęcia
• Obrazki na stronie będące wyłącznie dekoracją lub „rusztowaniem” struktury strony, powinny mieć tekst alternatywny pusty. Ważne jest, aby wprost zadeklarować alt=````, bo inaczej przeglądarki mogą zacząć kombinować i np. przeczytają na głos pełny adres pliku z obrazkiem
• Obrazki będące wypunktowaniem listy mogą mieć tekst alternatywny o treści „*”, ale lepiej używać w takim przypadku standardowego wypunktowania w HTML-u ( _lub ), z wyglądem wypunktowania określonym w arkuszu stylów
• Wykresy powinny mieć zdefiniowany tekst alternatywny zawierający podstawowe dane prezentowane na wykresie.
  N.p. „Wykres akcji Opoczno S.A., kurs +2,41%”
• Jeżeli używasz obrazka jako mapy, dodaj „alt-text” wszystkim jej klikalnym obszarom używając atrybutu alt tagu area

Dodawaj tag label opisom pól formularzy. Gdy treść strony jest czytana na głos lub wyświetlana jako czysty tekst, może nie być oczywiste, który opis należy do którego pola formularza.
N.p.: Szukane słowo:

• Aby ułatwić korzystanie z formularzy, możesz użyć tabel do układania ich elementów względem siebie. Połączysz pole z jego opisem umieszczając je w jednej komórce lub w jednym wierszu obok siebie (ale nigdy w kolumnie – tabele są czytane wierszami)
• Jeżeli wyróżniasz graficznie kilka pól formularza, otaczaj je tagiem _{, a tytuły takich grup tagiem}

Układaj elementy strony w jej kodzie w takiej kolejności, w jakiej powinny być czytane. Należy unikać sytuacji, w których strona będzie trudna w odbiorze „jak leci”. Najlepiej obejrzeć własną stronę w trybie czysto tekstowym przeglądarek Opera czy Lynx

• Nie używaj tabel do pozycjonowania kolumn i elementów na stronie. Tabele są czytane wierszami, a strony powinny być czytane kolumnami
• Unikaj umieszczania w kodzie nad główną zawartością zbyt wielu elementów, tak żeby użytkownik nie musiał się przekopywać albo co gorsza odsłuchiwać mnóstwa stałych napisów, takich jak nawigacje, reklamy itd.

Używaj poprawnego kodu HTML. Im więcej przeglądarka musi sobie „dopowiedzieć” (wersja HTML, język strony itd.) tym większa szansa, że w trudniejszych sytuacjach dopowie sobie źle

• Sprawdź, czy strona działa poprawnie z wyłączonymi skryptami i elementami wymagającymi plug-inów (Flash, Java, JavaScript, ActiveX,…). W szczególności nie używaj linków działających tylko przy włączonych skryptach (_{) zamiast tego definiując zdarzenia (})
• Nadawaj kolumnom tabeli nagłówki poprzez odróżnienie _{od zwykłych} . Zaawansowane przeglądarki umożliwiają sprawdzenie, w jakiej kolumnie się znajdujemy, na podstawie komórek __
• Starsze przeglądarki mają problem z powiększaniem czcionek, jeżeli ich wielkość określono w pikselach, a nie w procentach. Niestety starsze przeglądarki nie są też zgodne co do tego, o procentach czego mówimy (wielkości czcionki elementu body czy wielkości czcionki elementu nadrzędnego). Dlatego pomimo że wiele poradników o accessibility zaleca procentowe określanie wielkości czcionek, zalecam ostrożność w tym względzie. Problem dotyczy zresztą tylko starszych przeglądarek
• Oznaczaj tytuły jako tytuły. Chodzi po prostu o wykorzystanie tagów h1, h2, … tam, gdzie to logicznie uzasadnione. Przeglądarki dla niepełnosprawnych i niektóre bardziej zaawansowane „zwykłe” oraz Google odczytują je i sporządzają „spis treści” strony ułatwiający wyszukiwanie/nawigację
• Napisz „politykę dostępności”, wymieniając w niej wprowadzone ułatwienia, zwłaszcza klawisze skrótów. Link do takiego tekstu powinien mieć zdefiniowany klawisz skrótu accesskey=,,0”

Określ poprawnie język strony, aby urządzenie ją czytające wiedziało, jak wymawiać słowa

• Nadawaj stronom sensowne tytuły. Są pierwszą rzeczą, którą widzi (albo słyszy) użytkownik. Po tytułach też rozróżnia strony, zwłaszcza gdy nie może ich zobaczyć. Najlepszy tytuł to „Tytuł podstrony - Nazwa Serwisu”. Niektórzy najpierw wypisują nazwę serwisu, ale to utrudnia rozróżnianie stron w ramach jednego serwisu – trzeba dłużej słuchać, żeby się zorientować, nie można też rozróżnić stron w zakładkach przeglądarki, gdzie są skrócone
• Jeżeli strona jest częścią większej całości (artykuł podzielony na strony, długi indeks tekstów podzielony na kilka stron), używaj w nagłówku strony deklaracji linków do stron poprzednich, następnych, strony początkowej i głównej (link rel=``prev” czy też next, start lub home)

Przeglądarki internetowe dla niewidomych mają problem z odczytywaniem skrótów. Nie jest dla nich oczywiste, czy „PEKAO SA” należy przeczytać „pekao sa” czy „pe e ka a o es a”. HTML umożliwia użycie tagów abbr i acronym do wyjaśnienia skrótów, ale ich użycie jest niepraktyczne: wymagałoby od autorów tekstów albo od redaktorów ręcznego dodawania wyjaśnień wszystkich użytych skrótów, za co trzeba by tym ludziom dodatkowo zapłacić.

Wygodniejszym rozwiązaniem jest pisanie skrótów „z kropkami”, n.p. „PEKAO S.A.”. Czytniki dla niewidomych starają się czytać słowa jako „słowa”, nawet napisane wielkimi literami, a kropki dadzą im poznać, że to skrót.

Można rozważyć dodanie inteligentnego mechanizmu dodającego tag acronym do typowych skrótów oraz ułatwienie redaktorom dodawania rozwinięć do trudniejszych zlepków liter. Nie jest to jednak łatwe i gra może nie być warta świeczki.