| Alternatywa tekstowa tekstowa alternatywa dla treści nietekstowych, takich jak obrazy,dźwięki, filmy, animacje, itp. Alternatywa ta powinna być dostępnadla użytkowników, którzy nie mogą zobaczyć lub usłyszeć treści, atakże dla wyszukiwarek internetowych. Do tej kategorii należądeskrypcja, transkrypcja i tekst alternatywny dla grafik | |
| Audiodeskrypcja Opis dźwiękowy treści wizualnej, który umożliwia osobom niewidomymlub niedowidzącym zrozumienie treści wizualnych w filmach,telewizji, teatrze, itp. | |
| Deskrypcja tekstowy opis treści, który umożliwia użytkownikom zniepełnosprawnościami zrozumienie treści, które nie są dostępne dlanich w inny sposób. | |
| Dostępna nazwa tekst, który identyfikuje element interfejsu użytkownika dlatechnologii asystujących, takich jak czytniki ekranu. Dostępna nazwamoże nie być widoczna dla użytkowników, którzy nie korzystają ztechnologii asystujących. Jeżeli jest widoczna, to jest etykietą. | |
| Elementy dekoracyjne elementy graficzne, które nie mają znaczenia semantycznego i nieprzekazują informacji o treści. Usunięcie ich z interfejsu niespowoduje utraty żadnych informacji. Elementy dekoracyjne należyoznaczać tak, żeby były pomijane przez technologie asystujące. | |
| Etykieta tekst, który opisuje funkcję elementu formularza lub kontrolki, takiej jak pole tekstowe, przycisk, łącze, pole wyboru itp. Etykieta jest widoczną formą dostępnej nazwy. | |
| Fokus stan, w którym element formularza lub kontrolka jest aktywna i gotowa do przyjęcia wprowadzonych danych. Fokus powinien być zawsze wizualnie wyróżniony, aby użytkownik wiedział, gdzie wprowadza dane lub kliknąć na link. | |
| Język migowy naturalny wizualno-przestrzenny język komunikowania się Głuchych. Nie należy go mylić z systemem językowo-migowym. | |
| Kontrast różnica między jasnością dwóch kolorów, które są obok siebie. Wysoki kontrast ułatwia odczytanie tekstu i innych elementów interfejsu użytkownika. | |
| Live Region obszar strony internetowej, który jest dynamicznie aktualizowany bez interakcji użytkownika, takie jak wiadomości na żywo, powiadomienia o błędach, itp. Technologie asystujące powinny być w stanie wykryć zmiany w live regionach i poinformować o nich użytkowników. | |
| Napisy rozszerzone napisy do multimediów, które zawierają dodatkowe informacje, takie jak dźwięki otoczenia, muzyka, ton wypowiedzi, a także identyfikujące osoby, jeżeli nie wynika to z treści obrazu. Nie należy ich mylić z napisami dialogowymi w filmach obcojęzycznych. | |
| Okruszki (breadcrumps) nawigacyjne elementy interfejsu użytkownika, które umożliwiają użytkownikom śledzenie swojego położenia w hierarchii strony internetowej. Nazwa wzięła się z bajki o Jasiu i Małgosi, którzy rzucali za sobą okruszki chleba, żeby odnaleźć drogę powrotną do domu. | |
| Prosty język Język, który jest łatwy do zrozumienia dla możliwie dużej grupy osób. Prosty język pozwala na zrozumienie przekazywanej informacji dzięki stosowaniu prostej składni, powszechnie znanych słów i pojęć, odpowiednią strukturę logiczną i układ graficzny. Nie należy go mylić z tekstem łatwym do czytania ETR, który jest specjalnym sposobem tworzenia tekstów dla osób z niepełnosprawnością intelektualną (ETR). | |
| Pułapka na klawiaturę Element interfejsu użytkownika, który przyjmuje fokus klawiatury, ale fokusu nie można już przemieścić w inne miejsce. Pułapka na klawiaturę sprawia, że obsługa strony internetowej za pomocą klawiatury jest utrudniona lub niemożliwa. | |
| Region grupa elementów interfejsu użytkownika, które są powiązane ze sobą funkcjonalnie. Takimi regionami mogą być nagłówek strony, stopka, główna treść, elementy nawigacyjne, wyszukiwarka. | |
| Rola funkcja elementu interfejsu użytkownika, taka jak przycisk, link, nagłówek, pole wyboru i inne. Określona rola pozwala technologiom asystującym na prawidłowe interpretowanie i obsłużenie kontrolki. | |
| Skiplink nawigacyjny link, który umożliwia użytkownikom pominięcie powtarzających się elementów interfejsu użytkownika, takich jak menu nawigacyjne i przejście bezpośrednio do treści strony. Powinien być pierwszym elementem na stronie przyjmującym fokus klawiatury. | |
| Stan informacja o tym, czy element interfejsu użytkownika jest wybrany, włączony, wyłączony, niedostępny itp. Stany są często komunikowane za pomocą zmian w wyglądzie elementu, takich jak kolor, rozmiar, położenie itp. | |
| Technologie asystujące wszelkiego rodzaju technologie ułatwiające lub umożliwiające dostęp do informacji osobom z niepełnosprawnością. | |
| Tekst łatwy do czytania (ETR) format prezentowania tekstu przeznaczony dla osób z niepełnosprawnością intelektualną uwzględniający konkretne formy gramatyczne, słownictwo, sposób formatowania tekstu oraz graficzne elementy wspomagające kojarzenie i zapamiętywanie treści. | |
| Transkrypcja tekstowa wersja treści dźwiękowej lub wideo, która umożliwia osobom niesłyszącym lub słabo słyszącym zrozumienie treści. Od napisów rozszerzonych różni się tym, że nie jest zsynchronizowana z materiałem multimedialnym. | |
| Web Content Accessibility Guidelines (WCAG) 2.2 to powszechnie | |
| akceptowany standard tworzenia treści elektronicznych dostępnych dla | |
| osób z niepełnosprawnościami. | |
| Struktura jest następująca: - Na szczycie są 4 zasady, w których znajduje się - 13 wytycznych, które są ogólnymi wskazaniami weryfikowanymi przez - Kryteria sukcesu. Każde kryterium sukcesu jest przypisane do poziomu dostępności: - Poziom A, czyli zupełnie podstawowy, pozwalający na korzystanie z treści cyfrowych dużej części osób z niepełnosprawnościami - Poziom AA, czyli rekomendowany poziom dostępności, wymagany przez polskie przepisy - Poziom AAA, czyli wyjście poza minimum i dostarczenie lepszych rozwiązań i uwzględniający szerszą grupę odbiorców | |
| Uwaga! WCAG były już 2 razy aktualizowane. Wersja 2.0 została opublikowana w 2008 r, wersja 2.1 w 2018 r, a wersja 2.2 w 2023 r. W związku z tym Pojawił się pewien bałagan z numeracją kryteriów sukcesu. Nowe kryteria sukcesu dostawały kolejne numery, ale były na różnych poziomach dostępności. Dlatego po kryterium na poziomie AAA może się pojawić kryterium na poziomie AA lub A. Przy każdym kryterium sukcesu podaję poziom dostępności. | |
| Zasada 1 – Postrzegalność Przedstawiaj użytkownikom informacje i komponenty interfejsu w sposób dostrzegalny dla ich zmysłów. - Pamiętaj o użytkownikach, którzy nie widzą lub widzą słabo. - Pamiętaj o użytkownikach, którzy nie słyszą lub słyszą słabo. - Każdy użytkownik czasem nie widzi lub nie słyszy. | |
| Wytyczna 1.1 – 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) - Tekst jest najlepszą formą informacji do dalszego przetwarzania. - Każdy element, który nie jest tekstem, powinien mieć alternatywę w postaci tekstu. | |
| 1.1.1 Treść nietekstowa Poziom A Wszelkie treści nietekstowe przedstawione użytkownikowi posiadają swoją tekstową alternatywę, która pełni tę samą funkcję, z wyjątkiem sytuacji opisanych poniżej: - Kontrolki użytkownika i wprowadzanie danych przez użytkownika: Jeśli treść nietekstowa jest kontrolką użytkownika lub polem wprowadzania danych, wtedy posiada nazwę opisującą jej przeznaczenie. (Kryterium sukcesu 4.1.2 podaje dodatkowe wymagania dotyczące kontrolek oraz wprowadzania danych przez użytkownika.) - Media oparte na czasie: Jeśli treścią nietekstową są media oparte na czasie, wtedy alternatywa tekstowa zawiera przynajmniej opisowe określenie treści nietekstowej. (Wytyczna 1.2 podaje dodatkowe wymagania, jeśli chodzi o media.) - Test: Jeśli treść nietekstowa jest testem lub ćwiczeniem, które utraciłoby swój sens ze względu na przedstawienie tej samej treści w postaci tekstu, wtedy alternatywa w postaci tekstu podawać powinna przynajmniej opis pozwalający zrozumieć przeznaczenie treści nietekstowej. - Odczucie zmysłowe: Jeśli treść nietekstowa ma za zadanie przede wszystkim tworzyć konkretne odczucie zmysłowe, wtedy alternatywa w postaci tekstu jest opisem pozwalającym zrozumieć przeznaczenie treści nietekstowej. - CAPTCHA: Jeśli celem treści nietekstowej jest potwierdzenie, że do treści ma dostęp człowiek, a nie komputer, wtedy dostarcza się alternatywę w postaci tekstu, która identyfikuje oraz opisuje cel treści nietekstowej. Dostarcza się również alternatywnych zabezpieczeń typu CAPTCHA, dostosowanych do różnych możliwości percepcji użytkowników, uwzględniając różne rodzaje niepełnosprawności. - Cele dekoracyjne, formatowanie, treść niewidoczna: Jeśli treść nietekstowa pełni funkcję czysto dekoracyjną, używana jest do formatowania wizualnego lub też nie jest przedstawiana użytkownikowi, powinna być wdrożona w sposób umożliwiający technologiom wspomagającym jej zignorowanie. *** - Każda grafika powinna mieć alternatywny opis, dzięki któremu niewidomy użytkownik dowie się, co się na niej znajduje. - Grafiki dekoracyjne, które nie dostarczają żadnej nowej informacji, powinny być oznaczone jako dekoracyjne. - Graficzne linki i przyciski mają inne reguły. - Multimedia, w tym filmy, podcasty, animacje powinny być opisane w podstawowy sposób, na przykład przez podanie tytułu. - Nie musisz powtarzać w opisie informacji, które są już podane w tekście obok grafiki. | |
| Wytyczna 1.2 – Multimedia Zapewnij rozwiązania alternatywne dla mediów opartych na czasie. - Media oparte na czasie to po prostu media, które się zmieniają. Należą do nich filmy, animacje, podcasty, gry wideo, wirtualne spacery itp. | |
| 1.2.1 Tylko audio lub tylko wideo (nagranie) Poziom A Dla mediów nagranych w systemie tylko audio lub tylko wideo stosuje się następujące zasady, z wyjątkiem sytuacji, kiedy nagranie audio lub wideo jest alternatywą dla tekstu i w taki sposób jest oznaczone: - Alternatywa dla audio: Zapewniona jest alternatywa tekstowa dla nagrań dźwiękowych przedstawiająca tę samą treść, co nagranie audio. - Alternatywa dla wideo: Zapewniona jest alternatywa tekstowa albo audiodeskrypcja dla nagrań - Do nagrań dźwiękowych (podcasty, audycje) dodaj transkrypcję, czyli tekst z tym, o czym mówią ludzie w nagraniu. - Dla filmów bez dźwięku możesz dodać transkrypcję tekstową lub audiodeskrypcję. | |
| 1.2.2 Napisy rozszerzone (nagranie) Poziom A Do wszystkich nagrań audio w multimediach zsynchronizowanych (dźwięk i obraz), z wyjątkiem sytuacji, kiedy są one alternatywami dla tekstu i w taki sposób są oznaczone, zapewnione są napisy rozszerzone. - Napisy rozszerzone to są napisy przeznaczone dla osób niesłyszących. Oprócz list dialogowych zawierają dodatkowe informacje o istotnych dźwiękach. - Napisy nie są potrzebne, jeżeli w filmie nie ma wypowiedzi głosowych. - Najlepiej stosować napisy zamknięte, czyli takie, które można włączyć lub wyłączyć. | |
| 1.2.3 Audiodeskrypcja lub alternatywa tekstowa dla mediów (nagranie) Poziom A Zapewniona jest alternatywa dla multimediów lub audiodeskrypcja dla nagrań wideo w multimediach zsynchronizowanych (dźwięk i obraz), z wyjątkiem sytuacji, kiedy są one alternatywami dla tekstu i w taki sposób są oznaczone. - Możesz wybrać, czy do filmu dodasz opis tekstowy, czy audiodeskrypcję. - Audiodeskrypcja lub alternatywa dla mediów nie jest potrzebna, jeżeli informację można uzyskać na podstawie dźwięku. | |
| 1.2.4 Napisy rozszerzone (na żywo) Poziom AA Do wszystkich treści audio w multimediach zsynchronizowanych (dźwięk i obraz) przekazywanych na żywo zapewnione są napisy rozszerzone. - Transmisje wideo, na przykład webinary, powinny mieć dodane napisy dla osób niesłyszących. - Możesz to zapewnić profesjonalną usługą, automatycznym rozpoznawaniem mowy lub sadzając kogoś do pisania na bieżąco. - To kryterium sukcesu nie jest obowiązkowe z punktu widzenia ustawy o dostępności cyfrowej. | |
| 1.2.5 Audiodeskrypcja (nagranie) Poziom AA Zapewniona jest audiodeskrypcja dla wszystkich nagrań wideo w multimediach zsynchronizowanych. - W tym kryterium sukcesu nie masz już wyboru i musisz zapewnić audiodeskrypcję, ale nie opis tekstowy. - Spełnienie tego kryterium oznacza automatycznie spełnienie kryterium sukcesu 1.2.3. | |
| 1.2.6 Język migowy (nagranie) Poziom AAA Zapewnione jest tłumaczenie w języku migowym wszystkich nagrań audio w multimediach zsynchronizowanych (dźwięk i obraz). - Do każdego filmu należy dodać tłumaczenie na język migowy. - Język migowy jest czymś innym niż system językowo-migowy. - Skorzystaj ze standardów umieszczania obrazu tłumacza języka migowego w filmach, na przykład wydanych przez Krajową Radę Radiofonii i Telewizji (KRRiT). | |
| 1.2.7 Rozszerzona audiodeskrypcja (nagranie) Poziom AAA Jeśli przerwy w ścieżce dźwiękowej nagrania nie pozwalają na zamieszczenie audiodeskrypcji przekazującej sens treści w wystarczającym stopniu, dla wszystkich nagrań wideo w multimediach zsynchronizowanych (dźwięk i obraz) zapewniona jest rozszerzona audiodeskrypcja. - Rozszerzona audiodeskrypcja polega na tym, że film jest wstrzymywany na czas, gdy lektor podaje audiodeskrypcję, a następnie film jest ponownie uruchamiany. - Użycie rozszerzonej audiodeskrypcji jest czasem bardziej optymalne, niż zwykłej audiodeskrypcji. - Audiowstęp jest rodzajem audiodeskrypcji rozszerzonej. | |
| 1.2.8 Alternatywa dla mediów (nagranie) Poziom AAA Zapewniona jest alternatywa dla wszystkich nagrań w multimediach zsynchronizowanych (dźwięk i obraz) oraz dla wszystkich nagrań tylko wideo (sam obraz). - Dla wszystkich filmów, zarówno ze ścieżką dźwiękową, jak i bez niej, jest dodany opis tekstowy. - To rozwiązanie służy osobom głuchoniewidomym, czyli takim, które równocześnie nie widzą i nie słyszą. | |
| 1.2.9 Tylko audio (na żywo) Poziom AAA Zapewniona jest alternatywa dla multimediów przedstawiająca informacje takie same, jak w przekazie tylko audio na żywo. - Transmisje dźwiękowe, na przykład audycje radiowe, mają dołączony na bieżąco tekst. - Działa to podobnie jak napisy w filmach, ale musi być wyświetlane w inny sposób, na przykład w formie chatu. | |
| Wytyczna 1.3 – Możliwość adaptacji Twórz treści, które mogą być prezentowane na różne sposoby bez utraty informacji czy struktury. - Staraj się, żeby dokument po przetworzeniu zachował informacje. - Przetworzenie to może być wydruk, zapisanie w innym formacie, powiększenie, wytłoczenie w Braille’u, wygenerowanie mowy itp. | |
| 1.3.1 Informacje i relacje Poziom A Informacje, struktura oraz relacje między treściami przekazywane poprzez prezentację mogą być odczytane przez program komputerowy lub istnieją w postaci tekstu. - Stosuj prawdziwe tabele, listy numerowane i punktowane, nagłówki odpowiednich poziomów. - Połącz etykiety z elementami formularzy programowo. - Opisz tekstem zależności, jeżeli nie da się tego zrobić programowo. | |
| 1.3.2 Zrozumiała kolejność Poziom A Jeśli kolejność, w jakiej przedstawiona jest treść, ma znaczenie dla zrozumienia treści — prawidłowa kolejność odczytu musi być określona programowo. - Jeżeli treść ma określoną kolejność czytania (na przykład układ wielokolumnowy), zadbaj by ta kolejność była oczywista także dla technologii asystujących. - Nie używaj spacji do tworzenia wyglądu tabel, układu wielokolumnowego lub rozsuwania liter w wyrazach. - Jeżeli nie jest to oczywiste, zadeklaruj kierunek odczytu tekstu (na przykład od lewej do prawej). | |
| 1.3.3 Właściwości zmysłowe Poziom A Instrukcje co do zrozumienia i operowania treścią nie opierają się wyłącznie na właściwościach zmysłowych, takich jak: kształt, rozmiar, wzrokowa lokalizacja, orientacja w przestrzeni lub dźwięk. - To kryterium dotyczy różnego rodzaju instrukcji przekazywanych użytkownikowi, na przykład “kliknij czerwoną ikonę”, “w prawym górnym rogu”, “po usłyszeniu dzwonka”. - Nie każdy rozpozna prawidłowo kolor, którego nazwę podasz w instrukcji. - Unikaj pojęć w rodzaju “duży”, “mały”, “okrągły” itp. A jeżeli ich używasz, wyjaśnij dokładniej o które elementy chodzi. - Jeżeli jakiś dźwięk jest jedynym sposobem na wykonanie zadania, dodaj także informację wizualną, żeby dać szanse osobom głuchym. | |
| 1.3.4 Orientacja Poziom AA Treść nie ogranicza swojego widoku i działania do jednej orientacji wyświetlania, takiej jak pionowa lub pozioma, chyba że określona orientacja wyświetlania jest istotna. - Czasem użytkownik nie może obrócić tabletu lub smartfonu, bo ma niesprawne ręce lub urządzenie jest przymocowane na stałe. - Strona internetowa lub aplikacja powinny działać prawidłowo w obu orientacjach ekranu. - Wyjątkiem są sytuacje, gdy konkretna orientacja jest niezbędna dla używania strony lub aplikacji. | |
| 1.3.5 Określenie pożądanej wartości Poziom AA Cel każdego pola zbierającego informacje o użytkowniku może być programowo określony, gdy: - Pole zbierające dane służy celowi określonemu w sekcji Przeznaczenie pól danych w komponentach interfejsu użytkownika; oraz - Treść jest implementowana za pomocą technologii obsługującej określanie w polach formularza typu oczekiwanych danych. - Informuj użytkownika i przeglądarkę, jakie dane ma podać w formularzu. - Używaj specjalizowanych pól tekstowych, na przykład email, tel, date, URL i podobnych. | |
| 1.3.6 Określenie przeznaczenia Poziom AAA W treściach zaimplementowanych przy użyciu języków znaczników przeznaczenie komponentów interfejsu użytkownika, ikon i obszarów kluczowych może zostać określone programowo. - Określaj regiony na stronach internetowych za pomocą elementów HTML5 lub ARIA landmark. - Zawsze wskazuj główną treść na podstronie. - Wskazuj elementy nawigacyjne, wyszukiwarkę, stopkę i elementy zewnętrzne. - Oznaczaj pola obowiązkowe za pomocą atrybutu “required” lub “aria-required”. | |
| Wytyczna 1.4 – Rozróżnialność Ułatwiaj oglądanie i słuchanie treści oraz oddzielanie informacji od tła. - Zadbaj o odpowiednie kontrasty. - Pozwól użytkownikowi na dostosowanie wyglądu strony do własnych potrzeb. | |
| 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. - Wyróżnienie informacji kolorem może umknąć użytkownikom mającym problemy z widzeniem barw. - To nie oznacza, że nie można wyróżniać informacji kolorem. - Oprócz wyróżnienia kolorem, dodaj inny sposób wyróżnienia, na przykład ikonę, pogrubienie tekstu itp. | |
| 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. - Taki dźwięk może skutecznie zagłuszyć syntezator mowy, przez co niewidomi użytkownicy nie będą mogli skorzystać ze strony internetowej. - Mechanizm do wyłączania dźwięku lub ściszania ma być prosty, na przykład naciśnięcie klawisza Escape. - Jeżeli wymaga znalezienia jakiegoś przycisku lub specjalnego skrótu klawiszowego, to traci sens. - Takimi dźwiękami mogą być reklamy, automatycznie uruchamiane filmy, muzyka w tle. - Nie dotyczy to dźwięku, który jest świadomie uruchamiany przez użytkownika. | |
| 1.4.3 Kontrast (minimalny) 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. - Dla standardowego tekstu kontrast powinien wynosić przynajmniej 4,5:1. - Dla większego tekstu kontrast może być mniejszy i wynosić przynajmniej 3:1. - Tekst nie powinien być wyświetlany na grafice, tylko na gładkim tle. - Nie musisz instalować na stronie widżetu do zmiany kolorystyki. | |
| 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. - Tekst na stronie internetowej można powiększyć dwukrotnie za pomocą mechanizmu wbudowanego w przeglądarkę, zazwyczaj skrótem klawiszowym Ctrl + Tekst powinien być wyświetlany w całości, bez przysłaniania przez inne elementy strony internetowej. - Nie musisz instalować na stronie widżetu do zmiany regulowania wielkości tekstu. | |
| 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. - Obrazem tekstu jest tekst umieszczony jako mapa bitowa, na przykład w plikach graficznych, w tym w skanach dokumentów. - To wymaganie nie dotyczy logotypów. - Wyjątek dotyczący istotności dotyczy sytuacji, gdy tekst musi być przedstawiany w bardzo konkretny sposób, na przykład na mapach, starodrukach lub logotypach. Wtedy zastosowanie ma kryterium sukcesu 4.1.1. | |
| 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. - To kryterium sukcesu jest bardziej wymagającym wariantem kryterium sukcesu 1.4.3. - Spełnienie tego kryterium oznacza automatycznie spełnienie kryterium sukcesu 1.4.3. - Dla standardowego tekstu kontrast powinien wynosić przynajmniej 7:1. - Dla większego tekstu kontrast może być mniejszy i wynosić przynajmniej 4,5:1. - Tekst nie powinien być wyświetlany na grafice, tylko na gładkim tle. - Nie musisz instalować na stronie widżetu do zmiany kolorystyki. | |
| 1.4.7 Niska głośność lub bez dźwięków w tle Poziom AAA Dla nagranej treści tylko audio, która (1) na pierwszym planie zawiera głównie mowę, (2) nie jest dźwiękową CAPTCHA lub logo w postaci dźwiękowej, oraz (3) nie jest wokalizacją mającą na celu głównie ekspresję muzyczną, np. w przypadku śpiewu lub rapu, przynajmniej jedno z poniższych założeń jest spełnione: - Bez treści w tle: Nagranie audio nie zawiera dźwięków tła. - Możliwość wyłączenia: Dźwięki tła mogą zostać wyłączone. - 20 dB: Głośność dźwięków tła jest przynajmniej o 20 decybeli mniejsza, niż głośność mowy, która stanowi główną treść nagrania, z wyjątkiem okazyjnych, jedno– lub dwusekundowych dźwięków tła. Z definicji terminu „decybel” wynika, iż dźwięki tła spełniające powyższy wymóg będą 4 razy cichsze od głównej treści nagrania. - To kryterium dotyczy nagrań dźwiękowych, a nie filmów, do których można dodać napisy. - Tło dźwiękowe nie powinno utrudniać słuchania głównej informacji w nagraniu. - Unikaj szumu ulicznego, muzyki i innych dźwięków w tle. | |
| 1.4.8 Prezentacja wizualna Poziom AAA Dla wizualnego przedstawienia bloków tekstu, istnieje mechanizm, za pomocą którego można osiągnąć, co następuje: 1. Kolory na pierwszym planie oraz kolory tła mogą być zmienione przez użytkownika. 2. Szerokość nie przekracza 80 znaków (40 w przypadku alfabetów: chińskiego, japońskiego i koreańskiego). 3. Tekst nie jest wyjustowany (tzn. wyrównany do prawego i lewego marginesu). 4. Odstępy między wierszami w akapitach wynoszą przynajmniej 1,5 wysokości linii, a odległość między akapitami jest przynajmniej 1,5 razy większa niż ta pomiędzy wierszami. 5. Rozmiar tekstu może zostać powiększony do 200% bez użycia technologii wspomagających, nie wymagając od użytkownika, chcącego odczytać cały wiersz, przesuwania tekstu w poziomie przy zmaksymalizowanym oknie ekranu. - Nie musisz dodawać widżetów do regulowania tych ustawień, bo mogą być zbyt skomplikowane w użyciu. - Zdefiniuj kolor tła i tekstu w CSS. - Stosuj względne wielkości czcionek, na przykład przez nazwy wielkości, wartości procentowe i jako EM. - Nie blokuj możliwości zmiany wyglądu strony, na przykład przez podmienienie arkusza stylów. - Wyłącz style na stronie i sprawdź, czy można z niej korzystać. | |
| 1.4.9 Obrazy tekstu (bez wyjątków) Poziom AAA Obrazy tekstu są wykorzystywane jedynie w celach czysto dekoracyjnych lub też w przypadkach, gdy taka prezentacja tekstu jest istotna dla przekazywanej informacji. - To kryterium sukcesu jest silniejszą wersją kryterium sukcesu 1.4.5. - Spełnienie tego kryterium sukcesu oznacza automatycznie spełnienie kryterium sukcesu 1.4.5. - nie dotyczy logotypów | |
| 1.4.10 Dopasowanie do ekranu Poziom AA Treść może być prezentowana bez utraty informacji lub funkcjonalności, bez konieczności przewijania w dwóch wymiarach dla: - Pionowego przewijania treści o szerokości odpowiadającej 320 pikselom CSS; - Poziomego przewijania treści na wysokości odpowiadającej 256 pikselom CSS. Wyjątkiem są te części treści, które wymagają dwuwymiarowego układu ze względu na sposób używania lub znaczenie. - Strona powinna być zaprojektowana w taki sposób, żeby nie trzeba było jej przewijać zarówno w pionie, jak w poziomie, w tym po powiększeniu. - Tekst powinien się przełamywać w innych miejscach, żeby uniknąć wychodzenia linii poza ekran. - W tym kryterium sukcesu chodzi o piksele CSS, a nie klasyczne piksele. | |
| 1.4.11 Kontrast elementów nietekstowych Poziom AA Wizualna prezentacja następujących elementów ma współczynnik kontrastu co najmniej 3:1 względem sąsiednich kolorów: - Komponenty interfejsu użytkownika: Informacje wizualne wymagane do identyfikacji komponentów interfejsu użytkownika i ich stanów, z wyjątkiem nieaktywnych składników lub gdy wygląd komponentu jest określony przez agenta użytkownika i nie jest modyfikowany przez autora; - Obiekty graficzne: Części grafiki wymagane do zrozumienia treści, z wyjątkiem sytuacji, gdy konkretna prezentacja grafiki ma istotne znaczenie dla przekazywanych informacji. - Kontrast elementów graficznych powinien wynosić przynajmniej 3:1, czyli jak dla dużego tekstu. - Komponentami interfejsu użytkownika są na przykład ikony, przyciski, polaformularzy. - Obiektami graficznymi są na przykład wykresy, mapki, schematy, infografiki. - To kryterium nie dotyczy zdjęć i innych grafik, chyba że zawierają elementy graficzne przekazujące jakieś informacje. | |
| 1.4.12 Odstępy w tekście Poziom AA W treściach tworzonych za pomocą języków znaczników, umożliwiających ustawienie poniższych właściwości stylu, nie następuje utrata żadnych treści lub funkcjonalności, gdy tekst ustawiony zostanie tak, aby uwzględniał wszystkie poniższe parametry oraz gdy wprowadzone zostaną zmiany w jakiejkolwiek innej właściwości stylu: - Wysokość linii (odstęp między wierszami) do co najmniej 1,5-krotności rozmiaru czcionki; - Odstęp między akapitami co najmniej 2 razy większy od rozmiaru czcionki; - Odstępy między literami (tracking) do co najmniej 0,12-krotności rozmiaru czcionki; - Odstępy między wyrazami do co najmniej 0,16 wielkości czcionki. Wyjątek: Języki naturalne i skrypty, które nie wykorzystują jednej lub więcej z tych właściwości stylu tekstowego w tekście pisanym, mogą być zgodne przy użyciu tylko tych właściwości, które istnieją dla tej kombinacji języka i skryptu. - Pozwól na regulację odstępami w tekście, żeby użytkownik mógł dostosować sposób wyświetlania do swoich potrzeb. - Nie musisz zapewniać rozwiązania do sterowania odstępami w tekście. - Kryterium dotyczy technologii opartych o znaczniki, na przykład HTML, ODF, DOCX. | |
| 1.4.13 Treść spod kursora lub fokusu Poziom AA Gdy jakaś treść staje się widoczna po otrzymaniu kursora lub fokusu klawiatury, a po ich usunięciu znika, spełnione są poniższe warunki: - Odrzucone: Istnieje mechanizm umożliwiający odrzucenie dodatkowej treści bez przesuwania wskaźnika myszy lub fokusu klawiatury, chyba że dodatkowa treść przekazuje błąd wprowadzanych danych lub nie przesłania ani nie zastępuje innej treści; - Wskazywane: Jeśli wskaźnik myszy (hover) może wyzwolić dodatkową treść, wówczas wskaźnik może zostać przeniesiony na dodatkową treść bez znikania dodatkowej treści; - Trwałe: Dodatkowa treść pozostaje widoczna do momentu usunięcia wyzwalacza aktywacji lub fokusu, użytkownik odrzuca go lub jego informacje nie są już ważne. Wyjątek: Wizualna prezentacja dodatkowej treści jest kontrolowana przez program użytkownika i nie jest modyfikowana przez autora. - Dodatkowa treść to na przykład rozwijające się podmenu, podgląd pliku graficznego, dymki z podpowiedziami itp. - Kryterium dotyczy zarówno kursora myszy, jak i fokusu klawiatury. - Zadbaj, żeby taką dodatkową treść można było łatwo odrzucić, na przykład za pomocą klawisza Escape. - Fokus klawiatury lub kursor myszy można przesunąć na dodatkową treść, która nie zniknie w międzyczasie. | |
| Zasada 2 – Funkcjonalność Zapewnij, aby komponenty interfejsu użytkownika i nawigacja były możliwe do użycia. - Daj użytkownikom możliwość wyboru, czego użyją do korzystania ze strony. - Pomagaj w nawigacji i znajdowaniu treści. | |
| Wytyczna 2.1 – Dostępność z klawiatury Zapewnij dostępność wszystkich funkcjonalności za pomocą klawiatury. - Pamiętaj, że niektórzy ludzie nie mogą lub nie chcą używać myszy lub płytki dotykowej. | |
| 2.1.1 Klawiatura Poziom A Wszystkie funkcjonalności w treści są obsługiwane za pomocą interfejsu klawiatury, bez wymogu określonego czasu użycia poszczególnych klawiszy, z wyjątkiem sytuacji, kiedy dana funkcja wymaga wprowadzenia informacji przez użytkownika w oparciu o ścieżkę ruchów, a nie w oparciu o punkty końcowe wejścia. - Stronę można obsłużyć korzystając tylko z klawiatury. - Do przesuwania fokusu klawiatury służą klawisze Tab (do przodu) i Shift Tab (do tyłu). - Łącza, przyciski i inne elementy tego typu można aktywować klawiszem Enter. - Pola wyboru i opcji można zaznaczać spacją. - Strzałkami można zmieniać wybór z rozwijanej listy, elementy typu radio, zakładki (karty) i podobne elementy. - Nie wymagaj od użytkownika, żeby się śpieszył z naciskaniem klawiszy. - Wyjątek dotyczy aplikacji, gdzie trzeba wykonywać konkretne ruchy myszą, na przykład w programie do rysowania lub projektowania. | |
| 2.1.2 Bez pułapki na klawiaturę Poziom A Jeśli fokus klawiatury można przemieścić do danego komponentu treści za pomocą interfejsu klawiatury, to może on być z niego usunięty również za pomocą interfejsu klawiatury, a jeśli wymagane jest użycie czegoś więcej niż tylko strzałek, tabulatora lub innych standardowych metod wyjścia, użytkownik musi otrzymać odpowiednią podpowiedź, w jaki sposób usunąć fokus z danego komponentu. - Sprawdź, czy możesz przejść klawiszem Tab przez wszystkie aktywne elementy strony internetowej. - Zwróć uwagę na edytory treści, bo tam często pojawia się pułapka na klawiaturę. | |
| 2.1.3 Klawiatura (bez wyjątków) Poziom AAA Wszystkie funkcjonalności w treści są obsługiwane za pomocą interfejsu klawiatury, bez wymogu określonego czasu użycia poszczególnych klawiszy. - To jest wzmocniona wersja kryterium sukcesu 2.1.1. - Spełnienie tego kryterium oznacza automatycznie spełnienie kryterium sukcesu 2.1.1. - W tym kryterium nie ma już żadnych wyjątków od zasady obsługi tylko klawiaturą. | |
| 2.1.4 Jednoznakowe skróty klawiaturowe Poziom A Jeśli skrót klawiaturowy jest zaimplementowany w treści tylko przy użyciu jednego znaku (litery, w tym wielkiej i małej, cyfry lub symbolu), to przynajmniej jedno z poniższych jest prawdziwe: - Wyłączanie: Istnieje mechanizm wyłączania skrótu; - Mapowanie: Istnieje mechanizm zmiany mapowania skrótu w celu użycia jednego lub więcej niedrukowalnych znaków klawiatury (np. Ctrl, Alt, itp.); - Aktywny tylko po otrzymaniu fokusu: Skrót klawiaturowy dla komponentu interfejsu użytkownika jest aktywny tylko wtedy, gdy ten komponent ma fokus. - Jednoznakowe skróty klawiszowe to takie, które działają bez dodatkowych klawiszy, na przykład Ctrl, Alt i ich połączenie. - Przykładem jest wyszukiwarka Google, gdzie do pola wyszukiwania zawsze możesz wejść za pomocą klawisza “/”. - Takie skróty mogą być kłopotliwe dla użytkowników korzystających wyłącznie z klawiatury. - Pozwól na wyłączenie lub przemapowanie tych skrótów. | |
| Wytyczna 2.2 – Wystarczający czas Zapewnij użytkownikom wystarczająco dużo czasu na przeczytanie i skorzystanie z treści. - Nie poganiaj użytkowników ograniczając im czas na reakcję. - Użytkownik powinien mieć czas na przeczytanie komunikatu i wykonanie czynności. | |
| 2.2.1 Dostosowanie czasu Poziom A Gdy czas korzystania z treści jest ograniczany, spełniony jest przynajmniej jeden z poniższych warunków: - Wyłączenie: Użytkownik może wyłączyć limit czasowy, zanim czas upłynie; lub - Dostosowanie: Użytkownik może swobodnie dostosować limit czasowy (przynajmniej o wartość 10 razy większą od wartości domyślnej), zanim czas upłynie; lub - Wydłużenie: Użytkownik jest ostrzegany przed upłynięciem limitu czasowego i ma przynajmniej 20 sekund na wydłużenie limitu za pomocą prostej czynności (np. „wciśnij klawisz spacji”) oraz może wydłużyć limit przynajmniej dziesięciokrotnie; lub - Wyjątek dotyczący czasu rzeczywistego: Limit czasowy jest wymaganym komponentem jakiejś czynności w czasie rzeczywistym (np. aukcji) i nie ma możliwości zmiany limitu; lub - Wyjątek dotyczący istoty czynności: Limit czasowy jest istotny i wydłużenie go anulowałoby lub zaburzałoby daną czynność; lub - Wyjątek 20 godzin: Limit czasowy przekracza 20 godzin. - To kryterium dotyczy przede wszystkim wygasania sesji i automatycznego wylogowywania użytkownika. - Pozwól użytkownikowi na wyłączenie lub zwiększenie czasu sesji w prosty sposób. - Wyjątki dotyczą sytuacji, gdy czasu nie da się wydłużyć, bo akcja jest związana z czymś realnym (aukcja internetowa, składanie wniosków aplikacyjnych). - Wyjątki dotyczą także sytuacji, gdy wydłużenie czasu powodowałoby problemy, na przykład podczas egzaminu. | |
| 2.2.2 Pauza, zatrzymanie, ukrycie Poziom A Gdy treść się porusza, migocze, przesuwa lub jest automatycznie aktualizowana, spełnione są wszystkie poniższe warunki: Poruszanie się, przesuwanie, migotanie: Każdą informację, która porusza się, przesuwa lub miga, a takie działanie (1) włącza się automatycznie, (2) jest widoczne dłużej niż 5 sekund, (3) jest przedstawiane równolegle z inną treścią — użytkownik może wstrzymać, zatrzymać lub ukryć za pomocą dostępnego mechanizmu, chyba że poruszanie się, przesuwanie lub migotanie jest częścią czynności, w której takie działanie jest istotne, oraz: Automatyczna aktualizacja: Każdą automatycznie aktualizującą się informację, która (1) włącza się automatycznie oraz (2) jest przedstawiana równolegle z inną treścią — użytkownik może wstrzymać, zatrzymać lub kontrolować częstotliwość aktualizacji za pomocą dostępnego mechanizmu, chyba, że automatyczna aktualizacja jest częścią takiej czynności, w której takie działanie jest niezbędne. - To kryterium dotyczy slajderów, karuzel, pasków informacyjnych i innych elementów poruszających się na stronie. - To kryterium dotyczy także elementów, które są stale odświeżane, na przykład kursy walut, warunki pogodowe. - Daj użytkownikowi narzędzie, żeby mógł poruszającą się treść ukryć lub zatrzymać. - Daj użytkownikowi narzędzie, dzięki któremu będzie mógł zamrozić odświeżanie i spokojnie zapoznać się z danymi. | |
| 2.2.3 Bez ograniczeń czasowych Poziom AAA Ograniczenie czasowe nie jest istotną częścią czynności prezentowanej na stronie, chyba, że są to nieinteraktywne multimedia zsynchronizowane lub wydarzenia w czasie rzeczywistym. - To kryterium sukcesu zakłada, że użytkownik może przez dowolny czas korzystać z treści. - Wyjątkami są multimedia (filmy, podcasty), które trwają określony czas. | |
| 2.2.4 Przerywanie Poziom AAA Przerywanie pracy może być odłożone w czasie lub odrzucone przez użytkownika, chyba że jest to sytuacja wyjątkowa. - Przerwanie pracy oznacza, że użytkownik nie może nadal korzystać ze strony internetowej, z którą się zapoznawał. - To kryterium dotyczy automatycznego odświeżania strony, doładowywania nowych treści i podobnych sytuacji. - Daj użytkownikowi możliwość wybrania, czy chce odświeżać treść automatycznie, czy ręcznie. | |
| 2.2.5 Ponowne potwierdzenie autentyczności Poziom AAA Kiedy kończy się czas sesji autoryzowanej przez użytkownika, może on kontynuować czynność bez utraty danych po ponownej autoryzacji. - To kryterium sukcesu zakłada, że użytkownik nie utraci wprowadzonych danych po zakończeniu sesji. - Kiedy użytkownik ponownie się zaloguje, będzie mógł kontynuować pracę. - System powinien zapisywać dane podczas wprowadzania bez konieczności ręcznego zatwierdzania. | |
| 2.2.6 Ostrzeżenie o limicie czasu Poziom AAA Użytkownicy muszą być ostrzeżeni o limicie czasu bezczynności użytkownika, którego przekroczenie mogłoby spowodować utratę danych, chyba że dane te są przechowywane przez ponad 20 godzin, gdy uczestnik nie podejmie żadnych działań. - Poinformuj użytkownika po jakim czasie bezczynności zostanie wylogowany. - Ustaw czas na tyle długi, żeby użytkownik był w stanie wykonać wszystkie planowane czynności. | |
| Wytyczna 2.3 – Ataki padaczki Prezentuj treść tak, aby nie wywoływała napadów padaczkowych. - Osoby z padaczką (epilepsją) mogą dostać ataku, jeżeli na ekranie pojawią się błyski lub migotanie, w szczególności w kolorze czerwonym. | |
| 2.3.1 Trzy błyski lub wartości poniżej progu Poziom A Strony internetowe nie zawierają w swojej treści niczego, co błyska częściej niż trzy razy w ciągu jednej sekundy, lub też błysk nie przekracza wartości granicznych dla błysków ogólnych i czerwonych. - Unikaj treści migających. - Jeżeli takie treści już są, powinny być poniżej niebezpiecznego progu zdefiniowanego w objaśnieniu do tego kryterium sukcesu. - Niebezpieczne jest migotanie częstsze, niż 3 rozbłyski na sekundę. - Im większy obszar ekranu zajmowany przez elementy błyskające, tym bardziej jest to treść niebezpieczna. - Elementy błyskające mogą się znajdować w animacjach, filmach lub w treści tekstowej. | |
| 2.3.2 Trzy błyski Poziom AAA Strony internetowe nie zawierają w swojej treści niczego, co błyska częściej niż trzy razy w ciągu jednej sekundy. - To kryterium sukcesu jest wzmocnionym kryterium sukcesu 2.3.1. - Spełnienie tego kryterium oznacza automatycznie spełnienie kryterium sukcesu 2.3.1. - W tym kryterium nieistotny jest obszar migotania i nawet najmniejszy jest zabroniony. | |
| 2.3.3 Animacja po interakcji Poziom AAA Animacja ruchowa wyzwalana przez interakcję może być wyłączona, chyba że animacja jest istotna dla funkcjonalności lub przekazywanych informacji. - Użytkownik może wyłączyć animacje, które są tylko ozdobnikami na stronie internetowej lub w aplikacji. - Strona internetowa respektuje ustawienie przeglądarki internetowej lub systemu operacyjnego o ograniczeniu animacji. - W tym kryterium chodzi o animacje okien, menu i inne, dodane dla zwiększenia atrakcyjności wizualnej. | |
| Wytyczna 2.4 – Możliwość nawigacji Zapewnij użytkownikowi narzędzia pomagające w nawigacji, znalezieniu treści i określeniu, gdzie się aktualnie znajduje. - System nawigacji powinien wspomagać użytkownika w znajdowaniu treści. | |
| 2.4.1 Możliwość pominięcia bloków Poziom A Istnieje mechanizm, który umożliwia pominięcie bloków treści powtarzanych na wielu stronach internetowych. - To kryterium sukcesu pomaga użytkownikom klawiatury, ponieważ pozwala na przeskoczenie do głównej treści strony. - Najczęściej stosowanym rozwiązaniem jest skiplink. - Zachowaj umiar z liczbą skiplinków, żeby same nie stały się utrudnieniem. - Możesz użyć także mechanizmu ukrywania systemu nawigacji. | |
| 2.4.2 Tytuły stron Poziom A Strony internetowe mają tytuły, które opisują ich cel lub przedstawiają ich temat. - To kryterium sukcesu dotyczy przede wszystkim tytułów zawartych w metadanych. - W przypadku stron internetowych chodzi o znacznik TITLE w nagłówku. - Tytuł strony powinien wskazywać, czego dotyczy ta strona. | |
| 2.4.3 Kolejność fokusu Poziom A Jeśli strona internetowa może być nawigowana sekwencyjnie, a kolejność nawigacji wpływa na zrozumienie lub funkcjonalność strony, komponenty przyjmują fokus w kolejności, dzięki której zachowany jest sens i funkcjonalność treści. - W tym kryterium sukcesu chodzi o nawigację za pomocą klawiatury, przede wszystkim standardowymi klawiszami: Tab i Shift Tab. - Upewnij się, że w formularzach fokus klawiatury przechodzi między polami w sensownej kolejności. - Upewnij się, że kolejność fokusu podczas przemieszczania się po menu i innych elementach nawigacji jest logiczna. | |
| 2.4.4 Cel łącza (w kontekście) Poziom A Cel każdego łącza może wynikać z samej treści łącza lub z treści tekstu powiązanego z kontekstem łącza określonym programowo, poza tymi przypadkami, kiedy cel łącza i tak byłby niejasny dla użytkowników. - Każde łącze powinno mieć etykietę tekstową wyjaśniającą, dokąd prowadzi łącze. - Etykieta powinna być zrozumiała poza kontekstem, czyli na przykład “pobierz Obsidian”, a nie “pobierz” lub “Obsidian”. - W tym kryterium sukcesu możesz uwzględnić kontekst otaczający łącze, na przykład jeżeli w akapicie opisującym Obsidian pojawi się łącze “pobierz”. Użytkownik musi mieć pewność, że pobiera to, co chce. | |
| 2.4.5 Wiele dróg Poziom AA Istnieje więcej niż jeden sposób umożliwiający zlokalizowanie strony internetowej w zestawie stron internetowych, z wyjątkiem sytuacji, kiedy dana strona jest wynikiem jakiejś procedury lub jednym z jej etapów. - Daj użytkownikowi narzędzia pomagające w odnalezieniu każdej podstrony. - Takimi narzędziami mogą być menu, wyszukiwarka, chmury tagów, podpowiedzi kontekstowe, filtry i wiele innych. - To kryterium nie dotyczy podstron wygenerowanych automatycznie, na przykład wyników wyszukiwania. | |
| 2.4.6 Nagłówki i etykiety Poziom AA Nagłówki i etykiety opisują temat lub cel treści. - Jeżeli korzystasz z nagłówków lub etykiet, powinny opisywać treść w sposób zrozumiały. - To kryterium nie wymaga dodawania nagłówków lub etykiet, a jedynie ich zrozumiałości. - Nagłówki i etykiety są tu rozumiane w sposób ogólny, jako widoczny tekst poprzedzający lub kończący treść., na przykład podpisy do grafik. | |
| 2.4.7 Widoczny fokus Poziom AA Każdy interfejs posiadający możliwość obsługi przy pomocy klawiatury ma tryb obsługi, w którym fokus klawiatury jest stale widoczny. - Fokus przemieszczany klawiaturą powinien być zawsze widoczny. - Wyróżnienie fokusu musi być stałe i nie znikać po czasie. - Są dodatkowe kryteria sukcesu opisujące widoczność fokusu. | |
| 2.4.8 Lokalizacja Poziom AAA Zapewniona jest informacja, w którym miejscu w zestawie stron internetowych znajduje się użytkownik. - Informuj użytkownika o tym, na jakiej jest podstronie i jak się tamznalazł. - Popularnym rozwiązaniem są okruszki (ang. breadcrumps) pokazujące ścieżkę nawigacji. - Możesz też oznaczać element menu, który doprowadził użytkownika do podstrony. | |
| 2.4.9 Cel łącza (z samego łącza) Poziom AAA Istnieje mechanizm umożliwiający zidentyfikowanie celu każdego łącza z samej jego treści, poza tymi przypadkami, kiedy cel łącza i tak byłby niejasny dla użytkowników. - To kryterium sukcesu jest bardziej restrykcyjną wersją kryterium sukcesu 2.4.4. - Spełnienie tego kryterium oznacza automatycznie spełnienie kryterium sukcesu 2.4.4. - To kryterium wymaga aby etykieta łącza wskazywała cel łącza i nie można polegać na otaczającym kontekście. - Nie możesz używać etykiet w rodzaju “tutaj”, “kliknij”, “następny”, “pobierz” i podobnych, ponieważ same nie informują, co się wydarzy po ich kliknięciu. | |
| 2.4.10 Nagłówki sekcji Poziom AAA Nagłówki sekcji są używane do porządkowania treści. - stosuj nagłówki do porządkowania tekstu, ale nie twórz ich na siłę. - To kryterium nie dotyczy interfejsu użytkownika, na przykład menu. | |
| 2.4.11 Fokus niezakryty (minimum) Poziom AA Gdy komponent interfejsu użytkownika otrzymuje fokus klawiatury, komponent nie jest całkowicie zakryty treścią stworzoną przez autora. - To kryterium dotyczy widoczności fokusu klawiatury. - Fokus klawiatury powinien być przynajmniej częściowo widoczny, żeby użytkownik się nie zgubił i nie próbował nawigować po omacku. - Elementami najczęściej zasłaniającymi są poprzyklejane komunikaty o ciasteczkach, stałe nagłówki i stopki, reklamy. | |
| 2.4.12 Fokus niezakryty (ulepszony) Poziom AAA Gdy komponent interfejsu użytkownika otrzymuje fokus klawiatury, żadna część komponentu nie może być zakryta przez treść stworzoną przez autora. - To kryterium jest rozszerzeniem kryterium sukcesu 2.4.11. - Spełnienie tego kryterium sukcesu oznacza automatycznie spełnienie kryterium sukcesu 2.4.11. - Rozszerzenie polega na tym, że fokus klawiatury musi być widoczny w całości. | |
| 2.4.13 Wygląd fokusu Poziom AAA Gdy widoczny jest wskaźnik fokusu klawiatury, obszar wskaźnika fokusu spełnia wszystkie poniższe kryteria: - jest co najmniej tak duży, jak obszar obwodu o grubości 2 pikseli CSS komponentu lub podkomponentu bez fokusu oraz - ma współczynnik kontrastu co najmniej 3:1 między tymi samymi pikselami w stanie „ma fokus” i „nie ma fokusu”. - To kryterium dotyczy wyglądu fokusu klawiatury. - Jeżeli używasz do wyróżnienia ramki otaczającej element, powinna to być linia ciągła o grubości przynajmniej 2 piksele CSS. - Kontrast między wyróżnieniem i brakiem wyróżnienia wynosi przynajmniej 3:1. | |
| Wytyczna 2.5 – Metody obsługi Ułatwiaj użytkownikom obsługę funkcji za pomocą różnych sposobów poza klawiaturą - Ta wytyczna została dodana w związku z pojawieniem się interfejsów innych niż klawiatura i mysz. - Takimi interfejsami są na przykład ekran dotykowy, rozpoznawanie mowy, wykorzystanie sensorów w urządzeniach mobilnych. | |
| 2.5.1 Gesty dotykowe Poziom A Wszystkie funkcjonalności wykorzystujące do obsługi gesty wielopunktowe lub oparte na ścieżkach mogą być obsługiwane za pomocą dotyku jednopunktowego bez gestu opartego na ścieżce, chyba że istotny jest gest wielopunktowy lub oparty na ścieżce. - To kryterium sukcesu dotyczy gestów wykonywanych na urządzeniach dotykowych. - Niektórzy użytkownicy nie są w stanie wykonać skoordynowanego ruchu kilkoma palcami lub precyzyjnie wykonać ruch. - Takimi gestami są na przykład rozciąganie, przesuwanie, obracanie. - Jeżeli to możliwe, przygotuj alternatywny mechanizm wykorzystujący pojedyńcze dotknięcie, na przykład znak + do powiększania. | |
| 2.5.2 Rezygnacja ze wskazania Poziom A W przypadku funkcjonalności, które są wywoływane za pomocą dotyku jednopunktowego, co najmniej jedno z poniższych twierdzeń jest prawdziwe: - Brak zdarzenia: Naciskanie nie wywołuje jakiejkolwiek części zdarzenia; - Przerwanie lub cofnięcie: Zdarzenie jest zależne od zwolnienia nacisku i istnieje mechanizm, którym można je przerwać lub cofnąć po zwolnieniu nacisku; - Odwrócenie zdarzenia: Zwolnienie nacisku cofa wywołane zdarzenie i przywraca stan sprzed zdarzenia; - Istotne: Wciśnięcie jest niezbędne do wywołania zdarzenia. - W tym kryterium sukcesu chodzi o to, żeby pojedyńcze dotknięcie ekranu nie niosło za sobą poważnych konsekwencji. - Brak zdarzenia oznacza, że element można dotknąć, na przykład żeby zaznaczyć pole wyboru, ale sam proces nie rusza. - Przerwanie oznacza, że można zrezygnować z akcji, na przykład przesuwając palec z elementu bez jego podnoszenia, jak w klawiaturach. - Cofnięcie oznacza, że dotknięcie wywołuje akcję, ale można się z niej wycofać, jak w przeglądarce internetowej. - Odwrócenie oznacza, że po podniesieniu palca treść wraca do poprzedniego stanu, jak na przykład przy podglądzie grafiki. - Istotne sytuacje to takie, gdzie tego rodzaju rozwiązania nie miałyby sensu, na przykład przy grze na wirtualnym pianinie. - Przykłady dotyczą ekranów dotykowych, ale dotyczą także myszki. | |
| 2.5.3 Etykieta w nazwie Poziom A W przypadku komponentów interfejsu użytkownika z etykietami zawierającymi tekst lub obrazy tekstu, nazwa zawiera tekst, który jest prezentowany wizualnie. - W tym kryterium sukcesu chodzi o to, żeby dostępna nazwa była zgodna z wyświetlaną etykietą tekstową. - Użytkownik sterujący komputerem za pomocą mowy wypowiada widzianą na ekranie etykietę, a technologia asystująca korzysta z dostępnej nazwy. - W przypadku łączy tekstowych, nie musisz nic robić, a kombinowanie z ARIA może zaszkodzić. - W przypadku łączy graficznych, tekst w grafice powinien się zgadzać z tekstem alternatywnym lub dostępną nazwą dodaną w inny sposób. - Grafika z logotypem Biuletynu Informacji Publicznej ma skrót “BIP” i taki powinien być tekst alternatywny. | |
| 2.5.4 Aktywowanie ruchem Poziom A Funkcjonalność, którą można obsługiwać za pomocą ruchu urządzenia lub ruchu użytkownika, można również obsługiwać za pomocą komponentów interfejsu użytkownika, a reagowanie na ruch można wyłączyć, aby zapobiec przypadkowemu uruchomieniu, z wyjątkiem sytuacji, gdy: - Obsługiwany interfejs: Ruch służy do obsługi funkcjonalności poprzez interfejs obsługiwany przez dostępność; - Istotny: Ruch jest niezbędny dla funkcji, a to spowodowałoby unieważnienie działania. - To kryterium dotyczy urządzeń wyposażonych w sensory, na przykład żyroskop, akcelerometr, czy kompas. - Jeżeli jakieś funkcje są realizowane przez ruch urządzenia, na przykład potrząśnięcie, obrócenie, przechylenie, dodaj możliwość wykonania tych samych funkcji zwykłymi elementami interfejsu, na przykład przyciskami. - Pozwól użytkownikom na wyłączenie interfejsu opartego o sensory. - Kryterium nie dotyczy aplikacji, które są interfejsem dla sensora i wyłączenie go nie miałoby sensu, na przykład aplikacja kompasu musi mieć zawsze dostęp do kompasu. | |
| 2.5.5 Rozmiar celu dotykowego Poziom AAA Rozmiar celu punktu dotykowego wynosi co najmniej 44 na 44 piksele CSS, chyba że: - Odpowiednik: Cel jest dostępny za pośrednictwem równoważnego łącza lub kontrolki na tej samej stronie, która ma co najmniej 44 na 44 piksele CSS; - Śródliniowe: Cel znajduje się w zdaniu lub w bloku tekstu; - Kontrola programu użytkownika: Rozmiar obiektu docelowego jest określony przez program użytkownika (przeglądarkę) i nie jest modyfikowany przez autora; - Istotny: Szczególna prezentacja celu ma istotne znaczenie dla przekazywanych informacji. - To kryterium sukcesu jest rozszerzoną wersją kryterium sukcesu 2.5.8. - Spełnienie tego kryterium oznacza automatycznie spełnienie kryterium 2.5.8. - Zadbaj żeby elementy dotykowe interfejsu miały rozmiar przynajmniej 44 na 44 piksele CSS. - Mogą być mniejsze, jeżeli to samo działanie można wywołać dotykając innego elementu, który jest odpowiednio duży. - Może być mniejszy, jeżeli jest umieszczony w tekście, a tekst jest mniejszy (na przykład łącza w tekście). | |
| 2.5.6 Równoległy mechanizm wprowadzania danych Poziom AAA Treści internetowe nie ograniczają możliwości korzystania z trybów wprowadzania danych dostępnych na platformie, z wyjątkiem sytuacji, w których ograniczenie jest istotne, wymagane do zapewnienia bezpieczeństwa treści lub wymagane do przestrzegania ustawień użytkownika. - Pozwól użytkownikowi zdecydować, jakiej metody wprowadzania danych będzie używać. - Tekst można wprowadzać za pomocą klawiatury fizycznej, ekranowej, przez dyktowanie, klawiaturą Braille, pisząc na ekranie. - Pola wyboru można zaznaczać myszką, klawiaturą, switchem, poleceniem głosowym, dotykiem. - Używaj systemowych kontrolek, zamiast tworzyć własne. | |
| 2.5.7 Przeciąganie Poziom AA Wszystkie funkcjonalności, które wykorzystują do działania ruch przeciągania można zrealizować za pomocą wskaźnika jednopunktowego bez przeciągania, chyba że przeciąganie jest niezbędne lub funkcjonalność została określona przez oprogramowanie użytkownika, a nie autora treści - To kryterium dotyczy przeciągania elementów za pomocą myszy, płytki dotykowej lub palca na ekranie dotykowym. - Pamiętaj, żeby dodać mechanizm realizujący tę samą funkcję za pomocą pojedynczych dotknięć lub kliknięć. - Przykładem mogą być listy z elementami porządkowanymi za pomocą przeciągania. Można dodać przyciski “w górę” i “w dół”, które zrealizują to samo zadanie. | |
| 2.5.8 Rozmiar celu (minimalny) Poziom AA Rozmiar celu dla punktu dotykowego wynosi co najmniej 24 na 24 piksele CSS, z wyjątkiem sytuacji, gdy: - Odstępy: Niewielkie cele (mniejsze niż 24 na 24 piksele CSS) są umieszczane w taki sposób, że jeśli okrąg o średnicy 24 pikseli CSS jest wyśrodkowany na obwiedni każdego z nich, okręgi nie przecinają innego celu ani okręgu innego niewielkiego celu; - Odpowiednik: Efekt może być osiągnięty na tej samej stronie za pomocą innej kontrolki, która spełnia to kryterium; - Śródliniowe: Cel znajduje się w zdaniu lub jego rozmiar jest w inny sposób ograniczony przez wysokość linii tekstu innego niż wiersz z celem; - Kontrolka programu użytkownika: Rozmiar celu jest określany przez program użytkownika i nie jest modyfikowany przez autora; - Istotny: Sposób przedstawienia celu jest niezbędny albo jest prawnie wymagany przy przekazywaniu informacji. - Zadbaj żeby elementy dotykowe interfejsu miały rozmiar przynajmniej 24 na 24 piksele CSS. - Mogą być mniejsze, jeżeli to samo działanie można wywołać dotykając innego elementu, który jest odpowiednio duży. - Mogą być mniejsze, jeżeli są odpowiednio daleko od innych elementów aktywnych. - Mogą być mniejsze, jeżeli są umieszczony w tekście, a tekst jest mniejszy (na przykład łącza w tekście). | |
| Zasada 3 – Zrozumiałość Zadbaj o to, aby informacje i obsługa interfejsu były zrozumiałe. - Użytkownik na pewno zna Twoją stronę gorzej, niż ty. - Użytkownicy są bardzo różni, mają różne kompetencje, doświadczenie, poziom lęku. | |
| Wytyczna 3.1 – Możliwość odczytania Twórz treści możliwe do odczytania i zrozumienia. - Teksty powinny być zrozumiałe dla użytkowników. - Sposób działania strony internetowej powinien być zrozumiały. - Wspieraj użytkownika w korzystaniu ze strony. | |
| 3.1.1 Język strony Poziom A Domyślny język naturalny każdej strony internetowej może zostać odczytany przez program komputerowy. - Zawsze deklaruj język dla całego dokumentu lub podstrony. - W HTML zrobisz to za pomocą atrybutu LANG, na przykład lang=“pl” jest deklaracją języka polskiego. - To samo rób w każdym formacie, który obsługuje takie funkcje, na przykład dokumenty pakietów biurowych czy PDF. | |
| 3.1.2 Język części Poziom AA Język naturalny każdej części lub frazy zawartej w treści może zostać odczytany przez program komputerowy, z wyjątkiem nazw własnych, wyrażeń technicznych, słów w nieokreślonym języku oraz słów i fraz, które stanowią część żargonu w bezpośrednio otaczającym je tekście. - Deklaruj język dla fragmentów w języku innym, niż język główny dokumentu. - Nie musisz deklarować języka dla nazw własnych (Apple, Glock itp.) - Nie musisz deklarować języka dla wyrażeń technicznych (router, shiplifter itp.) - Nie musisz deklarować języka dla wyrażeń żargonowych w tekstach specjalistycznych (call, casus belli itp.) | |
| 3.1.3 Nietypowe słowa Poziom AAA Istnieje mechanizm, za pomocą którego można sprawdzić definicje słów użytych w nietypowy lub ograniczony sposób, w tym idiomów i żargonu. - Objaśnienia można umieszczać w tym samym zdaniu, w którym wystąpiło to żargonowe pojęcie. - Możesz przygotować słowniczek pojęć i podać link do niego. - Możesz żargonowe pojęcie dodać w postaci łącza do jego definicji. | |
| 3.1.4 Skróty Poziom AAA Istnieje mechanizm, za pomocą którego można sprawdzić znaczenie skrótów. - Użytkownicy mogą nie znać skrótów i skrótowców używanych w tekście. - Możesz rozwinąć skrót przy pierwszym wystąpieniu, na przykład: sztuczna inteligencja (SI). - Możesz przygotować słowniczek skrótów wraz z ich rozwinięciami. - Możesz dać odnośniki do rozwinięcia skrótów w miejscach, gdzie się pojawią. | |
| 3.1.5 Poziom umiejętności czytania Poziom AAA Jeśli dany tekst, po usunięciu nazw własnych i tytułów, wymaga umiejętności czytania na poziomie wyższym niż poziom gimnazjalny, istnieje dodatkowa treść wyjaśniająca lub oddzielna wersja, która nie wymaga większych umiejętności czytania. - Poziom gimnazjalny odpowiada drugiemu poziomowi niższej edukacji Unesco. - Możesz dodać tekst napisany prostym językiem. - Możesz dodać streszczenie w prostym języku. - Możesz dodać tłumaczenie na język migowy. - Możesz dodać grafiki pomagające w zrozumieniu tekstu. | |
| 3.1.6 Wymowa Poziom AAA Istnieje mechanizm, za pomocą którego można sprawdzić wymowę słów, których znaczenie jest niejasne w danym kontekście bez znajomości ich wymowy. - Chodzi o takie wyrazy jak cis, które można wymówić na 2 sposoby i właśnie od wymowy zależy ich znaczenie (krzew lub tonacja). - W języku polskim takie sytuacje są bardzo rzadkie. - Jeżeli coś takiego jest jednak potrzebne, to możesz w nawiasie zapisać to słowo fonetycznie lub dodać krótkie nagranie z wymową. | |
| Wytyczna 3.2 – Przewidywalność Twórz strony internetowe tak, aby otwierały się, wyglądały i działały w sposób przewidywalny. - Nie zaskakuj użytkowników zachowaniem strony. - Unikaj sytuacji, gdy jakieś funkcje uruchamiają się automatycznie, bez wiedzy użytkownika. | |
| 3.2.1 Po otrzymaniu fokusu Poziom A Przyjęcie fokusu przez dowolny komponent interfejsu użytkownika nie powoduje nieoczekiwanej zmiany kontekstu. - Zmiana kontekstu to otwarcie nowej karty lub nowego okna w przeglądarce, uruchomienie aplikacji lub odtworzenie multimediów. - Unikaj otwierania nowych kart lub okien bez wyraźnej potrzeby. - To kryterium dotyczy sytuacji, gdy umieszczenie fokusu na elemencie wywołuje zmianę kontekstu, chociaż użytkownik nie wykonał żadnej innej akcji. | |
| 3.2.2 Podczas wprowadzania danych Poziom A Zmiana ustawień jakiegokolwiek komponentu interfejsu użytkownika nie powoduje automatycznej zmiany kontekstu, chyba, że użytkownik został poinformowany o takim działaniu, zanim zaczął korzystać z komponentu. - Zmiana kontekstu to otwarcie nowej karty lub nowego okna w przeglądarce, uruchomienie aplikacji lub odtworzenie multimediów. - Unikaj otwierania nowych kart lub okien bez wyraźnej potrzeby. - To kryterium dotyczy sytuacji, gdy użytkownik zaznaczy pole, wybierze coś z listy, zacznie wpisywać w pole tekstowe lub w inny sposób zmieni stan kontrolki. - Jeżeli musisz zastosować taki mechanizm, poinformuj o tym użytkownika. | |
| 3.2.3 Spójna nawigacja Poziom AA Mechanizmy nawigacji, które powtarzają się na wielu stronach internetowych w ramach jednego zestawu stron internetowych, występują w tej samej względnej kolejności za każdym razem, gdy są powtarzane, chyba że zmiana jest inicjowana przez użytkownika. - Ludzie korzystają ze stron internetowych na pamięć i nie zawsze czytają, co klikają. - Elementy menu lub innego systemu nawigacji powinny być zawsze w tej samej kolejności na podstronach. - Wyjątek stanowi sytuacja, kiedy użytkownik sam zdecyduje o układzie menu. | |
| 3.2.4 Spójna identyfikacja Poziom AA Komponenty, które mają tę samą funkcjonalność w ramach jednego zestawu stron internetowych, są w taki sam sposób zidentyfikowane. - Stosuj te same elementy graficzne i tekstowe do tych samych celów. - Słowo “Kontakt” powinno zawsze prowadzić do strony z danymi kontaktowymi lub formularzem kontaktowym. - Ikona telefonu zawsze musi oznaczać numer telefonu. - Jeżeli używasz tej samej ikony w różnych kontekstach (na przykład logo Facebooka jako linku do fanpage i do udostępniania artykułów) dostępna nazwa powinna być inna dla każdej z nich. | |
| 3.2.5 Zmiana na żądanie Poziom AAA Zmiany kontekstu inicjowane są tylko na żądanie użytkownika lub istnieje mechanizm pozwalający na wyłączenie takich zmian. - To kryterium sukcesu jest rozszerzeniem kryteriów 3.2.1 i 3.2.2. - Przeglądarka nie powinna zmieniać kontekstu bez wyraźnego żądania użytkownika - Wyraźne żądanie to na przykład kliknięcie przycisku. | |
| 3.2.6 Spójna pomoc Poziom A Jeśli strona internetowa zawiera którykolwiek z poniższych mechanizmów pomocy, a mechanizmy te powtarzają się na wielu stronach internetowych w ramach zestawu stron internetowych, występują one w tej samej kolejności względem innych treści strony, chyba że użytkownik zainicjuje zmianę: - Dane kontaktowe osoby; - Mechanizm kontaktu z osobą; - Opcja samopomocy; - W pełni zautomatyzowany mechanizm kontaktu. - Ułatwiaj użytkownikowi znalezienie pomocy i wsparcia. - Umieszczaj w stałym miejscu link do podstrony z danymi kontaktowymi, formularzem kontaktowym lub podstroną z pomocą. - Optymalnym miejscem są stałe elementy interfejsu, na przykład nagłówek, stopka lub menu główne. - Nie masz obowiązku zapewniania pomocy! Jeżeli jednak na stronie masz taki mechanizm, to ułatwiaj jego znalezienie. | |
| Wytyczna 3.3 – Pomoc przy wprowadzaniu informacji Pomagaj użytkownikom unikać błędów i je korygować. - Ta wytyczna dotyczy przede wszystkim formularzy. | |
| 3.3.1 Identyfikacja błędu Poziom A Jeśli automatycznie zostanie wykryty błąd wprowadzania danych, system wskazuje błędny element, a użytkownik otrzymuje opis błędu w postaci tekstu. - Kryterium dotyczy formularzy sprawdzających poprawność danych. - Pole z błędnymi danymi powinno być wyraźnie oznaczone, na przykład kolorem czerwonym i w inny sposób, żeby daltoniści też odnaleźli to pole. - Informacja o błędzie powinna być napisana tekstem, najlepiej obok pola formularza. - Komunikat o błędzie powinien informować, na czym polega błąd i jak go poprawić. | |
| 3.3.2 Etykiety lub instrukcje Poziom A Gdy w treści wymagane jest wprowadzenie danych przez użytkownika, zapewnione są etykiety lub instrukcje. - Widoczna etykieta informuje, jakie dane wprowadzić. - Instrukcje informują, jak wprowadzić dane. - Etykiety powinny być połączone programowo z polami formularza. - Placeholder nie może zastąpić etykiety. | |
| 3.3.3 Sugestie korekty błędów Poziom AA Jeśli automatycznie zostanie wykryty błąd wprowadzania danych i znane są sugestie korekty, wtedy użytkownik otrzymuje takie sugestie, chyba, że zagrażałoby to bezpieczeństwu treści lub zmieniło jej cel. - Podpowiadaj prawidłowy format danych, na przykład daty, kodu pocztowego. - Informuj, jeżeli tekst jest za krótki lub za długi. - Przypominaj o konieczności wprowadzenia obowiązkowych danych. - Na koniec poinformuj, że dane zostały wprowadzone poprawnie. - Nie podpowiadaj loginów, haseł i innych danych, które ktoś może przechwycić. | |
| 3.3.4 Zapobieganie błędom (prawnym, finansowym, w danych) Poziom AA W przypadku stron internetowych, które powodują zobowiązania prawne, albo na których użytkownik przeprowadza transakcje finansowe, modyfikuje lub usuwa dane w systemach przechowywania danych, nad którymi ma kontrolę, albo udziela odpowiedzi na testy, co najmniej jedna z poniższych informacji jest prawdziwa: - Odwracalność: Wprowadzenie danych jest odwracalne. - Sprawdzanie: Dane wprowadzone przez użytkownika są sprawdzane pod kątem błędów, a użytkownik ma możliwość wprowadzenia poprawek. - Potwierdzenie: Istnieje mechanizm sprawdzania, potwierdzania oraz korekty informacji przed jej ostatecznym wysłaniem. - Zobowiązania prawne to na przykład składanie oświadczeń, potwierdzanie regulaminów, zgody na przetwarzanie danych osobowych. - Zobowiązania finansowe to na przykład zakup w sklepie, zawarcie umowy o świadczenie usług, subskrypcja. - Przekazywanie danych dotyczy wszystkich danych, nie tylko danych osobowych. - Czerp praktyki z paneli transakcyjnych banków. | |
| 3.3.5 Pomoc Poziom AAA Istnieje pomoc kontekstowa. - Pomagaj użytkownikowi wypełniać formularze i wykonywać zadania. - Wyjaśniaj, co należy wpisać w formularzu, bo czasem etykieta nie wystarczy. - Uprzedź użytkownika, jakie dane musi przygotować. | |
| 3.3.6 Zapobieganie błędom (wszystkim) Poziom AAA Dla stron internetowych, które wymagają od użytkownika wprowadzania informacji, przynajmniej jedno z poniższych założeń jest prawdziwe: - Odwracalność: Wprowadzenie danych jest odwracalne. - Sprawdzanie: Dane wprowadzone przez użytkownika są sprawdzane pod kątem błędów, a użytkownik ma możliwość wprowadzenia poprawek. - Potwierdzenie: Istnieje mechanizm sprawdzania, potwierdzania oraz korekty informacji przed jej ostatecznym wysłaniem. - To kryterium sukcesu jest rozszerzeniem kryterium sukcesu 3.3.4, tylko dotyczy każdego rodzaju danych. - Spełnienie tego kryterium oznacza automatycznie spełnienie kryterium sukcesu 3.3.4. | |
| 3.3.7 Ponowne wpisy Poziom A Informacje uprzednio wprowadzone przez użytkownika lub przekazane użytkownikowi, które muszą zostać wprowadzone ponownie w tej samej procedurze, są: wypełniane automatycznie albo możliwe do wyboru przez użytkownika. Wyjątkiem są sytuacje, gdy: - ponowne wprowadzenie informacji jest niezbędne, - informacje są niezbędne do zapewnienia bezpieczeństwa treści lub - poprzednio wprowadzone informacje są już nieaktualne. - Podczas procesu wprowadzania danych użytkownik nie powinien być zmuszany do ponownego wprowadzania tych, które wprowadził wcześniej. - Wyjątkami są kwestie bezpieczeństwa i aktualności danych. - Dane wprowadzone wcześniej powinny się automatycznie kopiować w innych miejscach lub pozwalać użytkownikowi na wybór. | |
| 3.3.8 Dostępne uwierzytelnianie (minimum) Poziom AA Test funkcji poznawczych (taki jak zapamiętywanie hasła lub rozwiązywanie łamigłówki) nie jest wymagany na żadnym etapie procedury uwierzytelniania, chyba że etap ten zapewnia co najmniej jedną z poniższych - Alternatywa: Inna metoda uwierzytelniania, która nie opiera się na teście funkcji poznawczych. - Mechanizm: Dostępny jest mechanizm pomagający użytkownikowi w ukończeniu testu funkcji poznawczych. - Rozpoznawanie obiektów: Test funkcji poznawczych polega na rozpoznawaniu obiektów. - Treść osobista: Test funkcji poznawczych ma na celu rozpoznanie treści nietekstowych, które użytkownik dostarczył na stronę internetową. - Użytkownicy mogą mieć problem z zapamiętaniem i wpisaniem loginu, hasła i kodów jednorazowych. - Ułatwiaj użytkownikom logowanie się. - Pozwól na wklejanie loginów i haseł oraz używanie menedżerów haseł. - Pozwól na logowanie się za pomocą usług zewnętrznych, na przykład Google, Apple, czy Facebook. - Pozwól użytkownikom na potwierdzenie tożsamości przez wskazanie jakiegoś obiektu, w tym wcześniej przesłanego na stronę (na przykład grafika lub dźwięk). | |
| 3.3.9 Dostępne uwierzytelnianie (ulepszone) Poziom AAA Test funkcji poznawczych (taki jak zapamiętywanie hasła lub rozwiązywanie łamigłówki) nie jest wymagany na żadnym etapie procesu uwierzytelniania, chyba że etap ten zapewnia co najmniej jedną z poniższych: - Alternatywa: Inna metoda uwierzytelniania, która nie opiera się na teście funkcji poznawczych. - Mechanizm: Dostępny jest mechanizm pomagający użytkownikowi w ukończeniu testu funkcji poznawczych. - To kryterium sukcesu jest bardziej restrykcyjne od kryterium sukcesu 3.3.8. - Spełnienie tego kryterium oznacza automatyczne spełnienie kryterium 3.3.8. - Logowanie nie może się opierać o rozpoznawanie obiektów, na przykład grafik, w tym także przesłanych przez użytkownika. | |
| Zasada 4 – Solidność Twórz treści solidnie, aby mogły być skutecznie interpretowane przez różne programy użytkownika, w tym technologie wspomagające. - Użytkownicy korzystają z bardzo różnorodnych technologii, w tym technologii asystujących. - Stosowanie standardów sieciowych zapewnia dobrą współpracę z tymi technologiami. | |
| Wytyczna 4.1 – Kompatybilność Zapewnij jak największą zgodność z aktualnymi i przyszłymi programami użytkownika, w tym z technologiami asystującymi. - Strona powinna działać na wszystkich przeglądarkach. - Stosowanie standardów sieciowych ułatwia zapewnienie kompatybilności. | |
| 4.1.1 Poprawność kodu Poziom A W treści wprowadzonej przy użyciu języka znaczników, elementy posiadają kompletne znaczniki początkowe i końcowe, elementy są zagnieżdżane według swoich specyfikacji, nie posiadają zduplikowanych atrybutów, a wszystkie ID są unikalne, z wyjątkiem przypadków, kiedy specyfikacja zezwala na wyżej wymienione cechy. - To kryterium sukcesu już nie obowiązuje, ponieważ przeglądarki radzą sobie z błędami w kodzie. - Nadal warto pisać poprawny kod, bo łatwiej go aktualizować i znajdować błędy. | |
| 4.1.2 Nazwa, rola, wartość Poziom A Dla wszystkich komponentów interfejsu użytkownika (w tym, ale nie tylko, elementów formularzy, łączy oraz komponentów wygenerowanych przez skrypty) nazwa oraz rola mogą być określone programowo; stan, właściwości oraz wartości, które mogą być ustawione przez użytkownika, mogą również być ustawione programowo; powiadomienie o zmianach w tych elementach dostępne jest dla programów użytkownika, w tym technologii wspomagających. - Dzięki nazwie, roli i wartości technologie asystujące i użytkownicy wiedzą, jak użyć komponentu. - Rola to może być “przycisk”, “pole wyboru”, “pole edycji”, “akapit”, “grafika”, “łącze” i wiele innych. - Znaczniki HTML (poza DIV i SPAN) zawsze mają zdefiniowaną rolę. - Nazwa identyfikuje konkretny element, dzięki czemu można odnaleźć go w kodzie lub w drzewie DOM. - Wartość to zmienna lub stan. Zmienna może być tekstem. - Stany zależą od konkretnego komponentu i są to na przykład “zaznaczony”, “rozwinięty”, “obowiązkowy”, “nieaktywny” i podobne. | |
| 4.1.3 Komunikaty o stanie Poziom AA W treści wprowadzonej przy użyciu języka znaczników komunikaty o stanie mogą być programowo określane poprzez role lub właściwości, dzięki czemu mogą być prezentowane użytkownikowi za pomocą technologii wspomagających bez uzyskiwania fokusu. - Chodzi o komunikaty pojawiające się na ekranie, ale nie w miejscu, w którym jest fokus. - Te aktywne obszary (live region) można obsłużyć za pomocą WAI-ARIA. - Stosuj te rozwiązania z rozwagą, żeby nie utrudniały korzystania ze strony, na przykład przez wielokrotne powtarzanie tej samej informacji. | |
| Strona jest zgodna z WCAG na określonym poziomie, jeżeli spełnia wszystkie kryteria sukcesu dla tego poziomu i niższych. Zgodność na poziomie A wymaga, żeby spełnić wszystkie kryteria sukcesu na poziomie A. Zgodność na poziomie AA wymaga spełnienia wszystkich kryteriów na poziomie A i AA. Zgodność na poziomie AAA wymaga spełnienia wszystkich kryteriów na poziomie A, AA i AAA. | |
| Europejska norma sharmonizowana EN 301549 opisuje sposoby zapewnienia dostępności cyfrowej stron internetowych, dokumentów elektronicznych, oprogramowania i sprzętu. Norma jest oparta o WCAG na poziomie AA. | |
| Metodyka WCAG-EM (Evaluation Methology) opisuje sposób przeprowadzania oceny dostępności produktów cyfrowych. Za jej pomocą można przeprowadzać audyty stron internetowych, dokumentów elektronicznych i oprogramowania. | |
| Parametry napisów dla niesłyszących wynikają z tempa czytania napisów. Dla osób dobrze znających język polski jest to ok. 17 znaków na sekundę, a dla osób mających problemy z czytaniem - najwyżej 12 znaków. Do tej grupy zaliczają się osoby głuche od urodzenia, dla których polski jest językiem obcym. | |
| Parametry napisów dla niesłyszących: 1. W jednym wierszu powinno być najwyżej 40 znaków. 2. Napis powinien być wyświetlany przez co najmniej 1 sekundę i co najwyżej 7 sekund. | |
| 3. Napis powinien się zmieścić w 1 wierszu, od biedy w 2 wierszach, a od wielkiej biedy w 3 wierszach. W tym ostatnim przypadku pierwszy wiersz powinien być jak najkrótszy. 4. Czcionka powinna być bezszeryfowa i nie należy stosować kursywy. 5. W napisach można użyć co najwyżej 4 kolorów odróżniających postacie. 6. Jeżeli napis musi być podzielony na 2 wiersze, to powinny być one podobnej długości, uwzględniając przy tym konstrukcję zdań. | |
| Napisy dla niesłyszących najlepiej dostarczać jako usługę zamkniętą, czyli jako dodatkowy plik z napisami. | |
| Wreszcie podział na napisy zamknięte i otwarte. Ja wiem, że to nie jest intuicyjne, ale napisy zamknięte to takie, które osoba oglądająca film może włączyć lub wyłączyć. Otwarte napisy to z kolei takie zapisane na stałe w filmie i nie da się ich wyłączyć. Napisy otwarte mają tylko 1 przewagę nad zamkniętymi - wyświetlą się zawsze, jeżeli tylko wyświetli się sam film. Poza tym jednak mają same wady. | |
| Napisy zamknięte można powiększyć, zmienić ich krój, kolor. Można też wybrać napisy w innej wersji, na przykład w innym języku, o ile takie istnieją. To właśnie napisy zapisane w formacie WebVTT lub SRT są zamkniętymi i najlepiej stosować właśnie takie. | |
| Programów do tworzenia i edycji napisów jest mnóstwo. Są nawet edytory webowe, na przykład w YouTube Studio. Ja jednak polecam bezpłatny Subtitle Edit, który ma wiele funkcji przydatnych przy tworzeniu napisów. Może korzystać z Whisper, czyli modelu językowego do rozpoznawania mowy, który przygotuje roboczą wersję napisów. Potem Twoim zadaniem jest dopracować napisy, co jest już o wiele łatwiejsze, niż przepisywanie i ręczne synchronizowanie. | |
| SubtitleEdit ma wbudowane narzędzia wspomagające poprawianie napisów, w tym wskazywanie problemów w rodzaju zbyt długich linii. Część z tych błędów może także automatycznie usunąć. | |
| Tekst alternatywny. WCAG mówią o krótkiej i długiej alternatywie tekstowej. Nigdzie nie podają, jaka ma być ta długość w znakach, więc wszelkie tego typu rekomendacje nie wynikają z WCAG. Krótka alternatywa służy do wskazania celu linku graficznego lub podstawowego opisu, jeżeli to nie jest link lub przycisk. W przypadku grafik służy do tego atrybut ALT. W atrybucie nie ma możliwości formatowania tekstu. Jeżeli potrzebujesz także długą alternatywę, to możesz to zrobić dodając link do dokumentu HTML opisującego w sposób kompleksowy grafikę. | |
| W Zintegrowanym Systemie Kwalifikacji (ZSK) są zarejestrowane kwalifikacje dotyczące cyfrowej dostępności. Można zatem uzyskać oficjalny certyfikat. Są to: 1. Wykorzystywanie standardu WCAG (Web Content Accessibility Guidelines) przy tworzeniu i dostosowywaniu stron internetowych 2. Wykorzystanie standardu WCAG (Web Content Accessibility Guidelines) przy tworzeniu i dostosowywaniu aplikacji mobilnych 3. Audytowanie dostępności stron internetowych zgodnie ze standardem WCAG (Web Content Accessibility Guidelines) 4. Audytowanie dokumentów cyfrowych w oparciu o standard WCAG (Web Content Accessibility Guidelines) 5. Projektowanie i prowadzenie badań dostępności informacji elektronicznej z udziałem użytkowników-testerów z indywidualnymi potrzebami 6. Wykorzystywanie standardu WCAG (Web Content Accessibility Guidelines) w tworzeniu i dostosowywaniu dokumentów cyfrowych 7. Organizowanie usług dostosowywania multimediów do standardu WCAG (Web Content Accessibility Guidelines) z podstawowymi umiejętnościami ich dostosowania dla osób z indywidualnymi potrzebami 8. Wykorzystywanie standardu WCAG (Web Content Accessibility Guidelines) w redagowaniu stron internetowych | |
| Ministerstwo Cyfryzacji i firma szkoleniowa Certes sp. z o.o. realizują wspólnie projekt szkoleniowy. Nasz projekt ma oficjalną nazwę „Systemowe kształcenie specjalistów i specjalistek ds. dostępności cyfrowej”. Czasem będziemy się posługiwać krótszą nazwą „Szkoła Dostępności Cyfrowej”. W projekcie oferujemy bezpłatne szkolenia przygotowujące do uzyskania certyfikatu potwierdzającego kwalifikacje opisane w Zintegrowanym Systemie Kwalifikacji (ZSK). Pokryjemy także koszt 1 podejścia do walidacji (egzaminu). | |
| Szkolenia dotyczące cyfrowej dostępności oferują także inne firmy i organizacje, w tym między innymi [Accens](https://accens.io), [Pracownia dostępności cyfrowej](https://lepszyweb.pl). Bezpłatne szkolenia organizuje także [Wydział Dostępności Cyfrowej Ministerstwa Cyfryzacji](https://www.gov.pl/web/cyfryzacja/dostepnosc-cyfrowa). | |
| Audyt strony internetowej możesz zamówić w wielu firmach. Godnymi polecenia są [Accens](https://accens.io), [Kinaole](https://kinaole.co) i [Utilitia](https://utilitia.pl). Przy zamawianiu poproś o potwierdzenie kwalifikacji, na przykład przez okazanie certyfikatów polskich lub zagranicznych. Poproś także o wskazanie metodyki, jaką wykonawca będzie się posługiwał podczas badania. |