UI ligipääsetavus

TEDI UI/UX nõuetes on iga komponendi juures kirjeldatud selle komponendi kasutamisega seotud ligipääsetavuse tagamise maatriks. Maatriksis on välja toodud, mida peab kontrollima komponendi "tootja" ja mida kasutusele võtja. Ühtlasi on märgitud, kas üht või teist ligipääsetavuse nõuet peab kontrollima/tagama disainer või arendaja.

Näiteks lehel https://www.tedi.ee/1ee8444b7/p/10984a-button/b/861cb2 on näidatud nupu ligipääsetavuse tagamise vastutusvaldkonnad. "X" näitab, kas selle teema eest vastutab TEDI meeskond või kasutusele võtja meeskond. Rea lõpus on näha, kas see on disaineri või arendaja vastutus.

Kõikide komponentide staatuse juures on ka ligipääsetavuse kontrollitulemuste tabel: https://www.tedi.ee/1ee8444b7/p/300e17-komponentide-staatused  

Komponentide ligipääsetavuse paranduste info on toodud ka release notes-ides: https://www.tedi.ee/1ee8444b7/p/0316fd-release-notes 

Kindlasti tuleb arvestada disaini, komponentide ja ärireeglite kohta käivat lisainfot arendustööde lähteülesannetes.

vt ka ligipääsetavuse suuniseid: https://accessibility.twn.ee/ 

WCAG 1.4.1

Erinevaid olekuid eristatakse ainult värvi järgi. Näiteks õnnestunud või ebaõnnestunud olukud on roheline ja punane ring. Enamikel juhtudel ei ole ka nende kahe oleku vahel 3:1 kontrasti, mis neid eristaks.

See eksimus puudutab enim värvipimedaid ja muid vaegnägijaid, kuna neile võivad olekud tunduda lihtsalt täpselt samasugused.

Parim lahendus on lisada juurde olekute tekstid, mis neid selgitaks, kuid alati ei ole see võimalik. Muu lahendus on kahe oleku kontrast viia minimaalselt 3:1 suhtele või eristada olekuid lisaks veel kuju või mõne lisaelemendi või tekstistiili abil.

WCAG 1.4.3 ja 1.4.11

Peaaegu igal pool ekisteerib endiselt probleeme värvikontrastiga.

• Tekstide kontrast peab olema 4.5:1 või suure teksti puhul 3:1.

• Mittetekstiliste elementide kontrast peab olema 3:1.

On ka erandeid, näiteks dekoratiivsed elemendid või disabled komponendid ei pea järgima kontrastinõudeid.

WCAG 2.5.8

Tekstiala minimaalne vajutusala peab olema vähemalt 24x24 pikslit. Erandiks on tekstialad

• millel on sobiv vahekaugus muude interaktiivsete elementidega;

• millel on sama funktsionaalsusega komponent juba lehel olemas, mis vastab kriteeriumile;

• mille suurust ise muuta ei saa;

• mille suurus on antud teabe esitamiseks hädavalik.

On olnud palju komponente, mis ei ole vastanud antud nõudele. Enamasti võib see juhtuda checkboxide, infonuppude, sulgemisnuppude ja muude väiksemate ikoonnuppude korral.

Kui vajutusala on kasutaja jaoks liiga pisike, siis ta ei saa tegevusega lõpuni minna ja võib sellest lihtsalt loobuda.

Üks lahendus ongi teha komponent suuremaks ka visuaalselt, kuid on võimalik ka teha vajutusala nii suuremaks, et visuaalselt ei pane seda tähele. Näiteks labeliga checkboxi vajutusalaks on tihti seda ja selle labelit piirav ristkülik.

Android soovitab isegi suurust 48dp x 48dp ja Apple 44pt x 44pt.

WCAG 3.3.2 ja 3.3.3

On ette tulnud, et sisendväljal tuleb mingisugune viga ja siis veakirjeldusest ei saa ka aru, mis täpsemalt valesti läks. Segaduse vältimiseks tuleb lisada sisendväljale korralik label ja kui sisend peab olema mingis spetsiifilises formaadis ka, siis sellele vastavalt juhised. Veakirjeldusse võiks teada anda, mille osas täpsemalt eksiti, juhul, kui see kuidagi turvalisust ei ohusta.

Enim eksitakse kriteeriumitega 1.3.1 ja 4.1.2, kuid enamasti on eksimused spetsiifilisemad vead, mida on raske üldistada.

Ekraanilugerite osas peab ka vahepeal kriitiline olema, kuna on olnud olukordi, kus kood tundub korrektne, kuid võib olla on komponent kuidagi nii nestitud, et ekraaniluger ei loe seda päris korrekselt.