Wszystko co trzeba wiedzieć, aby zacząć tworzyć dostępne strony internetowe

Dostępność stron internetowych wydaje się odległym i trochę niepotrzebnym tematem. Zdaję sobie z tego sprawę ponieważ przez dość długi czas sam nie zwracałem na to uwagi. A przecież ten temat powinien być jednym z pierwszorzędnych, bo w końcu po co nam idealnie zakodowane i zoptymalizowane strony, jeśli nie będą dostępne, a tym samym część użytkowników nie będzie mogła z nich korzystać?

Chciałbym dziś opowiedzieć trochę o dokumencie WCAG 2.0, jego budowie oraz przedstawić najważniejsze techniki służące do budowania dostępnych witryn. Zapraszam! 🙂


Dokument WCAG 2.0.

Jak podaje Wikipedia, jest to skrót od angielskich słów “Web Content Accessibility Guidelines”. Został opublikowany przez Web Accessibility Initiative (inicjatywa W3C) i zawiera wszystkie informacje, pozwalające tworzyć dostępne strony internetowe. W 2012 roku stał się światową normą, wymaganą na przykład w serwisach polskich instytucji publicznych.


Budowa dokumentu.

Sam WCAG 2.0 nie jest bardzo duży, dlatego też zachęcam, aby osoby zainteresowane zapoznały się z nim w wolnej chwili. 🙂 Został podzielony na 4 poziomy:

  1. 4 Zasady – zupełny fundament dostępności witryn internetowych. Składają się na nie postrzegalność, funkcjonalność, zrozumiałość oraz solidność. Zostały dokładniej opisane na tej stronie.
  2. 12 wytycznych – mówią o podstawowych celach, które muszą obrać sobie osoby, chcące tworzyć dostępne witryny internetowe.
  3. Kryteria sukcesu – poziom dostępności serwisu. Każdy z wymogów, które musi spełniać taka strona został oznaczony przez odpowiednią liczbę liter “A” (A – w miarę dostępna, AA – wystarczająco dostępna, AAA – bardzo dostępna).
  4. Techniki wystarczające i doradcze – najważniejsza sprawa. Konkretne sposoby na poprawę dostępności stron internetowych.

Najważniejsze zasady, pozwalające budować dostępne witryny.

Wyszło ich relatywnie dużo, dlatego postanowiłem podzielić je na 5 kategorii (multimedia, tekst, wygląd, kod oraz obsługa).

Multimedia:

  • Wszystkie zdjęcia muszą mieć atrybut alt! Jeśli z całego wpisu chciałbyś wynieść jedną zasadę, to właśnie ta. Nigdy o tym nie zapominaj. Każde zdjęcie, które przedstawia jakąś treść, musi mieć opis tej zawartości w alcie, a jeśli grafika jest czysto dekoracyjna, alt zostaje pusty.
  • Wszystkie pliki multimedialne, takie jak filmy i nagrania muszą zostać uzupełnione o napisy.
  • Pliki tekstowe, takie jak DOC lub PDF muszą zostać sporządzone w dostępny sposób, np. plik PDF musi być możliwy do odczytania przez czytnik ekranowy.

Tekst:

  • Każdy tekst znajdujący się na stronie musi być odpowiednio ułożony. Należy używać nagłówków, paragrafów oraz list. Nie powinno się justować tekstu, a już na pewno wyrównywać do prawej strony. To wszystko pozwala na łatwiejsze korzystanie ze strony nie tylko przez osoby korzystające z czytników ekranowych, ale też przez każdego użytkownika internetu.
  • Odnośniki muszą zawierać tekst mówiący o tym co znajduje się pod danym linkiem. Dla przykładu przycisk prowadzący do Facebooka będzie wyglądać w ten sposób: “Facebook”, a nie tak: “Więcej”. Ten zabieg ułatwia znacznie poruszanie się po stronie, szczególnie za pomocą wspomnianych czytników.
  • Tytuły muszą być unikalne dla każdej ze stron, tworzone na zasadzie “Tytuł konkretnej strony” – “Nazwa całego serwisu”. Również wszelkie ramki oraz tabele muszą posiadać swoje tytuły.
  • Wszystkie cytaty muszą być odpowiednio oznaczone, przynajmniej zamknięte w cudzysłowie.
  • Teksty powinny być napisane w sposób zrozumiały dla jak największej ilości ludzi.

