Scott Tiger Tech Blog

Blog technologiczny firmy Scott Tiger S.A.

Dostępność witryn WWW

Autor: Piotr Karpiuk o wtorek 21. Grudzień 2010


Szacuje się, że jeden na pięciu internautów cierpi z powodu jakiegoś rodzaju niepełnosprawności, a u jednej osoby na osiem niepełnosprawność ta ma charakter poważny. Niezależnie od względów etycznych i przepisów prawnych w niektórych krajach nakładających określone wymogi na sposób tworzenia serwisów WWW, zauważmy że mowa o segmencie rynku który znacznie częściej korzysta z handlu elektronicznego niż jakakolwiek inna grupa społeczna.

W3C opublikowała w 1999r. pierwszą wersję zbioru dokumentów znanych jako Wytyczne dotyczące dostępności treści internetowych (ang. Web Content Accessibility Guidelines, w skrócie WCAG 1), a w 2008 roku jego zaktualizowaną wersję WCAG 2. Aby wyjść naprzeciw pojawieniu się aplikacji RIA, działająca w obrębie W3C inicjatywa dostępności do sieci (ang. Web Accessibility Initiative, w skrócie WAI) opracowała regulujący te kwestie standard Accessible Rich Internet Applications Suite (WAI-ARIA).

Wszystkie te dokumenty nie zabraniają korzystania z powszechnie przyjętych technik tworzenia serwisów WWW, a jedynie wymagają od projektantów większej troski. Dostępność nie zmusza do tworzenia dwóch wersji witryny. Poprawa dostępności witryny może poprawić jej widoczność dla robotów sieciowych i w konsekwencji lepszą pozycję na liście wyników wyszukiwania.

WCAG 1

