Mis on selected või checked state?

Selles varasemas postituses kirjutasin ma pisut WCAG nõuetest ja HTML-elementide erinevatest olekutest (states). Need on konkreetsed HTML-is määratletud asjad.

HTML elementidel on kindlad olekud – kasutaja käitumise (?) pseudoklassid

Ehk User action pseudo-classes

Nii on nuppudel/sisestusväljadel vaikim

Joonis 1. Nuppude olekud

Lisaks aga on veel sisendid checkbox ja radio, millistel on väärtused “checked”: <input type="radio" checked> või <input type="checkbox" checked>. Need ei ole küll päris samad asjad kuid võivad, sõltuvalt kuidas disainida, samas teemas mängu tulla. Näiteks kui kujundada radio või checkbox nupuks, siis võib tekkida ka vajadus UI-kitti tekitada ka checked state või ka kui brauseri vaikimisi radio või checkbox asemel kujundada oma, ka sel juhul tulevad mängu default, hover, acrive, focus, disabled ja lisaks checked.

Selected state?

Omakorda on veel mängu tulnud selline olek nagu selekteeritud. Mina ei saanud alul pihta, kus või mis see on. Pärast kolleegidele küsimuse delegeerimist (vastamise siiski) kujunes veidi selgem pilt. Ühesõnaga (ja järgneb traditsiooniline sõnade hunnik) tegemist on sellise asja kaasnähtusega nagu seda on button groups, segmented buttons, content switcher või segmented control, mis kõik on samad asjad ja lahendatud moel, et on hulk nuppe kõrvuti ja kasutaja saab valida/selkteerida/sisse lülitada reast ühe või ka mitu. Kuna tegemist on tavaliselt visuaalselt samasuguse asjaga nagu nupp, siis tekibki siin nö uus olek ehk state.

Joonis 2. Carbon design system content switcher

Aga tehniliselt on see jama.

Või noh, kuidas võtta jama. Pigem nagu teine loogika või teisel moel "sisselülitatav". Vaatasin, et tehniliselt lahendatakse selline “nupp” kahel moel – kas <button> elemendiga, millele lisatakse nupul vajutades javascriptiga aria-selected="true" või disainitakse radio või checkbox väljanägemiselt nupuks ning kasutatakse eelpoolmainitud „checked“ väärtust. Ehk, et tehniliselt on tegemist teistlaadi asjaga kui seda on tavalised interaktiivse elemendi olekud.

Seega kokkuvõtteks kui disainerite vahel tulevad jutuks elemendi olekud, siis minusuguste lollide puhul peaks arvestama, et nuppude olekud checked või selected on kahtlased. Võibolla lahendan ma nad siiski teisiti kui koos tavapäraste olekutega.

Hardi pööras tähelepanu, et Adobe Spectrum disainisüsteemis on asja kohta täitsa eeskujulik legend (y). See on muidugi üks asja point – hea juhend/selgitus.

Siit lisaks lugemist, kuidas checkbox’e ja raadioid kasutada.

Siin on üks mulle sümpaatne artikkel, mille sissejuhatuse Janno siiski hukka mõistis.