blog na temat dostępności stron internetowych

Przejdź do głównej treści

Używanie koloru zgodnie z zasadami dostępności

Ilekroć kolory omawiane są w kontekście projektowania stron internetowych, zazwyczaj rozważa się ich walory estetyczne oraz symboliczne znaczenie. Barwy stosowane są jednak nie tylko w celach dekoracyjnych oraz aby wywołać określone reakcje emocjonalne i skojarzenia. Kolory wykorzystywane są także jako sposób przekazywania informacji. Jest tak nie tylko w przypadku stron internetowych: od małego jesteśmy uczeni, że zielone światło oznacza, że możemy przejść przez ulicę, zaś czerwone (symbolizujące niebezpieczeństwo) nakazuje nam zatrzymanie się. Podobnie niektóre strony czy też aplikacje stosują zielone przyciski “zatwierdź” i czerwone “usuń”. Stosowanie kolorów w celu przekazania informacji jest jak najbardziej dopuszczalne; należy tylko pamiętać o jednej prostej zasadzie – kolor nie może być jedynym środkiem, za pomocą którego przekazywana jest dana informacja.

Przypadki, w których kolor stosowany jest do przekazania informacji, to na przykład:

  • zaznaczone na czerwono obowiązkowe pola formularza
  • zielony przycisk służący do dodania załącznika, czerwony do jego usunięcia
  • kilka wersji kolorystycznych tej samej ikonki służące do przekazania różnych informacji (np. w tabeli wyświetlającej faktury czerwony wykrzyknik oznacza, że dana faktura musi być zapłacona w bieżącym tygodniu, zaś pomarańczowy wykrzyknik symbolizuje faktury, które muszą zostać zapłacone w następnym tygodniu)
  • odnośniki, które od normalnego tekstu różnią się wyłącznie kolorem
  • wykres słupkowy, w którym każdy element oznaczony jest przy pomocy innego koloru
wykres słupkowy przedstawiający sprzedaż jabłek, gruszek i śliwek. Słupki różnią się od siebie jedynie kolorem.
Rys. 1: wykres przekazujący informację za pomocą kolorów

Alternatywne sposoby przedstawienia informacji przekazanej za pomocą koloru

Nie wszyscy użytkownicy są w stanie odebrać informację przekazaną za pomocą koloru. Osoby niewidome oraz osoby z zaburzeniami postrzegania barw potrzebują jakiegoś rodzaju alternatywy. Przyjrzyjmy się na przykład wykresowi przedstawionemu na obrazku nr 1 – czy osoby, które mają trudności z odróżnieniem kolorów, będą w stanie rozpoznać, który słupek wykresu odpowiada danemu produktowi?

Alternatywa tekstowa

Tekst jest z reguły najbardziej uniwersalnym sposobem przekazania informacji, dostępnym dla wszystkich grup użytkowników (włącznie z osobami niewidomymi).
I tak, dla podanych powyżej przykładów, można zapewnić następujące alternatywy:

  • obowiązkowe pola formularza zaznaczone są na czerwono oraz odpowiednia informacja podana jest w formie tesktu za pomocą etykiety pola, np.:
    <label for="nazwisko">Nazwisko: (wymagane)</label>
    
  • zielony przycisk oznaczony jest przy pomocy słów “Dodaj załącznik”, zaś czerwony posiada etykietę “Usuń załącznik”
  • wykres oznaczony jest nie tylko za pomocą koloru, ale także tekstu – każdy słupek wykresu posiada etykietę
każdy słupek wykresu przedstawionego na obrazku nr 1 jest oznaczony przy pomocy pierwszej litery produktu, który reprezentuje: 'j', 'g' i 'ś'
Rys.2: Przykład alternatywnego oznaczenia słupków wykresu

(Tego rodzaju opis tekstowy zapewni dostęp do informacji przekazanej za pomocą koloru dla osób z zaburzeniami postrzegania barw. Należy jednak pamiętać, że wykres ten, jako treść nietekstowa, będzie musiał również posiadać alternatywę dla osób niewidomych, albo w postaci krótkiego opisu, albo tabeli – więcej informacji na ten temat w artykule “Opisywanie treści nietekstowych – wykresy i infografiki”.)

Alternatywa wizualna

Innym rodzajem alternatywy przeznaczonej dla osób z zaburzeniami widzenia barw jest zapewnienie dodatkowego wizualnego oznacznika (np. ikonki) do przekazania tej samej informacji.
W odniesieniu do przedstawionych wcześniej przykładów, mogłoby to wyglądać następująco:

  • obowiązkowe pola formularza zaznaczone są na czerwono oraz otoczone są wyraźnie grubszą obwódką
  • ikonki o różnym znaczeniu różnią się od siebie nie tylko kolorem, np. czerwona ikonka przedstawia trzy wykrzykniki, zaś pomarańczowa jeden wykrzyknik
  • słupki wykresu różnią się kolorem oraz deseniem
