Dostępność stron internetowych ( ang. Web Accessability ) to stopień w jakim dana strona może być postrzegana przez wszystkich użytkowników, w szczególności osób z wadami wzroku, słuchu, bądź ograniczeniami technologicznymi.

Jak już napisałem – jest tematem wstydliwym, każdy webdeveloper rozumie ten temat w inny sposób, a niewielu z nich chce lub umie uczynić stronę “dostępną” – wymaga to dodatkowego nakładu pracy, a odsetek osób którzy na tym skorzystają jest przecież niewielki…

Dla części stron jest to prawdą, jednak dla większości – nie, w szczególności dotyczy to różnorodnych stron informacyjnych, portali medycznych, etc.

Pamiętajcie też, że temat dostępności dotyczy również rosnącej grupy użytkowników przeglądających strony za pomocą telefonów komórkowych.

Rodzaje ograniczeń

  • Ślepota – przy przeglądaniu strony używają najczęściej czytników ekranowych, bądź ekranów braila,
  • Słaby wzrok, Daltonizm – alternatywnych styli (o wysokim kontraście), powiększanie strony
  • duża ilość osób obsługuje strony tylko za pomocą klawiatury (brak myszki, niepełnosprawność),
  • część widzi tylko tekst (słabe łącze/telefon komórkowy).

I jak pisać dla nich strony

Zacznijmy może od czytników ekranowych.

Czytniki ekranowe ( ang. Screen readers ) to takie sprytne programiki, które czytają stronę za pomocą syntetyzera mowy, potrafią też zwykle wyświetlić listę nagłówków czy listę linków.

Szczęśliwa wiadomość dla webdeveloperów – czytniki są zadziwiająco jednorodne w sposobie czytania strony.

Zła wiadomość – czytają stronę ze źródła HTML – od góry do dołu, prawie nie zwracając uwagi na style (nie czytają elementów ukrytych display:none, rozróżniają elementy pogrubione).

Przejdź do głównej zawartości

Wyobraźcie sobie że używacie czytnika ekranowego, wchodzicie na stronę i słyszycie mniej lub bardziej przyjaznym głos mówiący:

Zakończono wczytywanie strony, Strona główna, myślnik, TU WSTAW TYTUŁ STRONY

Następnie naciskacie klawisz tab, aby przejść dalej i słyszycie:

Strona główna, łącze”,

kolejny tab i kolejny komunikat:

Artykuły, łącze”,

i tak przez 50 elementów menu nagłówkowego, tradycyjnie umieszczanego jako pierwsze na stronie (a przynajmniej pierwszy link – przeglądarki tabulatorem przechodzą pomiędzy linkami na stronie).

W podobnej sytuacji będą osoby które weszły na stronę za pomocą smartphonów – tylko że w ich przypadku nie usłyszą linków, za to pierwsze 2-3 ekrany telefonu to same linki.

Rozwiązania tego problemu są dwa:
1. Dajemy treść główną jako pierwszą na stronie, a menu umieszczamy gdzie indziej (potem ew. stylujemy tak żeby się znalazło na górze strony),
2. Dodajemy ukryty link do głównej zawartości.

Oczywiście polecam rozwiązanie drugie, jako niewymagające dużego nakładu pracy, UWAGA: nie należy ukrywać za pomocą display: block – akurat tego czytnik nie przeczyta.

Przejdź do wyszukiwania, accesskey 6

Jak już i tak dodajemy niewidoczny link na górze strony, czemu nie dodać całego menu? Wystarczy 10 pozycji i magiczny atrybut accesskey – przejście do najczęściej używanych części strony, dzięki accesskey dostępnych po naciśnięciu jednego klawisza (np. firefox, accesskey 1 = ctrl+shift+1).

Radzę używać do tego celu klawiszy 0-9, te z literami są zwykle zarezerwowane przez przeglądarkę.

Zmiana prosta, a bardzo ułatwiająca życie.

Mój super fajny cudowny tytuł strony

Albo raczej niefajny, jak go trzeba za każdym razem odsłuchać, a zaraz za nim tagu h1 który jest używany jako zabawka SEO – czyli dubluje słowa kluczowe.

