Egzistuoja daug gandų ir klaidingų nuomonių apie WCAG kriterijų, skirtų minimaliam interaktyvių elementų dydžiui, atitikimą. Norėtume šiuo įrašu išsklaidyti miglą apie tai, ko reikia baziniam atitikimui, ir pasiūlyti metodą, kaip sukurti sėkmingas ir įtraukias interaktyvias patirtis naudojant pakankamai didelius taikinių dydžius.
Minimalus reikalavimus atitinkantis pikselių dydis
Pereikime tiesiai prie esmės: kalbant apie gryną Interneto turinio prieinamumo gairių (WCAG) atitikimą, minimalus pikselių dydis interaktyviam, ne įterptiniam (angl. non-inline) elementui yra 24×24 pikseliai. Tai nurodyta Sėkmės kriterijuje 2.5.8: Taikinio dydis (minimalus).
Sėkmės kriterijus 2.5.8 yra AA lygio, kuris yra dažniausiai naudojamas lygis viešoms, masinio vartojimo svetainėms. Šis Sėkmės kriterijus (arba trumpai SK) kartais painiojamas su SK 2.5.5 Taikinio dydis (patobulintas), kuris yra AAA lygio. Šie du kriterijai yra skirtingi ir teikia atskiras gaires tinkamam interaktyvių elementų dydžiui nustatyti, net jei iš pirmo žvilgsnio atrodo panašūs.
SK 2.5.8 yra palyginti naujas WCAG priedas, išleistas kaip WCAG 2.2 versijos dalis, kuri buvo paskelbta 2023 m. spalio 5 d. WCAG 2.2 yra naujausia standarto versija, tačiau ši naujesnė išleidimo data reiškia, kad žinios apie jo egzistavimą nėra taip plačiai paplitusios kaip apie senesnius SK, ypač už interneto prieinamumo specialistų ratų ribų. Vis dėlto, WCAG 2.2 išliks standartu, kol bus išleistas WCAG 3.0, o tai tikėtina užtruks 10–15 metų ar ilgiau.
SK 2.5.5 reikalauja didesnių interaktyvių elementų dydžių, kurie būtų bent 44×44 pikseliai (palyginti su SK 2.5.8 reikalavimu – 24×24 pikseliai). Tuo pačiu metu atkreipkite dėmesį, kad SK 2.5.5 yra AAA lygio (palyginti su SK 2.5.8, kuris yra AA lygio), o šis lygis skirtas specializuotam palaikymui, viršijančiam AA lygį.
Svetainės, kurios turi visiškai atitikti WCAG AAA lygį, yra retos. Tikėtina, kad jei kuriate svetainę ar internetinę programėlę, jums reikės palaikyti tik AA lygį. AAA lygis dažnai skirtas didelėms arba labai specializuotoms institucijoms.
Interaktyvių elementų didinimas naudojant CSS atitraukimą (padding)
CSS su padding susijusių savybių šeima gali būti naudojama išplėsti interaktyvią elemento sritį, kad jis atitiktų reikalavimus. Pavyzdžiui, deklaravus padding: 4px; elementui, kurio matmenys yra 16×16 pikselių, jo ribinė dėžutė (angl. bounding box) nematomai padidėja iki 24×24 pikselių. Tai savo ruožtu reiškia, kad interaktyvus elementas atitinka SK 2.5.8.
Tai geras triukas, kaip padaryti mažesnius interaktyvius elementus lengviau paspaudžiamus. Jei norite daugiau informacijos apie tai, entuziastingai rekomenduojame Ahmad Shadeed įrašą „Geresnių taikinių dydžių projektavimas“.
Manome, kad taip pat verta paminėti, jog CSS margin hipotetiškai taip pat galėtų būti naudojamas AA lygio atitikimui pasiekti, nes SK apima tarpo išimtį:
Taikinio, skirto rodyklės įvestims, dydis yra bent 24×24 CSS pikseliai, išskyrus atvejus, kai:
Tarpas: Per maži taikiniai (mažesni nei 24×24 CSS pikseliai) yra išdėstyti taip, kad jei 24 CSS pikselių skersmens apskritimas būtų centruotas ant kiekvieno iš jų ribinės dėžutės, apskritimai nesikirstų su kitu taikiniu ar kito per mažo taikinio apskritimu;
[…]
Skirtumas čia yra tas, kad padding išplečia interaktyvią sritį, o margin – ne. Žvelgiant iš šios perspektyvos, norėtumėte gerbti sėkmės kriterijaus dvasią, nes dalinis atitikimas yra priešiškas atitikimas. Galų gale, norime padėti žmonėms sėkmingai paspausti interaktyvius elementus, tokius kaip mygtukai.
O kaip dėl įterptinių interaktyvių elementų?
Mes linkę galvoti apie taikinius kaip apie bloko elementus – elementus, kurie rodomi savo eilutėje, pavyzdžiui, mygtukas raginimo veikti pabaigoje. Tačiau interaktyvūs elementai gali būti ir įterptiniai. Pagalvokite apie nuorodas teksto pastraipoje.
Įterptiniams interaktyviems elementams, tokiems kaip tekstinės nuorodos pastraipose, nereikia atitikti 24×24 pikselių minimalaus reikalavimo. Kaip ir margin yra išimtis SK 2.5.8: Taikinio dydis (minimalus), taip pat yra ir įterptiniai elementai su interaktyviu taikiniu:
Taikinio, skirto rodyklės įvestims, dydis yra bent 24×24 CSS pikseliai, išskyrus atvejus, kai:
[…]
Įterptinis: Taikinys yra sakinyje arba jo dydis kitaip apribotas ne taikinio teksto eilutės aukščiu;
[…]
„Apple“ ir „Android“: dar daugiau painiavos šaltinis
Jei skirtumai tarp įterptinių ir bloko interaktyvių elementų vis dar painūs, tikriausiai taip yra todėl, kad visą situaciją dar labiau sujaukia trečiųjų šalių žmogaus sąsajos gairės, reikalaujančios interaktyvių dydžių, artimesnių tam, ko reikalauja AAA lygio Sėkmės kriterijus 2.5.5 Taikinio dydis (patobulintas).
Pavyzdžiui, „Apple“ „Žmogaus sąsajos gairės“ ir „Google“ „Material Design“ yra gairės, kaip kurti sąsajas jų atitinkamoms platformoms. „Apple“ gairės rekomenduoja, kad interaktyvūs elementai būtų 44×44 taškų, o „Google“ gairės nustato taikinių dydžius, kurie yra bent 48×48 naudojant nuo tankio nepriklausomus pikselius.
Tai gali atitikti „Apple“ ir „Google“ reikalavimus sąsajų projektavimui, bet ar tai atitinka WCAG? „Apple“ ir „Google“ – jau nekalbant apie bet kurią kitą organizaciją su vartotojo sąsajos gairėmis – gali nurodyti bet kokius sąsajos reikalavimus, kokių tik nori, bet ar jie suderinami su WCAG SK 2.5.5 ir SK 2.5.8?
Svarbu užduoti šį klausimą, nes prieinamumo atitikties srityje egzistuoja hierarchija, kuri apima teisinius lygius:
Žmogaus sąsajos gairės dažnai informuoja dizaino sistemas, kurios savo ruožtu daro įtaką svetainėms ir programėlėms, kurias kuria tokie autoriai kaip mes. Bet jos nėra „autoritetas“ prieinamumo atitikties klausimu. Atkreipkite dėmesį, kaip viskas yra (ir turėtų būti) veikiama WCAG, esančio pačioje grandinės viršūnėje.
Net jei šios trečiųjų šalių sąsajos gairės atitinka SK 2.5.5 ir 2.5.8, vis tiek sunku pasakyti, kai jos išreiškiamos „taškais“ ir „nuo tankio nepriklausomais pikseliais“, kurie nėra pikseliai, bet dažnai su jais painiojami. Patartume per daug nesigilinti į tyrimus, kas iš tikrųjų yra pikselis. Patikėkite mumis, kai sakome, kad tai kelias, kuriuo nenorite eiti. Bet kokiu atveju, nenuoseklus vienetų dydžių naudojimas paaštrina problemą.
Ar negalime tiesiog panaudoti medijos užklausos?
Taip pat pastebėjome, kad kai kurie programuotojai bando naudoti pointer medijos savybę kaip protingą „triuką“, siekdami aptikti, kada yra jutiklinis ekranas, ir tada sąlygiškai koreguoti interaktyvaus elemento dydį, kad apeitų WCAG reikalavimą.
Juk pelės žymekliai skirti smulkiems judesiams, o jutikliniai ekranai – platesniems gestams, tiesa? Ne visada. Esmė ta, kad įrenginiai yra daugiarūšiai (multimodiniai). Jie gali palaikyti daug skirtingų įvesties tipų ir nereikalauja specialaus jungiklio ar mygtuko, kad tai padarytų. Paprastas pavyzdys – perjungimas tarp jutiklinio kilimėlio ir klaviatūros naršant internete. Mažiau apsvarstytas pavyzdys yra įrenginys su jutikliniu ekranu, kuris taip pat palaiko jutiklinį kilimėlį, klaviatūrą, pelę ir balso įvestį.
Galite pagalvoti, kad jutiklinio kilimėlio, klaviatūros, pelės ir balso įvesčių derinys skamba kaip koks absurdiškas, neaiškus Frankeno kompiuteris, bet tai, ką ką tik aprašėme, yra „Microsoft Surface“ nešiojamasis kompiuteris, ir žinote ką? Jie gana populiarūs.
Prisitaikantis dizainas vs. įtraukus dizainas
Tarp šių dviejų sąvokų yra skirtumas, nors jos dažnai vartojamos kaip sinonimai. Apibrėžkime jas kuo aiškiau:
- Prisitaikantis dizainas (angl. Responsive Design) yra projektavimas nežinomam įrenginiui.
- Įtraukus dizainas (angl. Inclusive Design) yra projektavimas nežinomam vartotojui.
Kitas šio svarstymo aspektas yra tas, kad žmonės su motorikos sutrikimais – pavyzdžiui, rankų drebuliu ar artritu – gali naudoti ir naudoja pelės įvestis. Tai reiškia, kad smulkūs įvesties veiksmai gali būti skausmingi ir sudėtingi, tačiau galiausiai vis tiek įmanomi.
Žmonės taip pat nuolat naudoja tikslesnius įvesties mechanizmus jutikliniams ekranams, įskaitant tiek oficialius priedus, tiek trečiųjų šalių įrenginius. Kitaip tariant, kai kurie įrenginiai, sukurti pritaikyti grubiai įvesčiai, taip pat gali būti naudojami smulkių detalių darbui.
Būtų neapdairu nepaminėti, kad žmonės jungia peles ir klaviatūras prie išmaniųjų telefonų. Negalime automatiškai teigti, kad jie palaiko tik grubius žymeklius:
Mūsų mintis ta, kad režimu pagrįstas požiūris į įtraukų dizainą yra spąstai. Tai netgi ne apie peržiūros ir paspaudimo asimetriją. Kuriant visiškai alternatyvias patirtis, pagrįstas numanomu įvesties režimu, sustiprinamas bjaurus „mes prieš juos“ mąstymas. Taip pat daug daugiau darbo reikia jį sukurti, palaikyti ir apmokyti kitus.
Geriau proaktyviai prisitaikyti prie nežinomo skaičiaus nežinomų žmonių, naudojančių nežinomą įrenginių rinkinį nežinomais būdais, pagal nutylėjimą suteikiant įtraukią patirtį. Tai darydami gauname daugybę privalumų:
- Labiau proaktyviai prisitaikoma,
- Mažiau pastangų kuriant,
- Mažiau pastangų palaikant,
- Mažiau duomenų parsisiuntimui, ir
- Mažesnė atitikties rizika.
Galų gale, tas paspaudimas gali būti atliktas liežuviu, o tas paspaudimo įvykis gali būti kas nors, pakeliantis antakius.
WCAG yra grindys, o ne lubos
WCAG reikalavimus atitinkantis 24×24 minimalus pikselių dydis interaktyviems elementams yra mūsų pramonės geriausias supratimas, kas gali patenkinti daugumą prieigos poreikių, pasiskirsčiusių po visą pasaulio populiaciją, kuri pasiekia nežinomą kiekį turinio, susijusio su nežinomomis temomis, nežinomais būdais ir nežinomomis aplinkybėmis.
Svarbiausias žodis ankstesniame sakinyje yra minimalus. Gairės – ir jose nurodytas pikselių dydis – tikriausiai yra kompromisas tarp:
- Sukurti kažką, kas yra pakankamai funkcionalu, ir tuo pačiu
- Išvengti standarto, kurį būtų neįmanoma plačiai pasiekti (iš čia ir SK 2.5.5 AAA lygio reitingas).
Net pats SK pripažįsta šį galimą apribojimą:
„Šis sėkmės kriterijus apibrėžia minimalų dydį ir, jei jo negalima pasiekti, minimalų tarpą. Vis dar įmanoma turėti labai mažus ir sunkiai aktyvuojamus taikinius ir atitikti šio sėkmės kriterijaus reikalavimus.“
Siekti didesnių interaktyvių sričių gali būti geras dalykas. Tai reiškia, kad minimalus maždaug 40 pikselių dydis gali būti naudingas asmenims, kuriems sunku naudotis mažesniu, bet vis tiek WCAG reikalavimus atitinkančiu dydžiu.
Interaktyvios srities dydžio nustatymas – tiek menas, tiek mokslas
Taip pat turėtume būti atsargūs ir nepersistengti, visur įdėdami gigantiškus interaktyvius elementus. Jei interaktyvi sritis yra per didelė, kyla rizika, kad ji bus aktyvuota netyčia. Svarbu tai pažymėti, kai interaktyvus elementas yra arti kitų interaktyvių elementų, ir dar svarbiau atsižvelgti, kai tų elementų aktyvavimas gali sukelti negrįžtamų pasekmių.
Taip pat egzistuoja reiškinys, kai elementai, jei yra pakankamai dideli, nėra interpretuojami ar atpažįstami kaip interaktyvūs. Dėl to vartotojai gali juos netyčia praleisti, nepaisant didelio dydžio.
Kontekstas yra svarbiausia
Reikalavimus atitinkančios ir sėkmingos interaktyvios sritys – tiek didelės, tiek mažos – reikalauja žinoti galutinius jūsų svetainės ar internetinės programėlės tikslus. Apsiginklavę šiuo kontekstu, esate įgalinti priimti pagrįstus sprendimus apie tai, kokie žmonės naudoja jūsų paslaugą, kodėl jie ją naudoja ir kaip galite jiems prisitaikyti.
Pavyzdžiui, „Glow Baby“ programėlė naudoja didesnius interaktyvius elementus, nes žino, kad vartotojas tikriausiai laiko mielą, nors ir neramų bei irzlų, kūdikį, naudodamasis programa. Tai leidžia „Glow Baby“ pabrėžti interaktyvius taikinius sąsajoje, kad prisitaikytų prie tėvų, kurių rankos užimtos.
Tuo pačiu, SK 2.5.8 pripažįsta, kad mažesni lietimo taikiniai – pavyzdžiui, naudojami žemėlapių programėlėse – gali būti kontekstualiai išimtis:
Pavyzdžiui, skaitmeniniuose žemėlapiuose smeigtukų padėtis yra analogiška žemėlapyje rodomų vietų padėčiai. Jei yra daug smeigtukų arti vienas kito, tarpas tarp smeigtukų ir kaimyninių smeigtukų dažnai bus mažesnis nei 24 CSS pikseliai. Būtina parodyti smeigtukus teisingoje žemėlapio vietoje; todėl taikoma „Būtinumo“ išimtis.
[…]
Kai taikoma „Būtinumo“ išimtis, autoriai yra primygtinai skatinami, kiek tai praktiška, suteikti lygiavertį funkcionalumą alternatyviomis priemonėmis.
Atkreipkite dėmesį, kad ši išimties formuluotė nėra leidimas savo nuožiūra taikyti išimtį savo darbui. Tai labiau mechanizmas ir pripažinimas, kad plačiai taikomos taisyklės gali turėti išimčių, kurias verta apgalvoti ir dokumentuoti ateičiai.
Tolesni svarstymai
Taip pat norime atsižvelgti į platesnį paties įrenginio kontekstą bei aplinką, kurioje įrenginys bus naudojamas.
Didesni, labiau fiksuotos padėties jutikliniai ekranai reikalauja didesnių interaktyvių sričių. Mažesniems įrenginiams, kurie daug judinami erdvėje (pvz., išmanieji laikrodžiai), gali būti naudingi alternatyvūs įvesties mechanizmai, pavyzdžiui, balso komandos.
O kaip dėl žmonių, vairuojančių automobilį? Žmonėms šiame kontekste tikriausiai turėtų būti suteiktos paprastos, tiesmukos sąveikos, kurias palengvintų didelės interaktyvios sritys, kad jie neatitrauktų akių nuo kelio. Tą patį galima pasakyti ir apie didelės įtampos aplinkas, tokias kaip ligoninės ir naftos platformos.
Panašiai, įrenginiams ir programėlėms, skirtoms vaikams, gali prireikti didesnių interaktyvių sričių, nei reikalauja WCAG. Taip pat ir patirtims, skirtoms vyresnio amžiaus demografinėms grupėms, kur amžiaus sąlygoti regėjimo ir motorikos sutrikimų veiksniai yra dažnesni.
Minimalaus reikalavimus atitinkančio interaktyvios srities dydžio patirtys taip pat gali būti prasmingos savo kontekste. Čia į galvą ateina daug duomenų turinčios, informatyvios patirtys, tokios kaip „Bloomberg“ terminalas.
Verta paminėti ir dizaino sistemas
Nors galite kontroliuoti, kokius komponentus įtraukiate į dizaino sistemą, negalite kontroliuoti, kur ir kaip juos naudos tie, kurie priims ir naudos tą dizaino sistemą. Dėl šios priežasties siūlome apsidraudžiant integruoti prieinamus numatytuosius nustatymus į savo dizaino sistemas, nes jie gali labai prisidėti prie prieinamumo praktikų įdiegimo, kai yra integruojami iš karto.
Viena verta apsvarstyti galimybė – suteikti prieinamą pasirinkimų spektrą. Komponentai, tokie kaip mygtukai, gali turėti dydžio variantų (pvz., mažas, vidutinis ir didelis), ir jūs galite suteikti minimaliai reikalavimus atitinkantį interaktyvų taikinį mažiausiame variante, o tada pasiūlyti didesnes, taip pat reikalavimus atitinkančias versijas.
Taigi, kaip žinoti, kada viskas gerai?
Nėra stebuklingo skaičiaus ar formulės, kuri padėtų jums pasiekti tą tobulą „ne per mažą, ne per didelį, o kaip tik tinkamą“ interaktyvios srities dydį. Tam reikia žinių apie tai, ko nori žmonės, norintys naudotis jūsų paslauga, ir kaip jie tai daro.
Geriausias būdas tai sužinoti? Paklauskite žmonių.
Prieinamumo tyrimai apima daugiau nei tik klausimą žmonių, naudojančių ekrano skaitytuvus, ką jie mano. Juos atlikti taip pat yra daug lengviau, nei galite pagalvoti! Pavyzdžiui, prototipai yra puikus būdas greitai ir nebrangiai įvertinti ir sumažinti savo idėjų riziką, prieš įsipareigojant rašyti gamybinį kodą. Dr. Michele A. Williams darbas „Prieinamumo tyrimų atlikimas neprieinamoje ekosistemoje“ yra pilnas patarimų, strategijų ir išteklių, kuriuos galite naudoti, kad pradėtumėte prieinamumo tyrimus.
Apibendrinimas
Esmė ta, kad
„Atitinkantis reikalavimus“ ne visada reiškia „patogus naudoti“. Bet atitiktis padeda nustatyti bazinius reikalavimus, kurie naudingi visiems.
Apibendrinant:
- 24×24 pikseliai yra absoliutus minimumas WCAG atitikties požiūriu.
- Įterptiniams interaktyviems elementams, pavyzdžiui, nuorodoms pastraipose, taikoma išimtis.
- 44×44 pikseliai yra skirti WCAG AAA lygio palaikymui, o AAA lygis skirtas specializuotoms patirtims.
- Žmogaus sąsajos gairės, kurias teikia tokios įmonės kaip „Apple“, „Android“ ir kitos, galiausiai turi atitikti WCAG.
- Įrenginiai yra daugiarūšiai ir gali vienu metu naudoti skirtingų tipų įvestis.
- Protingų prieinamų numatytųjų nustatymų integravimas į dizaino sistemas gali labai prisidėti prie plataus atitikimo užtikrinimo.
- Didesni interaktyvių elementų dydžiai daugeliu situacijų gali būti naudingi, tačiau gali būti neatpažinti kaip interaktyvūs, jei yra per dideli.
- Vartotojų tyrimai gali padėti jums sužinoti apie savo auditoriją.
Ir, galbūt svarbiausia, visa tai yra apie žmones ir galimybę jiems gauti tai, ko jiems reikia.
