Käytä elementtejä sillä tavalla, millä niiden oletetaan toimivan, älä käytä yleisesti tunnettuja elementtejä tavallisesta poikkeavalla tavalla. Komponenteilla, joilla on sama toiminnallisuus useammalla sivulla, täytyy olla johdonmukainen merkintätapa. Huom! Johdonmukainen ei aina tarkoita automaattisesti identtistä.
Vaikka kriteeri 4.1.1 on nyt poistettu, toiminnallisuuksiin liittyvien elementtien ID-attribuuttien täytyy olla uniikit. Mutta jos saat ilmoituksen esimerkiksi vain visuaalisen ikonin ID-attribuutista, voit todennäköisesti jättää sen huomiotta.
Lukemisjärjestyksen tulisi vastata koodissa olevaa järjestystä aina kun mahdollista. Tätä voi testata poistamalla sivulta CSS-tyylit ja varmistamalla, että sisällön järjestys on järkevä.
Poista kohdentamismahdollisuus elementeiltä, joihin ei sillä hetkellä ole tarkoitus päästä. Esimerkiksi inaktiiviset pudotusvalikot, ruudun ulkopuoliset navigaatiot ja modaalit.
Kuvilla täytyy olla aina alt-attribuutti. Vaihtoehtoisen tekstin ei tulisi olla merkitty pakolliseksi kentäksi sisällönsyöttöjärjestelmässä, koska koristeellisten kuvien kohdalla vaihtoehtoisen tekstin tulee olla tyhjä. Huomaa, että tyhjä vaihtoehtoinen teksti ei ole sama asia, kuin että alt-attribuuttia ei olisi lainkaan.
Pyri aina kirjoittamaan semanttista HTML-koodia. Kiinnitä huomiota elementtitageihin, varmista, että käytät niitä oikein ja että käytät myös oikeita tageja oikeissa tilanteissa. Muista aina tarkastaa sivusto koodivalidaattorilla.
Muista, että elementeillä <div> ja <span> ei ole lainkaan semanttista merkitystä. Näitä voidaan käyttää ulkoasun muodostamiseen tarvittaessa. Älä käytä semanttisia elementtejä väärin luodaksesi ulkoasua.
Olet todennäköisesti törmännyt elementtiin, jossa linkki näyttää napilta. Tämä on varsin yleinen käytäntö ns. CTA-nappien/-linkkien kanssa. CTA tulee englanninkielisistä sanoista Call to action. On tärkeää muistaa, että nappi ja linkki eivät teknisesti ole sama asia.
Linkki vie käyttäjän jonnekin, yleensä toiselle sivulle. Nappi tekee jotakin sivulla, jolla ollaan. Ja miksi tällä on merkitystä? Näiden elementtien aktivoinnissa on eroa. Linkki aktivoidaan enter-näppäimellä, kun taas napin voi aktivoida joko enter-näppäimellä tai välilyönti-näppäimellä. Ja jos vielä mietit, mitä merkitystä tällä on, oletko koskaan testannut mitä tapahtuu jos linkkiä kohdentaessasi aktivoitkin tämän napilta näyttävän linkin välilyönnillä?
Valikot, jotka aukeavat viedessä hiiren kursori valikon päälle, ovat ongelmallisia henkilöille, joiden motoriikka on heikentynyt. Mikäli käyttäjän käsi vapisee, kun hän yrittää avata tällaista valikkoa, se saattaa jopa olla mahdotonta. Mikäli käytät tällaisia valikoita, on hyvä tarjota esimerkiksi sivuvalikko, josta voi navigoida alakohtiin.
Näppäimistökäyttäjille tällaisten valikoiden ei myöskään pitäisi avautua kohdennettaessa. Tätä tällä hetkellä ikävän harvassa valikkokirjastossa huomioidaan, joten jos suunnittelet käyttäväsi jotakin valikkokirjastoa, testaa sen näppäimistötoiminnallisuus. Saatat joutua tekemään tällaisen ominaisuuden itse.
Jos toteutat valikon, joka aukeaakin klikkauksella, näppäimistön kohdentamisongelma on käytännössä suoraan kunnossa. Tällainen valikko on usein käytettävämpi myös heikomman motoriikan kanssa, koska avattu valikkokohta ei katoa, vaikka hiiri liikkuisikin pois avatun valikkokohdan päältä.
On mahdollista toteuttaa myös näiden kahden tavan yhdistelmä. Valikko aukeaa hiiren kursorin kohdennuksella, mutta ei lähde pois, jos hiiri viedään avautuvan valikkokohdan päältä pois. Usein tällaisissa valikoissa tarjotaan myös erillinen nuoli-ikoni, josta valikon saa näppäimistöllä avattua. Tällainen toiminto löytyy Aluehallintoviraston sivustolta Saavutettavuusvaatimukset.
Kun toteutat dialogilaatikoita tai vastaavia elementtejä, huomioi ruudun suurentamista käyttävät henkilöt, näppäimistökäyttäjät ja avustavaa teknologiaa käyttävät. Mikäli sisältölaatikko aukeaa näkökentän ulkopuolella, käyttäjä ei todennäköisesti pääse siihen sisältöön. Näppäimistökäyttäjän täytyy päästä kaikkiin näihn elementteihin.
Kun modaali avataan, kohdennus pitäisi siirtää sen sisään, ja sen pitäisi pysyä ainoastaan modaalin sisällä. Kun käyttäjä sulkee modaalin, kohdennus pitäisi siirtää takaisin siihen elementtiin, missä se oli modaalia avatessa.
Olen tutkinut jonkun verran erilaisia kirjastoja modaalien tekemiseen. Eräs tällainen on a11y-dialog. On myös Modaal, joka väittää olevansa saavutettava tasolla AA, mutta tätä testatessani tilanne ei ainakaan ollut ihan niin hyvä. Muista aina testata tarkkaan valitsemasi kirjastot. Modaaleissa on todella usein saavutettavuuspuutteita, ja jos voit välttää niiden käyttämistä, se on usein suositeltavaa.
HTML:ään on tulossa elementti <dialog>, jonka pitäisi pystyä hallitsemaan käyttäjän kohdennus. Toivottavasti tämä pitäisi paikkaansa, koska emme enää tarvitsisi lisäkirjastoja tai ominaisuuksia modaalien tekemiseen. Tämä elementti ei kuitenkaan kirjoitushetkellä ole kovinkaan laajasti tuettu.
Mikäli modaalissa on ensimmäisenä tai viimeisenä elementtinä <iframe>, kohdennus ei toimi oikein, koska nämä elementit kaappaavat kohdennuksen. Eli mikäli tarvitset modaalin sisään tällaisen elementin, laita se johonkin muuhun kohtaan kuin ensimmäiseksi tai viimeiseksi.
Kuten saatatkin tietää, näitä elementtejä käytetään usein. Joskus niihin lisätään näkevälle käyttäjälle tarkoitettua sisältöä, kuten kustomoituja bullet-listan ikoneita, nuolia tai kolmioita. Mutta mitä et välttämättä tiedä on, että ruudunlukijat lukevat nämä sisällöt. Selaimien ja ruudunlukijoiden välillä on tässä eroa, esimerkiksi Chrome ja Firefox tulkitsevat content-ominaisuuteen lisättyä sisältöä eri tavalla.
Näiden sisältöjen ääneen lukeminen on käyttäjälle hyvin hämmentävää, tai jopa joissain tapauksissa ärsyttävää. Ruudunlukija on mahdollista saada ohittamaan nämä sisällöt antamalla tälle ominaisuudelle tyhjä vaihtoehtoinen teksti.
Vaihtoehtoinen teksti on lisätty tason 3 spesifikaatiossa. Vaihtoehtoinen teksti ruudunlukijalle annetaan tällä tavalla:
.item::before { content: "\25BA" / ""; }
Tein tästä myös erillisen demosivun, käy testaamassa pseudo-elementit ::before ja ::after.
Tällä ominaisuudella pitäisi olla mahdollista lisätä myös vaihtoehtoinen teksti tällaiselle sisällölle, mutta tätä en itse vielä ole missään nähnyt tuettuna. Mutta tämän ominaisuuden ohittaminen ruudunlukijalla tuntuu toimivan varsin luotettavasti. Safari ei vielä tue tätä, ja saattaa piilottaa tällä tavalla merkityn merkin näkyvistä, joten varmista toiminnallisuus Safarilla, mikäli käytät tätä.