WCAG - manifest
Postrzegalność
Informacje i komponenty interfejsu muszą być przedstawiane użytkownikom w sposób dostrzegalny dla ich zmysłów.
Alternatywa tekstowa
Zapewnij tekstowe zamienniki wszystkich treści nietekstowych, aby można je było zamienić na inne formy (np. powiększony druk, brajl, mowa syntetyczna, symbole lub prostszy język).
Obrazki, wykresy, mapy muszą mieć alternatywną treść dodawaną poprzez atrybut alt.
Jeśli element przenosi informację musi posiadać tekst alternatywny
Jeśli element jest tylko ozdobnikiem jako tekst alternatywny przekazujemy pustą wartość oraz nadajemy elementowi rolę "presentation"
Jeśli element jest odnośnikiem w tekście alternatywnym wpisujemy cel tego linku
Implementacja w Eximee:
Komponenty tworzone w Eximee, które zawierają grafikę powinny umożliwiać podanie atrybutu alt. Dotyczy to także komponentów umożliwiających dostarczanie lokalizacji grafiki za pomocą źródła danych. Komponenty powinny umożliwiać internacjonalizację tekstów alternatywnych.
Kod html dostarczany do komponentów (np. za pomocą TextContent lub tłumaczenia) powinien zawierać prawidłowo zdefiniowany atrybut alt dla elementów <img/>.
Możliwość adaptacji
Twórz treści, które mogą być prezentowane na różne sposoby bez utraty informacji czy struktury.
Stosuj odpowiednią kolejność nagłówków. Na stronie powinien być jeden nagłówek h1, a następne w kolejnej hierarchii (h2 → h3 → h4 ...)
Lista
Stosuj znaczniki list w odpowiedniej kolejności
Stosuj listy do wypunktowania linków
Jeśli usuwasz domyślny punktor w liście dodaj do głównego tagu listy atrybut role="list"
Tabela
Używaj tagu caption do opisywania treści tabeli
Używaj komórek nagłówkowych th
Tabele powinny być jak najbardziej regularne i proste
Kolejność wyświetlanych informacji powinna być logiczna i określona według kolejności w DOM
Elementy wyświetlane od lewej strony oraz od góry
Zapewnienie odpowiedniej kolejności tabulacji
Elementy nawigacyjne oraz komunikaty nie mogą zależeć od: kształtu, lokalizacji wizualnej, koloru, dźwięku
Wyświetlana treść musi być prawidłowo obsługiwana w orientacji pionowej i poziomej
Pola zbierające dane powinny określać pożądaną wartość. Należy dodać atrybut autocomplete z odpowiednią wartością
Implementacja w Eximee
Komponenty Eximee powinny używać standardowych elementów html - to znacznie ułatwia czytanie dokumentu przez zewnętrzne narzędzia. Jeżeli nie jest to możliwe używaj właściwych ról i atrybutów aria zgodnie z https://www.w3.org/WAI/ARIA/apg/patterns/
Teksty w komponentach Eximee powinny być umieszczone w elementach semantycznych, np.: <p>, <li>, <td>.
Kod html dostarczany do komponentów (np. za pomocą TextContent lub tłumaczenia) powinien zawierać właściwy poziom nagłówków (nie powinny zaczynać się od <h1>).
Kod html dostarczany do komponentów (np. za pomocą TextContent lub tłumaczenia) powinien zawierać teksty w elementach semantycznych, np.: <p>, <li>, <td>.
Różnorodność
Ułatwiaj oglądanie i słuchanie treści oraz oddzielanie informacji od tła.
Kolor nie może być jedynym wyróżnikiem elementu
wymagane pole na formularzu - np. użycie gwiazdki
link - np. podkreślenie
wykres - np. wyróżnienie linii figurą geometryczną, linią przerywaną lub etykietą
nieaktywne pole - np. dodatkowe obramowanie, ikonka krzyżyka kursora, przekreślenie elementu
Kontrola odtwarzania dźwięku - jeśli dźwięk na stronie trwa dłużej niż 3 sekundy to musi istnieć możliwość przerwania lub wyłączenia go lub kontroli głośności
Współczynnik kontrastu tekstu musi wynosić przynajmniej 4.5:1
jeśli tekst jest duży (większy niż 24px lub pogrubiony 18.5px) musi posiadać kontrast przynajmniej 3:1
ozdobniki, logo i nazwa własna produktu nie wymaga minimalnego kontrastu
Kontrast elementów nietekstowych pomiędzy obiektami graficznymi, elementami interfejsu (nie dotyczy elementów nieaktywnych), a przylegającym elementem musi wynosić przynajmniej 3:1
Nie zamieszczaj tekstu jako obrazek (wyjątek logo)
Po zwiększeniu odstępu tekstu wszystkie elementy muszą być nadal widoczne i czytelne
wysokość linii do co najmniej 1.5-krotności rozmiaru czcionki
odstęp między akapitami do co najmniej 2 razy większy od rozmiaru czcionki
odstęp między literami do co najmniej 0.12-krotności rozmiaru czcionki
odstęp między wyrazami do co najmniej 0.16 wielkości czcionki
Po zwiększeniu rozmiaru tekstu nawet do 200% nie może nastąpić utrata informacji i funkcjonalności
Responsywność - treść musi być prezentowana bez utraty informacji lub funkcjonalności na ekranach o szerokości min. 320px i wysokości min. 256px. Dodatkowo nie może nastąpić przewijanie w poziomie (wyjątkiem są dwuwymiarowe treści np. tabele, złożone obrazy, mapy i wykresy)
Zachowanie komponentu, gdy jest widoczna dodatkowa treść po najechaniu kursorem lub fokusu klawiatury, a po ich usunięciu znika
musi być mechanizmy pozwalający na odrzucenie dodatkowej treści (należy zapewnić obsługę klawisza ESC zamykającego tooltip)
dodatkowa treść pozostaje widoczna do momentu odrzucenia przez użytkownika lub jego informacje nie są już ważne
Wszystkie elementy powinny być widoczne po włączeniu trybu wysokiego kontrastu w systemie operacyjnym w szczególności powinny zachowywać wymagany kontrast.
Implementacja w Eximee
Makiety komponentów Eximee powinny być zgodne z wytycznymi WCAG (kontrast, wyróżnienie, itp).
Wszystkie teksty wyświetlane przez komponenty Eximee powinny mieć możliwość powiększenia za pomocą odpowiedniego narzędzia, a co za tym idzie powinna być możliwość ustawienia kursora nad tekstem (np. nad tekstem podpowiedzi).
Etykiety wyświetlane wewnątrz komponentów Eximee powinny zostać zachowane na ekranach o szerokości 320px.
Funkcjonalność
Komponenty interfejsu użytkownika i nawigacja powinny być możliwe do użycia
Dostępność klawiatury
Zapewnij dostępność wszystkich funkcjonalności za pomocą klawiatury
Musi być zapewniona możliwość poruszania się po stronie wyłącznie za pomocą klawiatury
Jeśli można przenieść fokus za pomocą klawiatury to musi być możliwość jego usunięcia w ten sam sposób. Jeśli istnieje inny sposób opuszczenia komponentu należy wyświetlić odpowiednią podpowiedź
Jeśli używamy jedno znakowych skrótów klawiszowych to powinno być spełnione jedno z poniższych wymagań
istnieje możliwość wyłączenia skrótu
istnieje możliwość zmiany mapowania
skrót jest aktywny tylko, gdy ma fokus
Wystarczający czas
Zapewnij użytkownikom wystarczająco dużo czasu na przeczytanie i skorzystanie z treści
Gdy czas korzystania z treści jest ograniczony to musi pojawić się informacja z pozostałym czasem i należy spełnić przynajmniej jeden z poniższych warunków
użytkownik może wyłączyć limit czasowy, zanim czas upłynie
użytkownik może przedłużyć limit czasowy
użytkownik może dostosować czas
Jeśli treść się porusza, migocze, przesuwa lub jest automatycznie aktualizowana to powinna mieć możliwość cofnięcia oraz zatrzymania lub ukrycia
Możliwość nawigacji
Zapewnij użytkownikowi narzędzia pomagające w nawigacji, znalezieniu treści i określeniu, gdzie się aktualnie znajduje
Tytuł strony powinien identyfikować bieżącą lokalizację bez konieczności czytania treści strony
Fokus powinien przechodzić od lewej do prawej, a po zmianie strony powinien znajdować się na nagłówku h1 lub początkowym punkcie orientacyjnym
Łącza muszą jasno informować co robią oraz dokąd prowadzą
Jeśli w treści używamy znaków specjalnych np. strzałka to należy go ukryć za pomocą aria-hidden
Nagłówki i etykiety muszą opisywać temat lub cel treści
Fokus na polu powinien być widoczny, mieć obramowanie o odpowiednim kontraście i rozmiar co najmniej 2px oraz być spójny na wszystkich elementach
Nie stosuj wyłącznie dużych liter w linkach
Implementacja w Eximee
Komponenty Eximee wymagające rekcji użytkownika (popup, informacja o wygasającej sesji) powinny automatycznie ustawiać fokus.
Jeżeli treścią odnośnika jest grafika to powinna ona zawierać treść alternatywną.
Atrybuty aria stosowane w komponentach Eximee powinny mieć możliwość ustawienia odpowiedniej wersji językowej.
Jeżeli treść odnośnika jest niepełna (np. wynika z innych widocznych treści) należy dodać dodatkową treść, która nie będzie widoczna, ale będzie dostępna dla czytników.
Metody obsługi
Ułatwiaj użytkownikom obsługę funkcji za pomocą różnych sposobów poza klawiaturą.
Jeśli komponent jest obsługiwany za pomocą gestów wielopunktowych to powinna być możliwość wykonania tej samej czynności gestem jednopunktowym
Jeśli komponent jest obsługiwany poprzez przechylenie, potrząsanie lub ruchem użytkownika to powinna być możliwość wyłączenia i zapewnienia obsługi poprzez standardowe elementy sterujące
Jeśli klikniemy na element to powinna być możliwość rezygnacji z akcji. Akcja powinna wykonać się na event mouseup
Jeśli w linku lub przycisku i używamy alternatywnego tekstu (aria-label) to powinien zaczynać się on od tekstu z etykiety
Zrozumiałość
Treść oraz obsługa interfejsu użytkownika musi być zrozumiała.
Możliwość odczytania
Twórz treści możliwe do odczytania i zrozumienia.
W tagu HTML powinien być atrybut lang z językiem strony
Jeśli dodajemy tekst w innym języku niż reszta strony to powinien posiadać atrybut lang z jego językiem
Treści wyczytywane przez czytnik są zrozumiałe, bez zbędnych powtórzeń i jednoznaczne dla odbiorcy
Implementacja w Eximee
Jeżeli w kodzie HTML dostarczanym do komponentów (np. za pomocą TextContent lub tłumaczenia) znajdują się teksty w innym języku niż reszta strony możemy nadać im atrybut lang np. umieszczając je w elemencie <span>.
Przewidywalność
Twórz strony internetowe tak, aby otwierały się, wyglądały i działały w sposób przewidywalny.
Po otrzymaniu fokusu przez komponent nie może zadziać się od razu żadna z akcji, bez potwierdzenia przez użytkownika
Zmiana wartości w komponencie nie może wykonać automatycznie żadnej akcji zmiany kontekstu
Elementy do nawigacji powinny być na podstronach w tym samym miejscu
Te same elementy na różnych stronach powinny mieć takie same etykiety
Użytkownik powinien zostać poinformowany o tym, że łącze otworzy się w nowej karcie lub innej aplikacji
Implementacja w Eximee
Jeżeli w kodzie html dostarczanym do komponentów (np. za pomocą TextContent lub tłumaczenia) znajdują się odnośniki otwierające się na innej karcie lub aplikacji można podać dodatkową informację która nie będzie widoczna, ale będzie czytana przez czytniki (np. umieszczając je w elemencie <span>).
Pomoc przy wprowadzaniu informacji
Pomagaj użytkownikom unikać błędów i je korygować.
Jeśli automatycznie zostanie wykryty błąd wprowadzania danych, błędny komponent powinien być wyróżniony oraz użytkownik powinien otrzymać opis błędu
Każde pole formularza powinno mieć etykietę lub instrukcję
Każdy element nawigacyjny komponentu powinien mieć etykietę.
Jeśli automatycznie zostanie wykryty błąd wprowadzania danych, wtedy użytkownik powinien otrzymać jasny komunikat o błędzie oraz instrukcję jak go naprawić
Na formularzu powinna być strona z potwierdzeniem danych (strona podsumowania z możliwością weryfikacji, cofnięcia i poprawy danych oraz wysłania)
Jeśli istnieje określony format danych dodaj tekst alternatywny z jego opisem
Implementacja w Eximee
Element komponentu Eximee wyświetlający informację o błędzie powinien być powiązany z polem formularza za pomocą atrybutu aria-describedby.
Elementy nawigacyjne komponentów Eximee powinny być powiązane z etykietami za pomocą atrybutu aria-labelledby.
Komponenty Eximee umożliwiające podanie danych w określonym formacie powinny zawierać ukryty tekst z opisem tego formatu (np. element <span> z atrybutem aria-hidden=false).
Solidność
Treści muszą być solidnie przygotowane aby mogły być skutecznie interpretowane przez różne programy użytkownika, w tym technologie wspomagające.
Kod powinien spełniać standard HTML
Gdy tworzymy własne komponenty należy zapewnić odpowiednią rolę i wartość poprzez stosowanie atrybutów ROLE i ARIA-*
Jeśli wyświetlamy komunikat na którym nie znajduje się fokus, to należy zapewnić odczytanie go przez czytnik poprzez role
Implementacja w Eximee
Komponenty Eximee, które sterują widocznością elementów, powinny dynamicznie sterować również atrybutami aria-hidden.
Komponenty Eximee, które sterują rozwinięciem elementów, powinny dynamicznie sterować również atrybutami aria-expanded.
Komponenty Eximee, które uzyskują zbiór danych wynikowych (np. filtry, wyszukiwania) powinny powiadamiać o zbiorze znalezionych wyników za pomocą niewidocznych elementów z atrybutami aria-atomic="true" i aria-live="polite". W przypadku pustego zbioru wynikowego należy powiadomić użytkownika stosując na elemencie informującym o braku wyników atrybut role="alert".
Przydatne narzędzia
Walidator
Walidator zgodności HTML
Analiza kontrastu
Zakładka Dostępność w Firefox
Materiały
Last updated
Was this helpful?