W tym artykule zajmiemy się wytyczną 1.4, traktującą o szeroko pojętej rozróżnialności. Ze względu na dość dużą liczbę kryteriów sukcesu, opis tej wytycznej i uszczegóławiających ją kryteriów ukaże się w dwóch częściach. Oto część pierwsza.
Tradycyjnie już zacznijmy od treści samej wytycznej.
Wytyczna 1.4 Rozróżnialność
Ułatwiaj oglądanie i słuchanie treści oraz oddzielanie informacji od tła.
Sama wytyczna, jak już dobrze wiemy z poprzednich przykładów pozostałych wytycznych jest dość krótka, ale jej przekaz jest jasny. Należy ułatwić rozróżnianie informacji przekazywanych w treści od tła, na jakim są one umieszczone.
Aby rozwinąć tę wytyczną i ułatwić jej wdrażanie, przejdźmy do kryteriów sukcesu.
Kryterium sukcesu 1.4.1 Użycie koloru
(Poziom A)
Kolor nie jest wykorzystywany jako jedyny wizualny sposób przekazywania informacji, wskazywania czynności do wykonania lub oczekiwania na odpowiedź, czy też wyróżniania elementów wizualnych.
Co jest celem spełnienia tego kryterium sukcesu?
Celem tego kryterium jest zapewnienie wszystkim użytkownikom, którzy korzystają ze wzroku w pełni jak i z różnymi ograniczeniami dostępu do informacji przekazywanych przez różnice w kolorach w taki sposób, że każdy użyty do przekazywania informacji kolor ma przypisane mu znaczenie.
Gdy informacja jest przekazywana przez różnice kolorów na obrazie lub w innej formie nietekstowej, kolor może nie być widoczny dla użytkowników mających trudności z rozróżnianiem części lub nawet większości kolorów. W takim przypadku przekazanie tej samej informacji przy użyciu innych środków wizualnych zapewnia tym użytkownikom, którzy nie widzą lub nie rozróżniają kolorów możliwość ich postrzegania.
Zatrzymajmy się przy tym zagadnieniu.
Kolor jest jednym z najważniejszych atutów w projektowaniu treści internetowych i zapewnia większości osób natychmiastowy dostęp do różnego typu informacji. Kolor określa estetykę strony czy dokumentu, ich użyteczność oraz dostępność.
Niestety nie wszyscy użytkownicy, nawet słabowidzący a może właśnie szczególnie oni mogą postrzegać kolory w sposób ograniczony lub w ogóle nie mieć takiej możliwości, mimo szczątkowego korzystania ze wzroku. Kolor może być niepoprawnie dostrzegany też przez osoby starsze lub tych użytkowników, którzy posługują się monitorami z monochromatycznymi lub o ograniczonych możliwościach wyświetlania wielokolorowych treści.
Wszystkie wymienione grupy użytkowników nie będą miały dostępu do informacji przekazywanych wyłącznie przy pomocy różnic w kolorach.
Przykłady takich źle skonstruowanych treści to np. oznaczenie wymaganych pul formularza do wypełnienia wyłącznie kolorem czerwonym, rozróżnienie dwóch lub więcej porównywanych wartości na wykresach wyłącznie przy pomocy kolorów.
Jak zatem poprawnie przekazywać takie informacje? Można np. podświetlić niewypełnione, ale wymagane do wypełnienia pola formularza lub użyć innych atrybutów wizualnych takich jak podkreślenie, obramowanie itp.
Nie powinno to przy tym zniechęcać do stosowania koloru jako nośnika informacji, gdy zapewnimy stosowną alternatywę dla osób, które widzą, ale nie mogą poprawnie dostrzegać kolorów.
Kryterium to nie odnosi się bezpośrednio do osób korzystających z technologii wspomagających. O tym traktują inne wytyczne i kryteria sukcesu WCAG.
Podsumowując, nawet, jeżeli zapewnione zostanie stosowne przekazanie informacji zarówno w kolorze jak i technologiom wspomagającym, to kryterium nie jest jeszcze spełnione. Wymaga ono widocznej alternatywy dla kolorów, żeby informacje mogli odczytać wszyscy ci, którzy mają trudności z postrzeganiem kolorów i niekoniecznie korzystają z technologii wspomagających.
Korzyści wynikające ze spełnienia tego kryterium
Korzyści te dość wyraźnie wynikają z opisanego już celu, podsumujmy je tu jednak krótko i wymieńmy.
- Użytkownicy Słabowidzący często doświadczają ograniczonego widzenia kolorów, a zatem dodatkowe oznaczenie wizualne pomoże im uzyskiwać te same informacje, które przekazuje się w kolorze.
- Niektórzy starsi użytkownicy mogą nie widzieć dobrze kolorów, więc alternatywa w postaci innego wskazania wizualnego ułatwi im przyswojenie informacji.
- Użytkownicy, którzy mają daltonizm, odnoszą korzyści, gdy informacje przekazywane za pomocą koloru są dostępne w inny wizualny sposób.
- Osoby korzystające z monochromatycznych wyświetlaczy o ograniczonej liczbie kolorów mogą nie mieć dostępu do informacji zależnych od koloru, więc alternatywne wizualne atrybuty ten dostęp umożliwią.
- Użytkownicy, którzy mają problemy z rozróżnianiem kolorów, mogą szukać lub słuchać wskazówek tekstowych.
Kryterium sukcesu 1.4.2 Kontrola odtwarzania dźwięku
(Poziom A)
Jeśli jakieś nagranie audio włącza się automatycznie na danej stronie i jest odtwarzane przez okres dłuższy niż 3 sekundy, istnieje mechanizm umożliwiający przerwanie lub wyłączenie nagrania albo mechanizm kontrolujący poziom głośności niezależnie od poziomu głośności całego systemu.
Co jest celem spełnienia tego kryterium?
Gdy to kryterium jest spełnione, to osoby korzystające z czytnika ekranu wraz z programową syntezą mowy, będą mogły bez przeszkód zapoznać się z zawartością otwieranej strony. Jeżeli to kryterium nie zostanie spełnione, wtedy każdy dźwięk, którego odtwarzanie rozpocznie się automatycznie po załadowaniu strony i nie zostanie wstrzymany po trzech sekundach lub nie ma możliwości zatrzymania go na żądanie użytkownika uniemożliwi zapoznanie się z zawartością tej strony takiemu użytkownikowi.
To kryterium sukcesu jest tak ważne, że wymaga spełnienia go przed wszystkimi innymi, jeżeli na stronie będzie odtwarzana zawartość audio.
Jakie są korzyści ze spełnienia tego kryterium?
Są one dość oczywiste. Umożliwią każdej osobie, która korzysta z czytnika ekranu wraz z programowym syntezatorem mowy zapoznanie się z zawartością otwartej strony bez zakłóceń. Zapewnienie mechanizmu pozwalającego wstrzymać odtwarzanie automatycznie lub uruchomić je na żądanie użytkownika pozwoli spełnić to kryterium i jednocześnie odtworzyć dźwięk wtedy, gdy użytkownik będzie gotowy do jego odsłuchania lub zignorować go, jeżeli nie będzie chciał go odtworzyć, a tylko zapoznać się ze stroną.
Korzyść odnoszą nie tylko użytkownicy czytników ekranu, ale również wszyscy ci, którzy mają trudności ze skupieniem uwagi na zapoznawaniu się z treścią, gdy odtwarzany jest dźwięk.
Kryterium sukcesu 1.4.3 Kontrast (minimum)
(Poziom AA)
Wizualna prezentacja tekstu lub obrazu tekstu posiada współczynnik kontrastu wynoszący przynajmniej 4.5:1, poza następującymi wyjątkami:
- • Duży tekst:
- Duży tekst oraz grafiki takiego tekstu posiadają kontrast przynajmniej 3:1;
- • Incydentalne:
- Tekst lub obrazy tekstu, które są częścią nieaktywnego komponentu interfejsu użytkownika , które są czystą dekoracją , które nie są widoczne lub które są częścią obrazu zawierającego inne istotne treści wizualne, nie wymagają minimalnego kontrastu;
- • Logotyp:
- Tekst, który jest częścią logo lub nazwy własnej produktu (marki), nie wymaga minimalnego kontrastu.
Co jest celem tego kryterium sukcesu
Celem tego kryterium sukcesu jest zapewnienie wystarczającego kontrastu między tekstem a jego tłem, aby mogły go czytać osoby z umiarkowanie słabym wzrokiem, które nie korzystają z technologii wspomagających zwiększających kontrast.
W przypadku osób, które nie mają problemów z rozróżnianiem kolorów i odcieni zmiana kontrastu nie ma żadnego wpływu lub jest on minimalny na czytelność tekstu dla takich osób.
Tekst większy jest łatwiej rozróżnialny niż tekst mniejszy, a zatem zalecany współczynnik kontrastu jest dla niego odpowiednio niższy. Dla standardowego tekstu zaleca się stosować współczynnik kontrastu wynoszący 4,5:1, natomiast dla tekstów i obrazów większych o większym obrysie i kroju czcionki 3:1. Wartości te są wartościami progowymi, a zatem nie można ich zaokrąglić w dół.
O dokładnych zaleceniach przeczytacie więcej we WCAG 2.1 w sekcji zrozumieć kryterium sukcesu 1.4.3.
Kryterium sukcesu 1.4.4 Zmiana rozmiaru tekstu
(Poziom AA)
Oprócz napisów rozszerzonych oraz obrazów tekstu, rozmiar tekstu może zostać powiększony do 200% bez użycia technologii wspomagających oraz bez utraty treści lub funkcjonalności.
Co jest celem tego kryterium?
Celem tego kryterium sukcesu jest zapewnienie, że wizualnie renderowany tekst, w tym kontrolki tekstowe interfejsu użytkownika (znaki tekstowe, które zostały wyświetlone tak, aby były widoczne [w porównaniu ze znakami tekstowymi, które nadal są w postaci danych, takich jak ASCII]) mogą być pomyślnie przeskalowane, dzięki czemu może być on odczytywany bezpośrednio przez osoby mające niewielkie problemy ze wzrokiem, bez konieczności korzystania z technologii wspomagających, takich jak lupa ekranowa. Użytkownicy mogą odnieść korzyści ze skalowania całej zawartości strony internetowej, ale tekst ma największe znaczenie.
Jak to dokładnie rozumieć?
Chodzi o to, aby wyświetlany dokument, strona czy aplikacja, z uwzględnieniem kontrolek interfejsu użytkownika oraz wyświetlanych danych mogła być powiększona do dwukrotności swojej wyjściowej długości i szerokości bez utraty funkcjonalności i czytelności. Jeżeli wystąpi dalsza konieczność powiększania, zaleca się użycie technologii wspomagającej np. wspomnianej lupy ekranowej.
Aby spełnić to kryterium, twórca treści powinien wykonać ją tak, aby powiększenie zawartości bez utraty spójności było możliwe do wykonania zarówno przez agenta użytkownika np. przeglądarkę internetową jak i powinien zapewnić mechanizm powiększania zawartości do 200% standardowego rozmiaru dla tych użytkowników, którzy z różnych przyczyn takiego powiększenia nie mogą przeprowadzić po swojej stronie np. korzystają ze starszych aplikacji.
Nie zaleca się stosowania w treści obrazów tekstu, ponieważ taki obraz w powiększeniu może ulegać pikselizacji, a zatem należy wstawiać obraz tekstu tylko wtedy, gdy nie ma innej możliwości.
Kryterium sukcesu 1.4.5 Obrazy tekstu
(Poziom AA)
Jeśli wykorzystywane technologie mogą przedstawiać treść wizualnie, do przekazywania informacji wykorzystuje się tekst, a nie obraz tekstu, z wyjątkiem następujących sytuacji:
- • Możliwy do dostosowania:
- Obraz tekstu może być dostosowany wizualnie do wymagań użytkownika;
- • Istotny:
- Prezentacja tekstu w postaci graficznej jest istotna dla zrozumienia przekazywanej informacji.
Co jest celem tego kryterium sukcesu?
Celem tego kryterium sukcesu jest zachęcenie autorów treści, aby zawsze, gdy tylko to możliwe stosowali tekst, a nie obraz tekstu. Nawet, jeżeli tekst trzeba specjalnie dostosować, należy stosować wizualną prezentację tekstu przy użyciu stosownego formatowania zamiast obrazów tekstu. Istnieją oczywiście przypadki, gdy nie jest to możliwe np. logotyp z tekstem traktowanym jako całość stanowi obraz i jest grafiką. Nie można wyodrębnić tekstu z logotypu, a zatem powinien pozostać obrazem z tekstem.
Komu jest to potrzebne i kto skorzysta?
Skorzystają z pewnością osoby, które mają trudności z odczytywaniem konkretnych rodzin czcionek, lub z innym atrybutem tekstu. Łatwiej jest dostosować zawartość tekstową do wymagań osoby czytającej niż robić to z obrazem. Zamiast obrazu do np. formatowania nagłówków na stronie warto zastosować arkusze stylów css, zamiast stosowania konkretnego obrazu, bitmapy. Jest wiele sposobów na przedstawienie tekstu jako obrazu wizualnie bez konieczności rzeczywistego przekształcania fragmentu tekstu w obraz.
Dla tych, którym będzie to potrzebne proponuję sekcję WCAG poświęconą tematowi, jak spełnić kryterium sukcesu 1.4.5 oraz jak zrozumieć kryterium sukcesu 1.4.5.
Kryterium sukcesu 1.4.6 Kontrast (wzmocniony)
(Poziom AAA)
Wizualna prezentacja tekstu lub obrazu tekstu posiada współczynnik kontrastu wynoszący przynajmniej 7:1, poza następującymi wyjątkami:
- • Duży tekst:
- Duży tekst oraz grafiki takiego tekstu posiadają kontrast przynajmniej 4,5:1;
- • Incydentalne:
- Tekst lub obrazy tekstu, które są częścią nieaktywnego komponentu interfejsu użytkownika , które są czystą dekoracją , które nie są widoczne lub które są częścią obrazu zawierającego inne istotne treści wizualne, nie wymagają wzmocnionego kontrastu;
- • Logotyp:
- Tekst, który jest częścią logo lub nazwy własnej produktu (marki), nie wymaga wzmocnionego kontrastu.
Co jest celem tego kryterium?
Oczywiście cel jest dokładnie taki sam, jak w przypadku kryterium 1.4.3, czyli kontrast minimum. Tutaj mamy do czynienia jednak z wyższymi wymaganiami, co odzwierciedla poziom zgodności AAA kryterium 1.4.6.
Z pewnością trudniej jest spełnić kryterium na tym poziomie zgodności, ale jest to możliwe. Odsyłamy do stosownych wskazówek zarówno we CAG 2.1 jak i w zasobach dodatkowych, które są w tym dokumencie proponowane w celu pogłębienia wiedzy i możliwości.
Podsumowanie
To oczywiście nie wszystkie kryteria sukcesu związane z tą wytyczną. Wszystkie pozostałe od 1.4.7 aż do 1.4.13 postaramy się przybliży ć w kolejnym tekście z tego cyklu.