WCAG 1 to kilkanaście wytycznych, z których każda dzieli się na punkty kontrolne mające priorytety od A do AAA. Dokument ma zgodność poziomu A, jeśli zapewnia zgodność ze wszystkimi punktami kontrolnymi poziomu A. Zgodność AAA uważa się ogólnie za trudną do osiągnięcia i ma niewielkie znaczenie praktyczne (wiele punktów kontrolnych AAA ma charakter subiektywny). Większość ekspertów i niektóre oficjalne wytyczne rządowe w USA uważają zgodność poziomu AA jako wystarczającą. Stopień zgodności serwisu WWW z wytycznymi da się ocenić w sposób automatyczny (np. za pomocą CynthiaSays, HERA, WAVE, Total Validator, czy ATRC Web Accessibility Checker.

Przyjrzyjmy się tym punktom kontrolnym które sprawiają najwięcej trudności.

Przydatne odnośniki
WCAG 1
WCAG 2
WAI-ARIA
Zapewnij równoważne odpowiedniki treści dźwiękowych i wizualnych
Chodzi tu zwłaszcza o (obowiązkowy wg standardu HTML) opisujący zawartość obrazka atrybut alt znacznika img.
Nie polegaj wyłącznie na kolorze
Ok. 8% męskiej populacji ma różne problemy z rozróżnianiem barw, a niektóre urządzenia takie jak czytnik Kindle są monochromatyczne. Oprócz więc np. barwy zielonej dla bezpiecznego wyboru i czerwonej dla zagrożenia, warto stosować kształty lub etykiety tekstowe.
Korzystaj we właściwy sposób ze znaczników i arkuszy stylów
Używaj w arkuszach stylów jednostek względnych takich jak em i % zamiast px, a w HTMLu korzystaj z elementów semantycznych i strukturalnych.
Twórz tabele we właściwy sposób
Dane tabelaryczne mogą sprawiać problemy urządzeniom asystującym takim jak czytniki ekranowe. Używaj w tabelach nagłówków row i column, a w przypadku skomplikowanych tabel nie zapomnij o znacznikach takich jak thead, tfoot, czy tbody w celu zgrupowania wierszy, col i colgroup dla grupowania kolumn, a także atrybutach axis, scope i headers dla wskazania relacji między komórkami a nagłówkami. Znacznik caption pozwala dostarczyć krótkiego opisu tabeli, a atrybut summary – przeglądu zawartości tabeli użytkownikom czytników ekranowych. Przykład tabeli otagowanej według wytycznych.
Uniezależniaj się od sprzętu
Nie zmuszaj użytkownika do stosowania określonego rodzaju urządzenia wejściowego (np. tylko klawiatura, tylko myszka).

WCAG 2

Dość mocno krytykowane (za ogólnikowość i niezrozumiały żargon) oraz wolno przyjmujące się, a jednocześnie dużo większe objętościowo od poprzednika WCAG 2 zostało podzielone na cztery główne zasady, te z kolei na szereg wytycznych, a każda wytyczna ma kilka punktów kontrolnych (tzw. kryteriów sukcesu) podzielonych na wystarczające i doradcze (niewystarczające ale zalecane). Na szczęście witryny zgodne z WCAG 1 A i AA w większości przypadków spełniają też kryteria WCAG 2 bez konieczności wprowadzania żadnych poprawek lub niewielkim nakładem pracy. Obecnie tylko ATRC Web Accessibility Checker pozwala przetestować witrynę pod kątem WCAG 2.

ARIA

ARIA jest całkiem nieźle obsługiwanym przez współczesne przeglądarki (w tym MSIE 8) i biblioteki JavaScriptu (jQuery, Dojo, YUI) zbiorem rozszerzeń języka HTML, których można używać do opisywania elementów, dzięki czemu możliwe jest identyfikowanie roli, stanów i właściwości każdego z nich w sposób, który zwiększa dostępność witryny. Odnosi się to m.in. projektowania nowych kontrolek (widgetów) i określania ich roli oraz aktualnego stanu.

Niestety pomimo że ARIA jest produktem W3C, to jednak nie wchodzi w skład standardu HTML i tym samym korzystanie z niej powoduje pewne problemy przy walidacji HTMLa.

Aplikacja webowa zgodna z ARIA musi być użyteczna dla osób korzystających z klawiatury, bez myszy. Porządek przechodzenia klawiszem tabulacji (ang. tab order) jest określany przez kolejność występowania kontrolek w kodzie HTML lub też wartość atrybutu tabindex (liczba całkowita).

Atrybut role pozwala opisać rolę jaką pełni element:

Znaki orientacyjne
application, banner, main, navigation oraz search.
Struktura dokumentu
navigation, section, note oraz heading.
Struktura aplikacji
alert, alertdialog, progressbar oraz status.
Elementy interfejsu użytkownika
treegrid, toolbar, menuitem.
Elementy wejściowe użytkownika
checkbox, slider oraz option.

Stany dostarczają dynamicznych danych na temat elementów (np. czy dany element jest naciśnięty), a właściwości zapewniają informacje związane z naturą obiektów. Obydwa artefakty są realizowane za pomocą atrybutów HTML o nazwach z przedrostkiem aria-, np. aria-disabled, aria-flawto (wskazuje następny element w zalecanej kolejności odczytywania), aria-pressed itp.

Inne dobre praktyki

Tekst łącza (linku) powinien jasno identyfikować cel łącza i nie powinien zawierać w sobie jakichkolwiek założeń związanych z wykorzystywanym przez użytkownika urządzeniem wejściowym (np. słynne „kliknij tutaj”); gdy w większej liczbie łączy wykorzystuje się ten sam tekst, wszystkie one powinny wskazywać tę samą lokalizację.

Czytniki ekranowe (np. Window Eyes, JAWS) często wykorzystują nagłówki do tworzenia spisów treści. Staraj się korzystać z elementów Hx mając to na uwadze.

AccessColor analizuje wskazaną stronę WWW i wskazuje potencjalne problemy z kontrastem

W formularzach stosuj element label i za pomocą jego atrybutu for wiąż go bezpośrednio z elementem, dla którego ma on być etykietą. Zrozumienie bardziej skomplikowanych formularzy można ułatwić użytkownikom poprzez zgrupowanie związanych ze sobą pól i wyposażenie każdej z tych grup w odpowiednie nagłówki. Służą do tego elementy fieldset oraz zagnieżdżony w nim legend.

Mrugające lub błyskające strony mogą wywołać zagrażające życiu ataki u osób cierpiących na epilepsję.

Share and Enjoy:
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • Śledzik
  • Blip
  • Blogger.com
  • Gadu-Gadu Live
  • LinkedIn
  • MySpace
  • Wykop

Zostaw komentarz

XHTML: Możesz użyć następujących tagów: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>