Wygląd:

  • Rzecz najważniejsza w tej części – kontrast. Wszystkie elementy powinny posiadać go na poziomie 4,5-1 (wspaniale, gdy jest to 7-1). Ale w jaki sposób mam wiedzieć jaki kontrast mają elementy mojej witryny? Wystarczy użyć w tym celu tego oto programu.
  • Treść strony musi być widoczna po nawet podwójnym powiększeniu.
  • Nie należy stosować bardzo mocnych i częstych animacji, ponieważ mogą one doprowadzić do epilepsji.

Kod:

  • Naturalnym jest, że ma on być semantyczny oraz wysokiej jakości, a cała strona nie może być oparta na tabelach.
  • Pod żadnym pozorem działanie strony nie może być zależne od skryptów JS oraz stylów CSS. Musi być tak zbudowana, aby po ich wyłączeniu można było z niej korzystać.
  • Strona musi posiadać ustalony język, a jeśli dana sekcja jest w innym, to również musi być znaczona za pomocą atrybutu lang=” “.
  • Wszystkie inputy powinny zostać opisane za pomocą atrybutu label.

Obsługa:

  • Cała strona internetowa musi pozwalać na obsługę z poziomu klawiatury oraz być dostępna dla czytników ekranowych.
  • Nawigacja musi być niezmienna w całym serwisie.
  • Bardzo dobrze jest zwiększyć widoczność focusu na elementach aktywnych.
  • Na początku strony powinien znajdować się odnośnik do treści, dostępny z poziomu klawiatury (przy pierwszym naciśnięciu tabulatora). W jaki sposób zrobić coś takiego? Na przykład można użyć kodu z wielokrotnie linkowanej strony wśród polskiej społeczności web developerskiej: “Semantyczny blog w HTML5“.

Podsumowanie.

To już wszystkie najważniejsze zasady, które pozwolą nam tworzyć dostępne strony. Oczywiście nie wymieniłem tu wszystkich zasad ogólnie, więc jeśli jesteś zainteresowany całością, to możesz zajrzeć tutaj (język angielski) lub tutaj (język polski). W tych dwóch miejscach dokument WCAG 2.0 został przedstawiony w całości.

Życzę Ci powodzenia w tworzeniu jak najlepszych witryn dla jak najszerszej grupy odbiorców! 🙂

Jeśli masz jakieś pytania lub sugestie, to oczywiście zapraszam Cię do komentowania, a jeśli ten artykuł okazał się dla Ciebie wartościowy, to będę niezmiernie wdzięczny jeśli udostępnisz go swoim znajomym lub czytelnikom. 🙂

