Tutorijali
Tutorijali: popravljanje WCAG pogrešaka
Konkretni vodiči korak po korak za razvojne inženjere, s pravim kodom prije/poslije. Svaki tutorijal pokazuje tipičnu pogrešku, čist popravak i WCAG kriterij iza njega.
Pretražuje naslove, sažetke, WCAG kriterije i uobičajene opise problema. Više riječi dodatno sužava.
Tipkovnica i fokus
Kako modal učiniti pristupačnim
Upravljanje fokusom, tipka Escape, uloga i naziv: četiri stvari koje pristupačan modal treba, u nekoliko redaka s nativnim <dialog> elementom.
Kriteriji: 4.1.2, 2.1.2, 2.4.3, 2.1.1
1 min čitanja
Pročitaj tutorijalKako izraditi vidljiv indikator fokusa
outline: none čini tvoju stranicu neupotrebljivom za korisnike tipkovnice. Evo kako ga zamijeniti vidljivim prstenom fokusa jakog kontrasta pomoću :focus-visible.
Kriteriji: 2.4.7, 1.4.11, 2.4.11
1 min čitanja
Pročitaj tutorijalPronalaženje i uklanjanje zamke tipkovnice
Zamka tipkovnice prekida posjet: sve nakon nje je nedostupno. Evo kako je pronaći u dvije minute i uredno ukloniti.
Kriteriji: 2.1.2, 2.1.1, 2.4.3
1 min čitanja
Pročitaj tutorijal
Obrasci
Kako ispravno označiti polja obrasca
Rezervirani tekst (placeholder) nije labela. Evo kako svako polje povezati s pravom labelom te pristupačno označiti obavezna polja i napomene.
Kriteriji: 1.3.1, 3.3.2, 4.1.2, 2.5.3
1 min čitanja
Pročitaj tutorijalKako pogreške u obrascu učiniti pristupačnima
Crveni okvir nije poruka o pogrešci. Evo kako se pogreška imenuje, povezuje, najavljuje i objašnjava.
Kriteriji: 3.3.1, 3.3.3, 4.1.3
1 min čitanja
Pročitaj tutorijal
Prikaz i kontrast
Kako popraviti preslab kontrast boja
4.5:1 za normalan tekst, 3:1 za velik tekst i elemente sučelja: WCAG pragovi, kako ih mjeriti i postići s nekoliko CSS izmjena.
Kriteriji: 1.4.3, 1.4.11, 1.4.1
1 min čitanja
Pročitaj tutorijalReflow: nijedna stranica ne smije se pomicati u dva smjera
Na širini od 320 CSS piksela sadržaj se mora prelamati umjesto bježati postrance. Uzroci su gotovo uvijek ista tri.
Kriteriji: 1.4.10, 1.4.4, 1.4.12
1 min čitanja
Pročitaj tutorijal
Semantika i čitači zaslona
Kako napisati dobar alt-tekst
Odluka je važnija od sintakse: nosi li slika informaciju, je li kontrola ili je ukras? Iz toga slijedi alt-tekst.
Kriteriji: 1.1.1
1 min čitanja
Pročitaj tutorijalPristupačan naziv: ispravna upotreba aria-labela
Svaka kontrola treba naziv koji asistivna tehnologija može najaviti. Evo kako nastaje i kako ga slučajno ne uništiti.
Kriteriji: 4.1.2, 2.5.3, 1.3.1
1 min čitanja
Pročitaj tutorijal