Pristupačnost · Izrada
Popravke pristupačnosti, zaštićene provjerama u buildu
Popravljamo imena, fokus i semantiku u Reactu i React Nativeu i dodajemo provjere u build. Naš pregled našao je u 9 od 75 komponenti labele koje čitač ekrana preskače.
AngažmanPo satu · remote
Radno vrijeme9–18 CET · 4 h preklapanja
StackReact · React Native · TypeScript
Dokaz0 projekata
Usluga u 4 dijela
01 · Za koga je
Tim s bibliotekom komponenti ili proizvodom na čijoj se pristupačnosti nekad radilo, a sada niko ne zna da li sve još uvijek radi kako treba.
02 · Šta smo napravili
- Pregledali smo svih 75 komponenti koje je naš dizajn sistem tada imao. Devet ih je imalo labelu koju nijedan čitač ekrana ne bi izgovorio, jer je stajala na čvoru bez uloge. Sada pravilo u buildu odbija labelu bez uloge.Tekst →
- Našu marketing stranicu napravili smo iznova u istom sistemu i provjerili je u headless browseru: 29 linkova s ispravnim pristupačnim imenima i uredna hijerarhija naslova.Tekst →
- Na toj stranici dekorativna tačka na kraju naslova čitala se kao dio pristupačnog imena naslova. Otkrili smo je tek kad smo izmjerili kako ime stvarno glasi.Tekst →
Sva tri primjera su iz našeg dizajn sistema, a ne iz pregleda rađenog za klijenta. Pokrivenost aria-label i tabindex atributa u tom sistemu još nije potpuna.
03 · Kako radimo
01 · PRAVILA I RUČNE PROVJERENijedan alat nije prijavio devet labela u našem dizajn sistemu koje čitači ekrana nikad nisu izgovorili. Problem je pronašao pregled koda, a tek onda smo napisali pravilo u buildu koje ga hvata. Vaš kod pregledamo na isti način: prvo ga čitamo, a zatim dodajemo pravilo za sve što mašina može provjeriti.
02 · OBJE PLATFORMENa webu labela radi samo na elementu koji ima ulogu. U React Nativeu labela se čita samo ako element ima prop accessible. Svaka platforma ima svoju provjeru.
04 · Stack
ReactReact NativeTypeScriptARIAvlastita pravila provjereESLint
Dokaz
Gdje smo ovo već radili
BlogTri vrste grešaka u dizajn sistemu koje TypeScript i ESLint propustePregledali smo svih 75 komponenti koje je naš dizajn sistem tada imao. Devet ih je imalo labelu koju nijedan čitač ekrana ne bi izgovorio, jer je stajala na čvoru bez uloge. Sada pravilo u buildu odbija labelu bez uloge.Pročitajte tekst →BlogTestiranje dizajn sistema na pravoj stranici: 7 komponenti i 8 nedostatakaNašu marketing stranicu napravili smo iznova u istom sistemu i provjerili je u headless browseru: 29 linkova s ispravnim pristupačnim imenima i uredna hijerarhija naslova.Pročitajte tekst →
Česta pitanja
Pitanja o ovoj usluzi
Ne. Popravljamo imena, uloge, fokus i semantiku u kodu i dodajemo provjere da tako i ostane. Certifikate o usklađenosti ne izdajemo.
Zato što je kod validan. Atribut aria-label na golom divu ispravno je napisan i ima ispravan tip, pa ga TypeScript i ESLint prihvataju, a ARIA specifikacija kaže da se ignoriše.
Može. U vašoj biblioteci tražimo komponentu koja to već radi ispravno, a zatim mjesta koja krše isti obrazac. U našem dizajn sistemu Icon je labelu uvijek uparivao s ulogom, pa je obična pretraga koda pronašla svih devet pokvarenih komponenti.
Sljedeći korak
Opišite problem i javit ćemo vam se s tri opcije.
Prvi poziv traje 30 minuta i ni na šta vas ne obavezuje.