Kas yra jutikliniai taikiniai?
Lietimo taikinys yra interaktyvus ekrano elementas, kurį vartotojas spusteli pele arba bakstelėja pirštu. Pavyzdžiui, visi mygtukai, nuorodos, piktogramos ar formos laukai turi liečiamus taikinius, nes galite juos spustelėti ir su jais sąveikauti.
Svarbu, kad elementai turėtų pakankamai liečiamo taikinio, kad visi vartotojai galėtų lengvai spustelėti. Kai šie taikiniai yra per maži, jie tampa didele kliūtimi naršyti, todėl atsiranda „neatitinkantys“ bakstelėjimai ir naudotojų nusivylimas. Visiems vartotojams dėl mažų jutiklinių taikinių gali būti sunku ar net neįmanoma naudotis svetaine. Projektavimas
Kam naudingi didesni jutikliniai taikiniai?
Lengvai naršoma vartotojo sąsaja naudinga visiems. Didesni liečiami taikiniai gali būti naudingi visiems, o svetainėmis bus lengva naudotis visiems vartotojams. Didesni jutikliniai taikiniai gali užtikrinti, kad svetainės būtų prieinamos visiems vartotojams. Kai kurie konkretūs naudotojai, turintys didesnį liečiamą taikinį, gali labai padėti:
- Vartotojai, turintys motorinių sutrikimų:
- Asmenims, sergantiems Parkinsono liga, cerebriniu paralyžiumi ar artritu, gali būti ribota smulkiosios motorikos kontrolė, todėl sunku tiksliai bakstelėti. Didesni liečiami taikiniai sumažins klaidų dažnį ir tikslaus bakstelėjimo poreikį. Tai savo ruožtu leis lengviau naudotis svetainėmis.
- Regėjimo sutrikimų turintys vartotojai:
- Silpnaregiams gali būti sunku pamatyti tikslias mygtuko ribas. Dėl didesnių taikinių interaktyvius elementus lengviau rasti ir suaktyvinti.
- Mobiliųjų įrenginių naudotojai:
- Mobiliųjų telefonų ekranai yra maži ir kelia unikalių iššūkių, priešingai nei svetainės. Didesni taikiniai pritaikyti sritims, kuriose nykščio paviršiaus plotas yra didesnis nei skaitmeninio elemento.
- Situacinės negalios:
- Prieinamumas ne visada susijęs su nuolatinėmis sąlygomis. Pagalvokite apie galimybę naudotis telefonu mūvėdami pirštines ar važiuodami nelygiu autobusu. Didesni jutikliniai taikiniai užtikrins, kad visi vartotojai galėtų lengviau spustelėti ir sąveikauti su elementais.
WCAG standartas jutikliniams taikiniams
Norėdami užtikrinti, kad jūsų sąsaja tikrai pasiekiama, turėtumėte sukurti ir įdiegti jutiklinius taikinius pagal WCAG, žiniatinklio turinio prieinamumo gairių, nustatytus kriterijus. WCAG yra pasaulinis skaitmeninės įtraukties etalonas.
- AA lygis:
- Liečiami objektai turi būti bent 24 x 24 CSS pikselių arba tarp taikinių turi būti bent 24 pikseliai.
- AAA lygis:
- Bent 44×44 CSS pikseliai. Aukštesni standartai suteikia dar patogesnę ir atlaidesnę sąveiką.
HTML / CSS pavyzdys
Toliau pateikiamas pavyzdys, kaip užtikrinti, kad piktograma būtų su pakankamai jutikliniu objektu. Nors piktograma yra maža, pats mygtukas atitinka jutiklinio tikslo dydžio reikalavimus. Sukūrėme naują stilių, vadinamą ikonų stiliumi, ir nurodėme minimalų plotį ir aukštį. Naudojome šį savo piktogramos stilių, kad užtikrintume, jog piktogramai būtų pritaikyta pakankamai jutiklinių taikinių.
HTML:
<button class="icon-style">
<img src="https://www.sitepoint.com/touch-targets-and-web-accessibility/like.svg" alt="Like">
</button>CSS:
.icon-style {
width: 48px;
height: 48px;
padding: 12px;
background: none;
border: none;
}Išvada
Svarbu, kad elementai turėtų pakankamai liečiamo taikinio, kad visi vartotojai galėtų lengvai spustelėti. Kai šie taikiniai yra per maži, jie tampa didele navigacijos kliūtimi. Visiems vartotojams dėl mažų jutiklinių taikinių gali būti sunku ar net neįmanoma naudotis svetaine.
Prieinamumas yra daugiau nei tik klaidų išvengimas; tai apie įtraukimą. Kuriant pritaikymą neįgaliesiems sukuriami geresni produktai visiems.
