WCAG 2.1 – kryteria sukcesu dla poziomu A i AA<\/h2>\n\n\n\nPostrzegalno\u015b\u0107<\/h3>\n\n\n\n
1.1.1 Tre\u015b\u0107 nietekstowa (A)<\/strong> – tre\u015bci, kt\u00f3re nie s\u0105 tekstem elektronicznym, takie jak m.in. ilustracje, diagramy, fotografie musz\u0105 posiada\u0107 alternatywny opis w postaci atrybutu ALT obrazka.<\/p>\n\n\n\n 1.2.1 Tylko audio lub tylko wideo (nagranie) (A)<\/strong> – Samo audio (np. podkast, wywiad radiowy, itp.) – wymagana jest transkrypcja nagrania; Wideo (bez d\u017awi\u0119ku) lub pokaz slajd\u00f3w – wymagana jest alternatywa w postaci tekstu lub audiodeskrypcja opisuj\u0105ca co przedstawia wideo;<\/p>\n\n\n\n 1.2.2 Napisy rozszerzone (nagranie) (A)<\/strong> – zapewnij napisy do nagra\u0144 nietransmitowanych na \u017cywo. Powinny uwzgl\u0119dnia\u0107 zar\u00f3wno dialogi, jak i istotne informacje d\u017awi\u0119kowe. Dobr\u0105 praktyk\u0105 jest defaultowe w\u0142\u0105czenie napis\u00f3w, z mo\u017cliwo\u015bci\u0105 ukrycia ich.<\/p>\n\n\n\n 1.2.3 Audiodeskrypcja lub alternatywa tekstowa dla medi\u00f3w (nagranie) (A)<\/strong> – przygotuj audiodeskrypcj\u0119, czyli nagranie audio opisuj\u0105ce tre\u015bci wizualne. Drugim rozwi\u0105zaniem jest opracowanie alternatywy dla medi\u00f3w opartych na czasie w postaci tekstu. Tre\u015b\u0107 powinna zawiera\u0107 zar\u00f3wno transkrypcj\u0119 dialog\u00f3w jak i opis wszystkich istotnych element\u00f3w wizualnych i d\u017awi\u0119kowych nagrania.<\/p>\n\n\n\n 1.2.4 Napisy rozszerzone (na \u017cywo) (AA)<\/strong> – zapewnij napisy do nagra\u0144 transmitowanych na \u017cywo. Powinny uwzgl\u0119dnia\u0107 zar\u00f3wno dialogi, jak i istotne informacje d\u017awi\u0119kowe. Dobr\u0105 praktyk\u0105 jest defaultowe w\u0142\u0105czenie napis\u00f3w, z mo\u017cliwo\u015bci\u0105 ukrycia ich.<\/p>\n\n\n\n 1.2.5 Audiodeskrypcja (nagranie) (AA)<\/strong> – opracuj audiodeskrypcj\u0119 i dodaj j\u0105 do g\u0142\u00f3wnej \u015bcie\u017cki d\u017awi\u0119kowej. W skr\u00f3cie audiodeskrypcj\u0105 mo\u017cemy nazwa\u0107 nagranie audio opisuj\u0105ce tre\u015bci wizualne. To kryterium s\u0142u\u017cy osobom z dysfunkcjami narz\u0105du wzroku zrozumie\u0107 tre\u015bci wideo.<\/p>\n\n\n\n 1.3.1 Informacje i relacje (A)<\/strong> – wykorzystuj znaczniki semantyczne zgodnie z ich przeznaczeniem (mi\u0119dzy innymi po to, by czytnik ekranu w\u0142a\u015bciwie i po kolei odczytywa\u0142 tre\u015bci znajduj\u0105ce si\u0119 na stronie).<\/p>\n\n\n\n 1.3.2 Zrozumia\u0142a kolejno\u015b\u0107 (A)<\/strong> – Zapewnij zrozumia\u0142\u0105 kolejno\u015b\u0107 element\u00f3w na stronie r\u00f3wnie\u017c po wy\u0142\u0105czeniu styli CSS. U\u017cytkownicy korzystaj\u0105cy z czytnika ekranu lub korzystaj\u0105cy jedynie z klawiatury powinni m\u00f3c odbiera\u0107 tre\u015bci w logicznej kolejno\u015bci.<\/p>\n\n\n\n 1.3.3 W\u0142a\u015bciwo\u015bci zmys\u0142owe (A)<\/strong> – elementy nawigacji nie mog\u0105 opiera\u0107 si\u0119 tylko na wra\u017ceniach zmys\u0142owych, takich jak kolor, rozmiar, kszta\u0142t elementu, jego po\u0142o\u017cenie na stronie. Informacje nie powinny by\u0107 przekazywane tylko i wy\u0142\u0105cznie w postaci ikon lub symboli.<\/p>\n\n\n\n 1.3.4 Orientacja (AA)<\/strong> – to kryterium dotyczy wy\u015bwietlania si\u0119 strony na urz\u0105dzeniach mobilnych. Strona powinna wy\u015bwietla\u0107 si\u0119 prawid\u0142owo zar\u00f3wno w pionie jak i w poziomie. S\u0105 jednak wyj\u0105tki, do kt\u00f3rych mo\u017cemy zaliczy\u0107 aplikacj\u0119 do gry na pianinie. W tym przypadku, uk\u0142ad klawiszy wymusza poziom\u0105 orientacj\u0119 urz\u0105dzenia.<\/p>\n\n\n\n 1.3.5 Okre\u015blenie po\u017c\u0105danej warto\u015bci (AA)<\/strong> – pola wprowadzania danych u\u017cytkownika powinny mie\u0107 dodany atrybut \u201cautocomplete\u201d.<\/p>\n\n\n\n 1.4.1 U\u017cycie koloru (A)<\/strong> – kolor nie powinien by\u0107 jedynym no\u015bnikiem informacji. I tak w przypadku b\u0142\u0119dnie wype\u0142nionego pola formularza, opr\u00f3cz pod\u015bwietlenia w kolorze czerwonym, trzeba r\u00f3wnie\u017c umie\u015bci\u0107 tekstow\u0105 informacj\u0119 o b\u0142\u0119dzie. Kolejnym przyk\u0142adem s\u0105 linki. Dobr\u0105 praktyk\u0105 jest oznaczanie hiper\u0142\u0105czy poprzez ich podkre\u015blenie, dzi\u0119ki temu b\u0119d\u0105 wyra\u017anie widoczne po\u015br\u00f3d reszty tekstu.<\/p>\n\n\n\n 1.4.2 Kontrola odtwarzania d\u017awi\u0119ku (A)<\/strong> – Nagrania audio umieszczone na stronie internetowej nie powinny uruchamia\u0107 si\u0119 automatycznie. Je\u017celi d\u017awi\u0119k jest odtwarzany przez wi\u0119cej ni\u017c 3 sekundy trzeba umo\u017cliwi\u0107 u\u017cytkownikowi wstrzymanie\/wy\u0142\u0105czenie d\u017awi\u0119ku lub regulacj\u0119 g\u0142o\u015bno\u015bci. Kontrolka wyciszania d\u017awi\u0119ku powinna by\u0107 \u0142atwo dost\u0119pna, aby osoby korzystaj\u0105ce z czytnika ekranu lub u\u017cywaj\u0105ce klawiatury z \u0142atwo\u015bci\u0105 mog\u0142y wy\u0142\u0105czy\u0107 d\u017awi\u0119k.<\/p>\n\n\n\n 1.4.3 Kontrast (minimum) (AA)<\/strong> – tekst i grafiki tekstowe (w postaci plik\u00f3w .svg, .png, itd.) powinny kontrastowa\u0107 z t\u0142em w stosunku 4.5:1<\/strong>. W przypadku u\u017cycia du\u017cego tekstu (na przyk\u0142ad 18px) zapewnij minimalny kontrast element\u00f3w w stosunku 3:1<\/strong>. Zasada nie obejmuje dekoracyjnych element\u00f3w, logotyp\u00f3w, nieaktywnych element\u00f3w interfejsu.<\/p>\n\n\n\n 1.4.4 Zmiana rozmiaru tekstu (AA)<\/strong> – strona internetowa powinna by\u0107 czytelna i funkcjonalna po podwojeniu rozmiaru tekstu (200%).<\/p>\n\n\n\n 1.4.5 Obrazy tekstu (AA)<\/strong> – je\u017celi to mo\u017cliwe unikaj grafik przedstawiaj\u0105cych tekst, a u\u017cywaj tekstu elektronicznego. Wyj\u0105tkiem s\u0105 logotypy oraz elementy identyfikacji wizualnej. Zapewnij im tekst alternatywny.<\/p>\n\n\n\n 1.4.10 Dopasowanie do ekranu (AA)<\/strong> – stw\u00f3rz responsywn\u0105 stron\u0119, kt\u00f3rej tre\u015b\u0107 b\u0119dzie wy\u015bwietlana r\u00f3wnie\u017c w szeroko\u015bci 320 px bez utraty funkcjonalno\u015bci i informacji oraz bez u\u017cycia horyzontalnego scrolla. W okre\u015blonych przypadkach mo\u017cna zastosowa\u0107 przewijanie w poziomie (rozbudowane tabele, karuzela obraz\u00f3w, mapy itd.)<\/p>\n\n\n\n 1.4.11 Kontrast element\u00f3w nietekstowych (AA)<\/strong> – wsp\u00f3\u0142czynnik kontrastu nietekstowych element\u00f3w interfejsu u\u017cytkownika (takich jak ikony, inputy, buttony) do t\u0142a powinien wynosi\u0107 co najmniej 3:1<\/strong>.<\/p>\n\n\n\n 1.4.12 Odst\u0119py w tek\u015bcie (AA)<\/strong> – zastosuj odst\u0119py w tek\u015bcie wed\u0142ug poni\u017cszych regu\u0142:<\/p>\n\n\n\n 1.4.13 Tre\u015b\u0107 spod kursora lub fokusu (AA)<\/strong> – kryterium sukcesu okre\u015bla zachowania element\u00f3w interaktywnych aktywowanych kursorem lub fokusem. Hover aktywuje si\u0119 zar\u00f3wno po najechaniu kursorem jak i przy nawigacji klawiatur\u0105 (klawiszem TAB). Tre\u015b\u0107 powinna zosta\u0107 odrzucona po wci\u015bni\u0119ciu klawisza ESC. Hover elementu znika, kiedy najedziemy kursorem na inny element.<\/p>\n\n\n\n 2.1.1 Klawiatura (A)<\/strong> – wszystkie funkcjonalno\u015bci strony powinny by\u0107 dost\u0119pne przy u\u017cyciu jedynie klawiatury lub czytnik\u00f3w emuluj\u0105cych klawiatur\u0119. U\u017cytkownik musi mie\u0107 mo\u017cliwo\u015b\u0107 wej\u015bcia w link za pomoc\u0105 klawisza SPACJI lub ENTER. Pami\u0119taj, aby cel link\u00f3w i button\u00f3w by\u0142 jasno sprecyzowany. Unikaj frazy \u201cKliknij tutaj\u201d.<\/p>\n\n\n\n 2.1.2 Bez pu\u0142apki na klawiatur\u0119 (A)<\/strong> – upewnij si\u0119, \u017ce mo\u017cna przenosi\u0107 fokus klawiatury na elementy interfejsu oraz usuwa\u0107 fokus elementu r\u00f3wnie\u017c za pomoc\u0105 klawiatury. Przyk\u0142adem mo\u017ce by\u0107 pop-up, kt\u00f3ry mo\u017cemy zamkn\u0105\u0107 za pomoc\u0105 klawisza ESC.<\/p>\n\n\n\n 2.1.4 Jednoznakowe skr\u00f3ty klawiaturowe (A)<\/strong> – je\u017celi w tre\u015bci strony zaimplementowany jest skr\u00f3t klawiszowy, powinien by\u0107 aktywny tylko po otrzymaniu fokusu. Zapewnij mo\u017cliwo\u015b\u0107 zmiany skr\u00f3tu lub mechanizm wy\u0142\u0105czenia go przez u\u017cytkownika. Czytniki ekranu r\u00f3wnie\u017c maj\u0105 swoje skr\u00f3ty klawiszowe, dlatego wa\u017cne jest unikanie sytuacji, w kt\u00f3rej te same skr\u00f3ty b\u0119d\u0105 ze sob\u0105 kolidowa\u0107.<\/p>\n\n\n\n 2.2.1 Dostosowanie czasu (A)<\/strong> – Unikaj nak\u0142adania limit\u00f3w czasowych. Je\u015bli ograniczenie czasowe jest konieczne zapewnij u\u017cytkownikowi mo\u017cliwo\u015b\u0107 zapauzowania, wy\u0142\u0105czenia lub wyd\u0142u\u017cenia limitu. Od tej zasady r\u00f3wnie\u017c s\u0105 wyj\u0105tki. Nie ma potrzeby wyd\u0142u\u017cania limitu je\u015bli czas na uko\u0144czenie zadania wynosi co najmniej 20 godzin. Innym wyj\u0105tkiem jest wydarzenie w czasie rzeczywistym, na przyk\u0142ad aukcja internetowa.<\/p>\n\n\n\n 2.2.2 Pauza, zatrzymanie, ukrycie (A)<\/strong> – Elementy na stronie, kt\u00f3re poruszaj\u0105 si\u0119, animuj\u0105 i migotaj\u0105 d\u0142u\u017cej ni\u017c 5s i s\u0105 aktywowane automatycznie, powinno da\u0107 si\u0119 wy\u0142\u0105czy\u0107, zapauzowa\u0107 lub ukry\u0107. Je\u017celi nie jest to konieczne, unikaj automatycznego od\u015bwie\u017cania strony. Zapewnij u\u017cytkownikowi komfort korzystania z Twojej strony. \ud83d\ude42<\/p>\n\n\n\n 2.3.1 Trzy b\u0142yski lub warto\u015bci poni\u017cej progu (A)<\/strong> – kryterium sukcesu skupia si\u0119 na osobach z epilepsj\u0105 \u015bwiat\u0142oczu\u0142\u0105. Upewnij si\u0119, \u017ce Twoja strona nie zawiera w tre\u015bci niczego, co b\u0142yska cz\u0119\u015bciej ni\u017c trzy razy w ci\u0105gu jednej sekundy lub te\u017c b\u0142ysk nie przekracza warto\u015bci granicznych dla b\u0142ysk\u00f3w og\u00f3lnych i czerwonych. Je\u017celi taki materia\u0142 multimedialny koniecznie ma si\u0119 znale\u017a\u0107 na stronie dodaj wyra\u017ane ostrze\u017cenie, na przyk\u0142ad: \u201cMateria\u0142 zawiera migaj\u0105ce obrazy.\u201d.<\/p>\n\n\n\n 2.4.1 Mo\u017cliwo\u015b\u0107 pomini\u0119cia blok\u00f3w (A)<\/strong> – u\u0142atwiaj u\u017cytkownikom szybkie dotarcie do tre\u015bci, jakich szukaj\u0105. Nawigacja za pomoc\u0105 klawiatury wymaga przej\u015bcia przez ka\u017cdy interaktywny element, co wyd\u0142u\u017ca drog\u0119 u\u017cytkownika chc\u0105cego przej\u015b\u0107 do konkretnego elementu strony. Kryterium jest spe\u0142nione je\u017celi na stronie istnieje mechanizm, kt\u00f3ry umo\u017cliwia pomini\u0119cie powtarzaj\u0105cych si\u0119 blok\u00f3w tre\u015bci (na przyk\u0142ad listy link\u00f3w). Dobr\u0105 praktyk\u0105 jest dodanie na pocz\u0105tku strony linku \u201cPrzeskocz do g\u0142\u00f3wnej tre\u015bci\u201d, kt\u00f3ry jest widoczny zaraz po wej\u015bciu na stron\u0119 i wci\u015bni\u0119ciu klawisza TAB.<\/p>\n\n\n\n 2.4.2 Tytu\u0142 strony (A)<\/strong> – Ka\u017cda podstrona serwisu powinna mie\u0107 unikalny tytu\u0142, opisuj\u0105cy jej cel lub przedstawiaj\u0105cy jej temat.<\/p>\n\n\n\n 2.4.3 Kolejno\u015b\u0107 fokusu (A)<\/strong> – Przy nawigacji za pomoc\u0105 klawiatury, fokus aktywuje elementy interfejsu w logicznej kolejno\u015bci, dzi\u0119ki kt\u00f3rej zachowany jest sens tre\u015bci.<\/p>\n\n\n\n 2.4.4 Cel \u0142\u0105cza (w kontek\u015bcie) (A)<\/strong> – Cel \u0142\u0105cza (link\u00f3w, button\u00f3w) powinien wynika\u0107 jasno z kontekstu w jakim si\u0119 znalaz\u0142o. Unikaj button\u00f3w o tre\u015bci \u201cKliknij tutaj\u201d. Je\u017celi strona otwiera si\u0119 w nowym oknie przegl\u0105darki koniecznie poinformuj o tym u\u017cytkownika (np. w tre\u015bci odno\u015bnika za pomoc\u0105 klasy \u201csr-only\u201d).<\/p>\n\n\n\n 2.4.5 Wiele dr\u00f3g (AA)<\/strong> – strona internetowa powinna zapewnia\u0107 przynajmniej dwa r\u00f3\u017cne sposoby dotarcia do podstron serwisu. Przyk\u0142ady takich rozwi\u0105za\u0144:<\/p>\n\n\n\n Wyj\u0105tkiem s\u0105 na przyk\u0142ad quizy online, w kt\u00f3rych jest mo\u017cliwy tylko jeden spos\u00f3b nawigacji – odpowied\u017a na zadane pytanie warunkuje przej\u015bcie do kolejnego ekranu.<\/p>\n\n\n\n 2.4.6 Nag\u0142\u00f3wki i etykiety (AA)<\/strong> – porz\u0105dkuj tre\u015bci za pomoc\u0105 nag\u0142\u00f3wk\u00f3w i etykiet. Zar\u00f3wno jedne jak i drugie powinny by\u0107 znacznikami semantycznymi i okre\u015bla\u0107 temat lub cel tre\u015bci. Stosuj etykiety do opisu input\u00f3w formularzy, zrezygnuj ze stosowania placeholder\u00f3w w polach formularzy. Pami\u0119taj, \u017ce nag\u0142\u00f3wki s\u0105 bardzo istotne z punktu widzenia nawigacji.<\/p>\n\n\n\n 2.4.7 Widoczny fokus (A)<\/strong> – Kryterium jest spe\u0142nione, gdy ka\u017cdy interaktywny element zyskuje widoczny fokus przy nawigacji za pomoc\u0105 klawiatury. Nie polegaj jedynie na domy\u015blnych stylach fokusa przegl\u0105darek, poniewa\u017c cz\u0119\u015b\u0107 z nich nie spe\u0142nia kryteri\u00f3w dost\u0119pno\u015bci.<\/p>\n\n\n\n 2.5.1 Gesty dotykowe (A)<\/strong> – zapewnij uproszczon\u0105 alternatyw\u0119 (dotyk jednopunktowy) dla opcji wymagaj\u0105cych gest\u00f3w wielopunktowych lub opartych na \u015bcie\u017ckach (takich jak: \u201cszczypanie\u201d ekranu, przeci\u0105ganie). Wyj\u0105tkiem od regu\u0142y jest na przyk\u0142ad sk\u0142adanie elektronicznego podpisu. Przyk\u0142ad rozwi\u0105zania: mapka na urz\u0105dzeniu mobilnym mo\u017ce by\u0107 powi\u0119kszona zar\u00f3wno \u201cszczypaniem\u201d ekranu (gest wielopunktowy), jak i przyciskiem plusa (dotyk jednopunktowy).<\/p>\n\n\n\n 2.5.2 Rezygnacja ze wskazania (A)<\/strong> – kryterium odnosi si\u0119 do klikalnych element\u00f3w interfejsu, aktywowanych za pomoc\u0105 dotyku jednopunktowego. Poni\u017cej opisz\u0119 schemat dzia\u0142ania na przyk\u0142adzie przycisku:<\/p>\n\n\n\n 2.5.3 Etykieta w nazwie (A)<\/strong> – Dost\u0119pna nazwa elementu interfejsu – czyli taka, jak\u0105 us\u0142yszy u\u017cytkownik korzystaj\u0105cy z czytnika ekranu powinna by\u0107 zbie\u017cna z graficznym interfejsem (mo\u017ce by\u0107 rozwini\u0119ciem nazwy buttonu).<\/p>\n\n\n\n 2.5.4 Aktywowanie ruchem (A)<\/strong> – Opr\u00f3cz opcji aktywowania zdarzenia ruchem urz\u0105dzenia (np. potrz\u0105saniem, pochylaniem telefonu) powinien by\u0107 te\u017c mo\u017cliwy inny spos\u00f3b aktywacji, na przyk\u0142ad button. Zapewnij u\u017cytkownika, \u017ce mo\u017ce wy\u0142\u0105czy\u0107 opcj\u0119 reagowania na ruch bez utraty funkcjonalno\u015bci strony.<\/p>\n\n\n\n 3.1.1 J\u0119zyk strony (A)<\/strong> – Tre\u015b\u0107 strony powinna by\u0107 zrozumia\u0142a zar\u00f3wno dla ludzi jak i technologii. Nadaj atrybut lang ze znacznikiem odpowiedniego j\u0119zyka w elemencie HTML (html lang=\u201dpl\u201d), aby technologie asystuj\u0105ce mog\u0142y odczyta\u0107 tre\u015b\u0107 strony we w\u0142a\u015bciwym j\u0119zyku.<\/p>\n\n\n\n 3.1.2 J\u0119zyk cz\u0119\u015bci (AA)<\/strong> – je\u017celi na stronie znajduj\u0105 si\u0119 tre\u015bci w innym j\u0119zyku, ni\u017c g\u0142\u00f3wny j\u0119zyk strony, odpowiednio je oznacz. Czytnik ekranu przeczyta je z charakterystyczn\u0105 dla danego kraju wymow\u0105. Je\u017celi w tek\u015bcie pojawia si\u0119 skr\u00f3t lub \u017cargon warto na ko\u0144cu tekstu da\u0107 przypis z wyja\u015bnieniem co on oznacza. Dobr\u0105 praktyk\u0105 jest r\u00f3wnie\u017c dodanie w nawiasie wymowy fonetycznej obco brzmi\u0105cego s\u0142owa.<\/p>\n\n\n\n 3.2.1 Po otrzymaniu fokusu (A)<\/strong> – Przyj\u0119cie fokusu przez dowolny komponent interfejsu u\u017cytkownika nie powoduje nieoczekiwanej zmiany kontekstu, co oznacza, \u017ce sam fokus nie powoduje akcji (dopiero po klikni\u0119ciu SPACJI lub ENTER).<\/p>\n\n\n\n 3.2.2 Podczas wprowadzania danych (A)<\/strong> – proces wprowadzania danych powinien by\u0107 przewidywalny. Wype\u0142nianie formularza lub zaznaczenie pola wyboru nie powinno powodowa\u0107 zmiany kontekstu czy automatycznego przesy\u0142ania danych, a\u017c do momentu klikni\u0119cia przez u\u017cytkownika w przycisk. Je\u017celi funkcjonalno\u015b\u0107 strony wymaga inaczej, u\u017cytkownik powinien by\u0107 z wyprzedzeniem poinformowany o takim dzia\u0142aniu.<\/p>\n\n\n\n 3.2.3 Sp\u00f3jna nawigacja (AA)<\/strong> – Zachowaj sp\u00f3jn\u0105 kolejno\u015b\u0107 element\u00f3w, kt\u00f3re powtarzaj\u0105 si\u0119 na podstronach serwisu. Najlepiej przyzwyczai\u0107 u\u017cytkownika do pewnego schematu, aby poruszaj\u0105c si\u0119 po stronie z \u0142atwo\u015bci\u0105 m\u00f3g\u0142 odszuka\u0107 interesuj\u0105cy go element. Wyj\u0105tkiem jest sytuacja, w kt\u00f3rej u\u017cytkownik samodzielnie wprowadzi zmiany w uk\u0142adzie tre\u015bci.<\/p>\n\n\n\n 3.2.4 Sp\u00f3jna identyfikacja (AA)<\/strong> – Oznaczaj w podobny spos\u00f3b komponenty, kt\u00f3re maj\u0105 t\u0119 sam\u0105 funkcjonalno\u015b\u0107. Stosuj konsekwentnie etykiety, nazwy i alternatywy tekstowe.<\/p>\n\n\n\n 3.3.1 Identyfikacja b\u0142\u0119du (A)<\/strong> – Wyra\u017anie oznaczaj wymagane pola formularza. Przy identyfikacji b\u0142\u0119du, pope\u0142nionego przy wprowadzaniu danych, poinformuj u\u017cytkownika, kt\u00f3ry element wymaga poprawy. Identyfikuj b\u0142\u0119dy za pomoc\u0105 aria invalid.<\/p>\n\n\n\n 3.3.2 Etykiety lub instrukcje (A)<\/strong> – dobrym rozwi\u0105zaniem jest dodanie kr\u00f3tkiej instrukcji na temat wymaganego formatu danych, jakie maj\u0105 by\u0107 wprowadzone (na przyk\u0142ad formatu daty). Nie stosuj placeholder\u00f3w w inpucie, ale dodawaj etykiety do p\u00f3l formularzy.<\/p>\n\n\n\n 3.3.3 Sugestie korekty b\u0142\u0119d\u00f3w (AA)<\/strong> – je\u017celi strona wykryje b\u0142\u0105d w formacie danych wprowadzonych przez u\u017cytkownika, na przyk\u0142ad w postaci braku znaku \u201c@\u201d w polu e-mail, zasugeruj korekt\u0119. Wyj\u0105tek stanowi\u0105 sytuacje, w kt\u00f3rych sugerowanie podpowiedzi zagra\u017ca\u0142oby bezpiecze\u0144stwu danych (np. w bankowo\u015bci internetowej) lub zmieni\u0142oby cel tre\u015bci.<\/p>\n\n\n\n 3.3.4 Zapobieganie b\u0142\u0119dom (prawnym, finansowym, w danych) (AA)<\/strong> – Strony, na kt\u00f3rych u\u017cytkownik dokonuje transakcji finansowych, zawiera umowy prawne, modyfikuje dane lub wykonuje testy powinny mie\u0107 zapewnione mechanizmy sprawdzania, potwierdzania, poprawiania i cofania dzia\u0142a\u0144 przez u\u017cytkownika.<\/p>\n\n\n\n 4.1.1 Poprawno\u015b\u0107 kodu (A)<\/strong> – Zadbaj o poprawny semantycznie kod HTML i CSS. Sprawd\u017a czy elementy maj\u0105 znaczniki otwieraj\u0105ce i zamykaj\u0105ce, czy s\u0105 zagnie\u017cd\u017cane zgodnie ze specyfikacj\u0105 i czy nie maj\u0105 zduplikowanych atrybut\u00f3w. Przekonaj si\u0119 czy wszystkie ID s\u0105 unikalne.<\/p>\n\n\n\n 4.1.2 Nazwa, rola, warto\u015b\u0107 (A)<\/strong> – zapewnij elementom HTML odpowiedni\u0105 nazw\u0119. Je\u017celi tworzysz nowe, niestandardowe elementy interfejsu – zdefiniuj ich rol\u0119, nazw\u0119 i status.<\/p>\n\n\n\n 4.1.3 Komunikaty o stanie (AA)<\/strong> – Powiadomienia i komunikaty o stanie powinny by\u0107 oznaczone odpowiedni\u0105 rol\u0105 lub w\u0142a\u015bciwo\u015bci\u0105 za pomoc\u0105 znacznik\u00f3w ARIA. Dzi\u0119ki temu u\u017cytkownik korzystaj\u0105cy z czytnika ekranu dostanie komunikat o stanie: b\u0142\u0119dzie, sukcesie, czy post\u0119pie niezale\u017cnie od tego gdzie znajduje si\u0119 na stronie.<\/p>\n\n\n\n W tej cz\u0119\u015bci artyku\u0142u zapoznali\u015bcie si\u0119 ze skr\u00f3conym opisem wytycznych WCAG 2.1. Ze wzgl\u0119du na ilo\u015b\u0107 i szczeg\u00f3\u0142owo\u015b\u0107 zasad om\u00f3wi\u0142am jedynie wymagania dla dw\u00f3ch poziom\u00f3w zgodno\u015bci: A i AA. Pomin\u0119\u0142am kryteria sukcesu dla poziomu AAA. Po pe\u0142n\u0105 dawk\u0119 informacji zapraszam na stron\u0119 www.wcag21.lepszyweb.pl\/#toc<\/a> oraz www.w3.org\/TR\/WCAG21<\/a> (w wersji angielskiej).<\/p>\n\n\n\n Mamy nadziej\u0119, \u017ce wiedza zawarta w tym artykule b\u0119dzie dla Ciebie pomocna, a je\u015bli mia\u0142by\u015b jakie\u015b uwagi, to zapraszamy do komentowania na naszym Facebookowym fanpage\u2019u<\/a> \ud83d\ude42<\/p>\n <\/p> ![\"Logotypy](\"https:\/\/smultron.software\/content\/uploads\/2024\/02\/tekst_alternatywny_632.png\")
<\/figure>\n\n\n\n\n
![](\"https:\/\/smultron.software\/content\/uploads\/2024\/02\/marcin-stawowiak-56x56.jpeg\"\n\t\t\t\tclass=\"size-[56px])
\n\t\t\t<\/div>\n\tFunkcjonalno\u015b\u0107<\/h3>\n\n\n\n
\n
\n
Zrozumia\u0142o\u015b\u0107<\/h3>\n\n\n\n
Solidno\u015b\u0107<\/h3>\n\n\n\n
![](\"https:\/\/smultron.software\/content\/uploads\/2024\/01\/681c046dafbd67a84a6a2820a207caa9-e1706629988730-768x515.jpeg\"\n\t\t\t\twidth=\"327\"\n\t\t\t\theight=\"204\"\n\t\t\t\tclass=\"w-full)
\n\t\t\t
Porozmawiajmy o konkretach.\t\t<\/div>\n\t\t<\/ul><\/div>\n