Miałem ostatnio nieszczęście używać programu ORCA pod Ubuntu do przeglądania stron, (program bardzo fajny tylko że na dobrych stronach).

Zwykle pierwsze 15 sekund słuchałem tytułu i tagu h1, po czym i tak nie wiedziałem gdzie jestem, a na dodatek od syntetyzatora mowy po godzinie bolała mnie już głowa.

Tytuł strony powinien krótko mówić o tym gdzie się jest, a nagłówek poziomu pierwszego – krótko, o czym jest dany fragment strony.

Więcej, czytaj dalej, zobacz co dalej, dowiedz się więcej, obrazek, zdjęcie

Bardzo często stosuje się link “więcej”, np. za zajawką artykułu, tak samo często do zdjęć dodaje się atrybut alt=”“ lub alt=“zdjęcie” (bo atrybut alt w tagu img jest wymagany w XHTML).

Wszystko ok – o ile nie słyszy się tego od czytnika, bo wtedy nie wiadomo o co chodzi, użytkownik poruszający się po stronie za pomocą tabulatora przechodzi od razu do linku “więcej”.

A wystarczy przecież dodać atrybut title=“więcej o [NAZWA ARTYKUŁU]”, i już wszyscy są szczęśliwi – czytnik to przeczyta, SEO też się ucieszy.

Gorzej sprawa się ma z tekstami alternatywnymi do zdjęć – te niestety trzeba napisać ręcznie i to sensownie – najlepiej krótki opis zdjęcia, bez jakiś cudów w stylu “Na pierwszym planie widzimy…” (też takie widziałem).

Krótkie zdania, z lewej strony

To już zagadnienie z pogranicza typografii, ogólnie – w internecie nie pisze się długich zdań. Nie powinno się też stosować pełnego justowania, linie powinny mieć odstępy między sobą itd.

Wszystkie artykuły powinny mieć wstęp – kilka słów o czym piszemy, dzięki temu osoby niezainteresowane mogą od razu uciec.

Ogólnie artykułów z dziedziny typografii i pisania sensownych tekstów jest dużo, więc się nie rozpiszę – Search The Friendly Web.

Tab, tab, tabindex

Za pomocą tabulatora można “skakać” nie tylko po linkach na stronie, można też skakać po innych elementach – o ile mają zdefiniowany atrybut tabindex .

Atrybut działa na podobnej zasadzie jak z-index , im wyższa jego wartość – tym wcześniej do niego dotrzemy po naciśnięciu tab.

Pokaż wszystkie nagłówki

Czyli najczęściej używana opcja w czytnikach – wypisuje wszystkie nagłówki, hierarchicznie według poziomów.

Dlatego warto zadbać o sensowne teksty w tych nagłówkach, rzeczywiście tworzące konspekt strony. Już nie mówiąc o odpowiedniej kolejności (h3 pod h2, a nie na odwrót!).

Do czego ten label?

Czyli formularze, nie ma nic bardziej irytującego niż przejście do nieopisanego inputteksta. Tag label ma atrybut for, który pozwala go przypisać do konkretnego pola formularza.

Na wszystkie elementy formularza można dodać tag title, z opisem co to jest za pole.

Znów – nie jest to czasochłonna zmiana, a pozwala osobom niewidomym korzystać ze strony.

Wszystko co jest listą, powinno być listą

W przypadku html – wypunktowaną. Naprawdę – nie ma różnicy dla webdevelopera, a jest to bardziej poprawne semantycznie.

W ogóle – stosując elementy poprawne semantycznie (listy do list, tabele do danych tabelaryczny, listy definicji do słowników) znacznie ułatwia się używanie strony szerokiemu gronu odbiorców.

Grafika, flash, javascript

Czyli 3x wróg czytników ekranowych:

  • grafiki nie przeczytają, przeczytają zamiast niej tekst alternatywny, jeżeli taki jest dostępny – unikać linków tylko graficznych
  • flasha w ogóle nie przeczytają
  • javascript – część przeglądarek go nie obsługuje (tekstowych), może przeszkadzać czytnikom.

Nie należy opierać funkcjonalności strony tylko na javascript – należy zawsze dać jakąś alternatywę (chociażby w tagu noscript).

