Milline on "õige" fookuse indikaator WCAG järgi

Kas vajutasidki vä?

Sellega, mis täpsemalt on WCAG, peab igaüks end kõigepealt kurssi viima näiteks siin: https://www.w3.org/WAI/fundamentals/ või pisut vanem, aga eesti keelne versioon siin: https://www.w3.org/Translations/WCAG20-et/

Kõige üldisemalt väljendades on tegemist juurdepääsetavuse juhistega, millel neli üldpõhimõtet: tajutavus, talitlusvõime, mõistetavus ja töökindlus. Kui tahta väga head lehte teha, võiks järgida mõnd WCAG checklisti, mis kogenud kasutajakogemuse disaineril ilmselt kuskil peakolus.

Minul ei ole. Aga ma püüan.

Näiteks siin on selline lihtne kontrollnimekiri, milles WCAG nõuded kenasti reas ja nende ees linnukese paneku võimalus, nii et saad kohe igale poole linnukesed panna, ilma, et aru saad, mida sa tegid.

"Focus state" ehk fookuses olek

Siinses postituses tuleb juttu nuppude ja linkide focus state'st ehk fokusseeritud või fookuses olekust. Nuppude ja linkide olekute kohta saab lugeda täpsemalt siit. Lühidalt aga disainitakse nupud ja lingid, ehk interaktiivsed elemendid selliselt, et need annaks kasutajale enda kohta infot.

Joonis 1. Nuppude/linkide olekud

Milline on õigesti disainitud fookuses olek

Fookuses olev element peab olema selgelt eristuv ja nähtav. Selleks peaksid elemendi värvid ja raamistus olema selgelt eristuvad nii elemendi, näiteks nupp, tavaoleku värvidest kui ka külgnevatest värvidest ja samuti peab olema fookuses olekut väljendava osa pindala piisavava suurusega.

WCAG reeglite järgi, ehk testitud kasutaja vajadusi arvestav kontrast on 3:1. Niipalju peab fookuses olev värvikontrast erinema tavaolekust ja taustast. Tavaoleku ja fookuse olekut tähistava pinna või joone vahele võib omakorda vahe jätta, millel on suurem kontrast fookuse joonega.

Fookuse joone jämedus võiks olla minimaalsetl 2px või 4px kui ta asub vaid nupu lühemal küljel.

Joonis 2. Sobivate ja ebasobivate fokusseeritud olekus nuppude näited

Rusikareegel on see, et kui teha erisus nii suur, et ajab peaaegu, et oksendama, siis ongi korras. Üks ligipääsetavuse, kui ma nüüd terminiga ei eksi, sest võib olla on tegemist ka juurdepääsetavusega, osas parim disainisüsteem – https://www.gov.uk/ – on sellega super hästi hakkama saanud.

Kogu lugu, kui peenemad nüansid kõrvale jätta.

Miks siin teiste olekute kohta midagi kirjas pole?

Ma alles testin seda asja siin, ma ei tea üldse kas seegi siin alles jääb.

Kasutatud kirjandus:

WCAG 2.2 Understanding Docs. Focus Appearance (Level AAA). [2023, August 14]
https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance.html

Soueidan, S. (2021). A guide to designing accessible, WCAG-compliant focus indicators. [2023, august 14].
https://www.sarasoueidan.com/blog/focus-indicators/#what-exactly-is-a-focus-indicator%3F