słupki reprezentujące gruszki nie posiadają deseniu, słupki oznaczające jabłka posiadają pionowe linie, zaś słupki reprezentujące śliwki linie poziome
Rys.3

Przekazanie informacji za pomocą kodu

Zapewnienie alternatywy w formie dodatkowej wskazówki wizualnej rozwiązuje problem dostępności do informacji przekazanej za pomocą koloru dla osób z zaburzeniami postrzegania barw. Ale co z osobami niewidomymi?
Wróćmy do przykładu z polami formularza i do rozwiązania przedstawionego w sekcji “Wizualna alternatywa”:

“Wymagane pola formularza, zaznaczone są na czerwono, oraz otoczone są wyraźnie grubszą obwódką”.

Osoby korzystające z czytnika ekranu nie będą wiedzieć, czy i które pola zaznaczone są grubszą obwódką, tak samo jak nie wiedzą o tym, jaki pola te mają kolor. Czytniki ekranu ignorują wygląd elementów, przekazując swym użytkownikom tylko informację zawartą w tekście i w kodzie strony. Dlatego też stosując metodę alternatywy wizualnej informację o tym, które pola są wymagane, będziemy musieli również przekazać za pomocą kodu. Można to zrobić przez dodanie do każdego z tych pól odpowiednich atrybutów (“aria-required='true'” i “required='true'“).

Linki

Tradycyjnie każdy odnośnik wyświetlany jest na niebiesko (a w przypadku, gdy link był już przez użytkownika wcześniej wybrany, na fioletowo) oraz jego tekst jest podkreślony. Graficy projektujący strony często usuwają to podkreślenie linku; choć nie jest to zalecana praktyka, nie jest to też zabronione. W przypadku jednak, gdy tradycyjna i powszechnie rozpoznawana metoda zaznaczania odnośników nie jest stosowana, należy upewnić się, że wszyscy użytkownicy będą w stanie odróżnić odnośniki od zwyczajnego tekstu. Osoby niewidome wiedzą, które fragmenty tekstu są linkami niezależnie od tego, w jaki sposób są one wyświetlone. Czytniki ekranu automatycznie rozpoznają elementy oznaczone przy pomocy elementu <a> jako odnośniki i informują o tym użytkowników. Należy jednak wziąć pod uwagę potrzeby osób z zaburzeniami widzenia barw. I tak, jeśli stosujemy kolor, aby odróżnić linki od normalnego tekstu należy:

  • upewnić się, że różnica kontrastu pomiędzy zwykłym tekstem a tekstem odnośnika wynosi przynajmniej 3:1 oraz upewnić się, że każdy link zmienia swój wygląd, gdy otrzymuje fokus klawiatury oraz gdy użytkownik myszy przenosi nad niego kursor. Stanowi to dla użytkowników strony dodatkowe potwierdzenie, że dany fragment tekstu jest odnośnikiem a nie zwykłym tekstem;
  • alternatywnym sposobem jest zastosowanie dodatkowego wizualnego oznaczenia odróżniającego tekst odnośnika od pozostałego tekstu; może to być np. symbol strzałki, czy też zastosowanie pogrubionej czcionki.

Którą metodę wybrać?

Jak zwykle zależy to od konkretnego przypadku. Aczkolwiek na ogół tekst jest zalecanym sposobem przekazywania informacji, czasem lepiej jest zastosować dodatkowe wyróżnienie wizualne. Dziwnie wyglądałoby zaznaczenie linków przy pomocy tekstu, np. “Jeśli jesteś zainteresowany naszą ofertą, zapoznaj się z naszym prospektem (odnośnik)”…
Czasem można też połączyć wszystkie opisane powyżej metody (dodatkowe oznaczenie wizualne, kod i tekst, np. w przypadku zaznaczania pól, w których wykryte zostały błędy).

Ilekroć stosujemy kolor w celach informacyjnych, powinniśmy zadać sobie pytanie: czy wszyscy użytkownicy będą w stanie dotrzeć do tej informacji? Wyobraźmy sobie, że ktoś ogląda stronę, którą tworzymy, na czarno-białym monitorze. Czy w dalszym ciągu osoba ta będzie w stanie korzystać z tej strony? Czy będzie w stanie dotrzeć do informacji przedstawionej za pomocą koloru, czy informacja ta będzie zrozumiała? A co z osobami korzystającymi z czytników ekranu – czy informacja przekazana za pomocą koloru jest również przekazana za pomocą tekstu i/lub kodu, przy użyciu odpowiednich elementów i atrybutów HTML?

Dodaj komentarz

Należy wypełnić wszystkie pola oznaczone asteryskiem (*).
Zanim komentarz zostanie opublikowany będzie musiał zostać zatwierdzony przez moderatora.

Możesz wykorzystać następujące elementy HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>