Wszystko co trzeba wiedzieć, aby tworzyć DOSTĘPNE strony internetowe.

Dostępność stron internetowych wydaje się odległym i trochę niepotrzebnym tematem. Zdaję sobie z tego sprawę ponieważ przez 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 zakodowana i zoptymalizowana strona, jeśli nie będzie dało się z niej korzystać przez część użytkowników?

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.

Dokument WCAG 2.0.

Jest to skrót od angielskich słów “Web Content Accessibility Guidelines”. Został opublikowany przez Web Accessibility Initiative (inicjatywa W3C) i zawiera wszystkie informacje dotyczące dostępności stron internetowych. W 2012 roku stał się światową normą, wymaganą w przypadku 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. Dokładne sposoby na poprawę dostępności stron internetowych.

Najważniejsze zasady budowania dostępnych stron internetowych.

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. Sam strasznie późno dowiedziałem się o istnieniu tego atrybutu i dlatego stawiam go na pierwszym miejscu.
  • 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 wszystkich ludzi.

Wygląd:

  • Rzecz najważniejsza w tej części – kontrast. Wszystkie elementy powinny posiadać kontrast na poziomie 4.5-1 (super 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 musi być oparta na divach.
  • 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 formularze 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? Wystarczy wkleić taki kod HTML na początku strony:
<a href="#content" class="link-to-content" tabindex="1">Przejdź do treści</a>

…i ostylować go w taki sposób:

.link-to-content {
	position: absolute;
	top: -1000px;
	left: -1000px;
}
.link-to-content:focus {
	position: static;
}

Podsumowanie.

To już wszystkie najważniejsze zasady, pozwalające na tworzenie dostępnych stron. 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 znasz kogoś, dla kogo ten artykuł mógłby okazać się pomocny, to będę bardzo wdzięczny, jeśli prześlesz go do niego 🙂

Programista zakochany w JavaScript’cie, twórca stron internetowych i jak widać od niedawna bloger 🙂
2 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 🙂

Dodaj komentarz

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