Programista zakochany w JavaScript'cie, twórca stron internetowych i jak widać od niedawna bloger 🙂
4 comments Add yours
    1. Dziękuję Ci Michale za miłe słowa! Dokładnie taka myśl przyświecała mi podczas tworzenia tego wpisu 🙂

  1. Jest kilka rzeczy, które są dla mnie niejasne 😉

    – “Nie powinno się justować tekstu, a już na pewno wyrównywać do prawej strony. To wszystko pozwala na łatwiejsze korzystanie ze strony nie tylko przez osoby korzystające z czytników ekranowych, ale też przez każdego użytkownika internetu.” – dlaczego nie? Jak wpływa justowanie lub wyrównanie do prawej na czytniki ekranowe? Jak powinno się wyrównywać tekst; do lewej? Dlaczego użytkownikowi bez problemów z odbiorem strony miałoby przeszkadzać jedno albo drugie? Czy mowa o jakichś konkretnych przypadkach czy tekst powinien być zawsze do lewej bez względu na okoliczności? W jaki sposób równanie tekstu do lewej sprawia, że korzystanie ze strony jest łatwiejsze?
    – “Teksty powinny być napisane w sposób zrozumiały dla wszystkich ludzi.” – czyli dla jakich, jak? Kim jest normalny człowiek w tym kontekście? Co czyni tekst zrozumiałym? Co z barierą językową? Ludźmi, którzy porozumiewają się innym językiem lub chociażby slangiem? Co z ludźmi, którzy odwiedzili stronę tematyczną ale nie znają panującej w temacie terminologii? Czy są wytyczne w standardzie WCAG 2.0 odnośnie treści strony?
    – “Naturalnym jest, że ma on być semantyczny oraz wysokiej jakości, a cała strona musi być oparta na divach.” – zupełnie nie rozumiem, może jakiś przykład źle/dobrze? Chodzi o to, żeby nie była oparta na tabelkach? Czy można pominąć semantykę jeśli oprę stronę na divach? Czy strona na której są same divy jest semantyczna i wysokiej jakości? Dlaczego na divach a nie na article/section/span/fieldset/p/cokolwiek innego?
    – “Wszystkie formularze powinny zostać opisane za pomocą atrybutu label.” – *zgaduję, że chodziło o inputy a nie o formularze.* Dlaczego powinny? Jakie korzyści z tego płyną i dla kogo? Co dzieje się w sytuacji, w której nie są? Co różni znacznik label od span lub p, b, strong?
    – “Nawigacja musi być niezmienna w całym serwisie.” – mowa o jakiejś głównej nawigacji? To kolejny punkt, którego zupełnie nie rozumiem.

    1. Dziękuję Ci bardzo za tak obszerny komentarz! 🙂

      Zacznijmy może od tego, że w podpunkcie, o którym piszesz zbyt dużo rzeczy zostało przeze mnie “wrzucone do jednego worka”. Pisałem tam o używaniu nagłówków, list oraz paragrafów i to do nich odnosiła się wzmianka o wpływaniu na czytniki ekranowe. Z kolei jeśli chodzi o justowanie do którejkolwiek ze stron, to ten zabieg jest niezalecany z uwagi na zwykły komfort przy czytaniu (poza tym np. tekst wyrównany do obu marginesów jest trudniejszy w odczytaniu dla osób niedowidzących).

      “Zrozumiały dla wszystkich ludzi’ – mogłem to lepiej ująć, np. “Zrozumiały dla możliwie jak największej ilości osób”. 🙂 Wtedy będzie to miało większy sens, bo chodzi o unikanie niepotrzebnych “trudnych słów”, które mogą nie zostać zrozumiane przez czytelników naszego tekstu. Logicznym jest, że gdy potrzebujemy jakiegoś słowa, aby zachować sens zdania, to go użyjmy. Już poprawiam te zdanie. 🙂

      Tu z kolei chodzi dokładnie o to co napisałeś. Struktura witryny nie może być oparta na tabelach (dziękuję za pokazanie kolejnej części do poprawy :)). Tak naprawdę chodzi tylko o tę różnicę pomiędzy używaniem divów (czyli tak naprawdę znaczników div, article, span, main, section i innych, które są wyświetlane blokowo), a stosowaniem tabel do tworzenia struktury strony internetowej.

      Dokładnie, tak jak napisałeś chodzi o konkretne inputy. Label został przeznaczony do tego zadania, tak jak np. h1 pełni rolę głównego nagłówka na stronie. 🙂 Poza tym atrybut label świetnie współgra z czytnikami ekranowymi oraz ma zaimplementowane pewne właściwości, które jeszcze bardziej przystosowują go do opisywania inputów. Przykładowo, gdy nadamy naszemu znacznikowi label atrybut for=” ” i w niego klikniemy, to automatycznie zaczniemy pisać w tym inpucie, którego nazwę wpisaliśmy w wspomnianym atrybucie for=” “.

      Dokładnie, chodzi tu o główną nawigację. Przykładowo nie może być takiej sytuacji, że nasza witryna ma 3 podstrony: “Strona główna”, “O nas” oraz “Kontakt”, wszystkie znajdują się w nawigacji na stronie głównej, a gdy już wejdziemy w “Kontakt”, to w nawigacji zostaje sama “Strona główna” i “O nas”.

      Jeszcze raz dziękuję Ci za ten komentarz i mam nadzieję, że chociaż trochę udało mi się rozwiać Twoje wątpliwości. 🙂

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *