A11ying with Sanna - Toki, jos voisin opas saavutettavuuteen

Miten luoda saavutettava komponentti?

Valitettavasti ei ole olemassa yhtä ainoaa ja yksinkertaista vastausta, joka toimisi kaikissa tilanteissa. Sukelletaan hieman syvemmälle tähän aiheeseen ja oletetaan nyt, että komponentille on jo suunniteltu saavutettava ulkoasu. Keskitytään vain kehitystyöhön.

Kehitystyö kannattaa aloittaa erittäin tärkeästä vaiheesta - teknisestä suunnittelusta. Mielestäni tämä vaihe on tärkein. Hyvällä suunnittelulla voidaan säästää aikaa ja vaivaa sekä helpottaa uudelleenkäytettävien komponenttien luomista huomattavasti.

Mitä tekninen suunnittelu tarkoittaa tässä yhteydessä?

Teknisellä suunnittelulla tarkoitan komponentin pilkkomista osiin, jotta tiedetään mitä ominaisuuksia ja elementtejä komponentissa tarvitaan. Kun ymmärrät kyseisen komponentin ja sen tarkoituksen, on huomattavasti helpompaa aloittaa myös saavutettavuuden suunnittelu.

Aloita komponentin määrittely

Määrittelyyn on monia tapoja. Yksi tapa on pysähtyä ja erittää erilaisia kysymyksiä komponentin luonteesta ja toiminnoista.

Onko kyseessä toiminnallinen komponentti? Jos ei, et tarvitse lainkaan ARIA-merkintöjä.

Onko tässä komponentissa useampi kuin yksi toiminto? Jos kyllä, jaa komponentti osiin, jotta voit työskennellä yhden toiminnon kanssa kerrallaan.

Kun pääsemme miettimään komponentin yksittäistä toimintoa, voimme alkaa pohtia millaisia toimintoja komponentilla on.

Onko se linkki? Jos on, et tarvitse ARIA-merkintöjä, jos näytät kaiken näkyvän sisällön myös avustaville teknologioille. 

Onko se painike? Jos on, onko se painike, joka näyttää tai piilottaa jotain toista elementtiä (ns. toggle button)? Jos kyseessä ei ole tällainen, et tarvitse ARIA-merkintöjä. Jos se on, tarvitset mahdollisesti aria-extended merkinnän kertomaan onko toinen sisältö näkyvissä. Ja aria-controls merkinnällä voit kertoa mitä elementtiä tämä nappi näyttää tai piilottaa.

Onko se sisältöhaitari? Haitarin kanssa sisältöä näyttää ja piilottaa painike. Painikkeella pitäisi olla aria-extended ja aria-controls -merkinnät käytössä. Käytä painikkeen sisällä otsikkoa, koska yleensä painikkeen tekstisisältö toimii myös sivulla otsikkona. Kiinnitä huomiota oikeaan otsikkotasoon!

Jos komponentti on monimutkaisempi kuin nämä, suosittelen että jatkat käyttämäsi komponentin tyypin määrittämistä ja sen jälkeen tarkastat ARIA Authoring Practices Guide -sivustolta kyseisen komponentin ARIA-merkinnät.

Jos haluat nähdä tällä sivustolla esimerkkejä tietyistä komponenteista, voit lähettää anonyymiä palautetta ja toivoa sisältöä.