Jokaisella interaktiivisella elementillä tulisi olla visuaalisia vihjeitä auttamaan kävijää ymmärtämään minkä elementtien kanssa he voivat toimia. Tämä tarkoittaa myös, että näillä elementeillä tulisi olla osoitus- (hover) ja kohdistustyylit (focus). Jos työskentelet yhdessä suunnittelijan kanssa, nämä kuuluvat hänen työhönsä.
Pyri käyttämään skaalautuvia yksiköitä teksteissä. Tällä tavoin tekstit suurenevat zoomatessa. Nykyään usein suositellaan käyttämään skaalautuvia elementtejä joka paikassa, mutta huomaa, että välillä pikselit toimivat paremmin, esimerkiksi monesti elementtien margin- ja padding-ominaisuuksisa. Tarkasta aina miltä kukin elementti näyttää zoomattuna, jotta voit varmistaa parhaan käyttökokemuksen kullekin elementille. Älä noudata miettimättä kenenkään ohjeita ilmantestaamista.
Älä koskaan vain poista elementtien kohdistustyylejä (focus). Kustomoidut tyylit voidaan suunnitella ja toteuttaa, mikäli oletukset eivät ole hyvät sivustolle. Huomaa myös, että eri selaimilla on omat oletustyylinsä, joten varmista, että oletustyylit toimivat kaikilla selaimilla, joita tuetaan. Näkyvä kohdistus kuuluu kriteeriin 2.4.7 (taso AA). WCAG 2.2 tuo tullessaan lisää kohdistukseen liittyviä ohjeistuksia.
On suositeltavaa, että kohdistustyylit ovat erilaiset kuin elementin osoitustyylit, koska on mahdollista käyttää sekä hiirtä että näppäimistöä samaan aikaan. Mikäli tyylit ovat samat, käyttäjän on hankala hahmottaa kumpi tyyleistä on osoituksen ja kumpi kohdistuksen. Mutta on parempi käyttää samoja tyylejä, kuin ei tyylejä ollenkaan.
Kohdistustyylit on aiemmin asetettu käyttämällä :focus -määritystä. Nykyään :focus-visible on jo laajasti tuettu. Suurimpana erona näillä kahdella on, että :focus näkyy myös hiirellä käytettäessä, kun taas :focus-visible ei.
Ikonifonttien käytössä kannattaa olla varovainen. Varmista, että käytät ikoneja sillä tavalla, millä fontissa niitä ajatellaan käytettävän. Ja testaa aina myös ruudunlukijalla miten ne toimivat. Varmista, että tarjoat vastineen saavutettavana tekstinä.
Jos ja kun poistat oletus listatyylit listaelementillä käyttämällä tyyliä list-style: none, Safari sen jälkeen ei huomioi koko listaa listana. Tätä voi korjata kahdella tavalla. Voit palauttaa tämän toiminnon lisäämälle listaelementille ARIA roolin role="list". Tämä ei ole paras tapa, koska rooli kuitenkin annetaan jo listaelementin käyttämisellä. Mutta tämä kuitenkin korjaa tämän ominaisuuden Safarilla, mutta validaattorit tulevat huomauttamaan tästä. Toinen vaihtoehto on käyttää CSS:ää. Voidaan lisätä 0 pikseliä leveä tila before-elementtiin kussakin <li> elementissä. Demo tästä listaelementin ongelmasta
Mikäli käytät animaatioita, varmista, että kriteerit 2.3 alla täyttyvät (tasot A-AAA). Animaatiot voivat herkästi aiheuttaa pahoinvointia tai muuta epämiellyttävää oloa, joten on tärkeää pyrkiä vamistamaan, että sivustosi hienot ominaisuudet eivät aiheuta joillekin henkilöille fyysisiä reaktioita.
On järkevää kunnioittaa käyttäjän käyttöjärjestelmään antamaansa liikkeen vähentämisen asetusta. Tätä seurataan media queryllä prefers-reduced-motion. Tämän kattaa AAA-tason kriteeri 2.3.3, mutta tämä on hyvä käytäntö aina, vaikket AAA-tasoon tähtäisikään.
Lue lisää animaatioiden ja liikkuvan sisällön suunnittelusta suunnittelijoiden osiosta.