A co to jest A, AA, AAA?
Dla niektórych oczywista oczywistość, dla wielu niekoniecznie…dlatego szybkie i proste wyjaśnienie:
A, AA, AAA
Wymagania WCAG i kryteria sukcesu decydujące o ich spełnieniu są podzielone na trzy poziomy: podstawowy (A), średni – “wystarczający” (AA) i najwyższy (AAA) – ideał, do którego fajnie dążyć, ale tak naprawdę, w praktyce te wymagania są trudne do spełnienia. Zgodnie z prawem, mamy spełniać kryteria sukcesu na poziomie AA. Uogólniając – jeśli nie spełniamy kryteriów sukcesu nawet na poziomie A, to mamy błędy podstawowe, o wysokiej wadze. Poziomy te dotyczą nie tylko kwestii wizualnych, ale wszystkiego, o czym mówią zasady WCAG, również poprawności kodu.
A co to jest „A11y”?
…yyy, no cóż, to jest nieco mniej proste i intuicyjne, bo to tzw. numeronim. „A” to pierwsza litera słowa „Accessibility”, „y” – ostatnia, a „11” to liczba liter pomiędzy pierwszą a ostatnią literą. Na bank wymyślał programista, a nie UX-owiec. Tu ma być prosto, więc dam prostą radę bez wchodzenia w szczegóły – jak „A11y” wystąpi w zestawieniu z innymi słowami, narzędziami itp. – to wiadomo, że chodzi o dostępność cyfrową. Np. A11y audit – to audyt dostępności cyfrowej, wtyczka A11y – sprawdza albo zapewnia jakiś aspekt z tym związany, A11y issues – problemy z dostępnością – niespełnienie jakiś wymagań, itd. itp. (dla bardziej zaawansowanych lub zainteresowanych: A11y wykorzystuje się również w znacznikach HTML i klasach CSS, wtedy np. fragment HTML z identyfikatorem sugeruje związek z dostępnością – występuje np. w deklaracji dostępności zobacz szczegóły.)
Przykład:
Poniżej znajduje się łatwy do pokazania i zrozumienia przykład – kontrastu kolorów tekstu i tła. WCAG określa minimalny kontrast dla tekstu. Jest to ciekawy przykład, bo zdarza się, że to, co dla nas jest bardzo kontrastowe, nie przechodzi testu, a to, co wydaje się być nieczytelne – tak. Za pomocą wtyczki można sprawdzić matematycznie czy warunek odpowiedniego kontrastu jest spełniony i na jakim poziomie. Tutaj pokazujemy celowo właśnie takie nietypowe przykłady. Kontrast tekstu na tle przycisku został sprawdzony wtyczką służącą do tego celu w Figmie. Testowany element jest zaznaczony ramką wokół niego.
Pierwszy przykład to wersja spełniająca wymogi na poziomie AAA – seledynowe tło i ciemnozielony napis.
Drugi zrzut ekranu pokazuje ciekawe zestawienie kolorów, którego na pewno nie użylibyśmy w projekcie, chociażby ze względów UX – a jednak kryteria kontrastu są spełnione na poziomie AA (czyli wystarczającym)
Ostatni przykład – przycisk z białym napisem na zielonym tle, czyli często spotykane zestawienie kolorów – które, jak widać w oknie wtyczki mierzącej kontrast – niestety nie przechodzi testów.