Nazwa, tabela, komórka

Czyli to co usłyszysz z czytnika jak trafisz na np. spis firm w tabeli. Prawda że nic nie wiadomo z tego tekstu?

Po pierwsze – dane tabelaryczne umieszczamy w tabelach (a nie ładnie, bądź nie ostylowanych divach).
Po drugie – dajemy odpowiednie nagłówki ( th, thead > th ).
Po trzecie – dajemy opis do tabeli ( caption ), tak żeby każdy wiedział o czym ta tabela.
Po czwarte – zapomniamy i nieużywany atrybut summary – krótki opis tabeli.

Biały tekst na białym tle oraz kursywą bez podkleślenia

Ok, może białe na białym się nie zdarza (bo co za sens), ale szary tekst na białym tle już często, albo jasnoniebieski na białym.

Co powoduje, że:

  • osoby starsze go nie widzą (zanikanie rozróżniania kolorów, pierwszy w kolejce – niebieski)
  • osoby niedowidzące go nie widzą (brak kontrastu)
  • osoby z słabymi monitorami go nie widzą

Najlepiej albo od razu pisać tekst czarno na białym (ciemnoszary na białym), albo przygotować alternatywny styl strony – najbardziej kontrastowy jest żółty tekst na czarnym tle.

Kursywą bez podkreślenia – zły sposób wyróżniania łącz, linki muszą się odznaczać od reszty strony, w przypadku stron “dostępnych” co najmniej na dwa sposoby.

  • kolorem (daltoniści nie zobaczą)
  • podkreśleniem
  • pogrubieniem

a najlepiej wszystkimi trzema na raz.

Warto zobaczyć jak będzie wyglądało strona przy różnego rodzaju wadach wzroku np. za pomocą narzędzia VisCheck .

Czy mówisz po chińsku?

Czytniki ekranowe są wielojęzyczne – nie domyślają się że dana strona jest po polsku czy angielsku – trzeba im to napisać za pomocą atrybutu lang w tagu html.

Zoom in, Zoom out

Większość użytkowników internetu jak chce coś przeczytać powiększa stronę, w przypadku starszych przeglądarek strona się rozpada, bądź się nie powiększa (tak, mam na myśli ie6).

W takim wypadku warto pomyśleć o rozwiązaniu CSS + javascript oferującym podobną funkcjonalność.

Jak to zrobić? Bardzo prosto i trudno zarazem – wszystko na stronie ostylować w rozmiarze relatywnym (% lub em), po czym javascriptem zmieniać rozmiar czcionki na body – powiększy to całą stronę.

Problem niejako sam się rozwiązuje przy nowszych przeglądarkach – powiększają one całą stronę, nie tylko tekst.

FAQ, GPL, IE, LOL, ASAP, WTF, LOL – Akronimy

Informatycy i internauci kochają akronimy, niektóre są dostępne od lat i większość osób wie o co chodzi ( WTF ), niektóre są też wymyślane na poczekaniu i nikt nie wie o co chodzi.

Ogólnie – osoby starsze nie będą wiedziały, dlatego przypomnę może pewien tag z początków nauki html-a:

<acronym title="As Soon As Possible" lang="en">ASAP</acronym>

Taki drobiazg, a tylu uszczęśliwi: google (bo to zaindeksuje), czytnik (bo to przeczyta), web developera (bo job well done).

Popup, window.open(), target=”_blank”

W przypadku strony “dostępnej” nie używamy wyskakujących okienek – strona w jednym oknie i już. Użytkownik sam zdecyduje czy chce otworzyć nowe okno.

Słowem zakończenia

Ten artykuł tylko nakreślił złożoność problemu dostępności, oraz sposobów radzenia sobie z nim.

Mam nadzieję, że moje rady będą pomocne – jak zawsze czekam na komentarze i wasze uwagi.

Dla zainterestowanych dalszą lekturą na temat dostępności polecam:

  • W głąb dostępności – książka online z przydatnymi wskazówkami, opisująca dokładniej problem dostępności
  • WAI Web Accessability Initiative, inicjatywa w3 consortium na temat dostępności, wszystko na temat – techniki i normy, od a do z.