1.3.6 Määrittele tarkoitus
TL;DR: Kriteeri 1.3.6 liittyy personointiin. Kun alueiden ja komponenttien tarkoitus on ohjelmallisesti tunnistettavissa, käyttäjä voi hyödyntää työkaluja, jotka mukauttavat käyttöliittymää (esimerkiksi korvaamalla ikoneja tai sanastoa). Käytännössä: merkitse alueet maamerkeillä ja anna pelkkää ikonia käyttäville painikkeille ja linkeille selkeät, tarkoitusta kuvaavat saavutettavat nimet.
Onnistumiskriteerin virallinen kuvaus
Sisällössä, joka on toteutettu käyttäen merkkauskieltä, käyttöliittymäkomponenttien, kuvakkeiden ja alueiden tarkoitus voidaan selvittää ohjelmallisesti.
Mitä pitää tehdä?
Varmista, että:
- Alueet on merkitty ohjelmallisesti tunnistettavilla semantiikoilla (esim. HTML-maamerkit kuten
nav,mainjne., tai tarvittaessa ARIA-maamerkit). - Vuorovaikutteiset komponentit (painikkeet, linkit, syötekentät) saavat saavutettavan nimen, joka kuvaa tarkoitusta (esim. “Haku”, “Avaa valikko”, “Sulje dialogi”, “Ohje”).
- Merkitystä välittävät ikonit ovat ymmärrettäviä komponentin saavutettavan nimen tai viereisen tekstin kautta, eivätkä pelkästään visuaalisesti.
Miksi tämä on tärkeää?
Tämä kriteeri tukee personointia: käyttäjä voi hyödyntää työkaluja, jotka korvaavat symboleja ja terminologiaa vaihtoehdoilla, jotka ovat hänelle tutumpia (esim. eri ikonisarja tai yksinkertaistettu sanasto). Tämän mahdollistamiseksi työkalujen on tiedettävä muutakin kuin “tämä on painike” — niiden on kyettävä päättelemään myös mihin sitä käytetään.
Yleisiä sudenkuoppia
- Pelkkiin ikoneihin perustuvat painikkeet ja linkit, joiden nimi on esimerkiksi “Ikoni”, “Painike”, “Lisää”, “X” tai “Hamburger”, vaikka tarkoitus olisi “Sulje” tai “Avaa valikko”.
div-elementtien ja click-käsittelijöiden käyttö natiivien komponenttien sijaan, ja saavutettavuuden “paikkaaminen” vasta myöhemmin.- Puuttuvat tai väärin toteutetut maamerkit (landmarks), tai useita samantyyppisiä maamerkkejä ilman erottavia nimiä (esim. kaksi
nav-aluetta, jotka ovat molemmat vain “Valikko”). - Koristeellisten ikonien käsitteleminen merkityksellisenä sisältönä (tai päinvastoin).
Miten testata?
- Alueet
- Tarkista, että sivun keskeiset alueet on merkitty maamerkeillä (
header,nav,main,footer,aside) tai ARIA-maamerkkien rooleilla. - Jos samantyyppisiä maamerkkejä on useita (esim. useampi
nav), varmista, että niillä on selkeät ja toisistaan erottuvat nimet. Tämä tukee sitä, että “tarkoitus” on ohjelmallisesti tunnistettavissa käyttäjille ja työkaluille.
- Tarkista, että sivun keskeiset alueet on merkitty maamerkeillä (
- Komponentit / ikonit
- Ikonipainikkeissa ja -linkeissä varmista, että saavutettava nimi vastaa tarkoitusta (“Haku”, “Avaa asetukset”, “Sulje”, “Lataa”, jne.).
- Käytä selaimen kehittäjätyökaluista Accessibility-näkymää ja tarkista Role ja Name.
- Tee tarvittaessa nopea ruudunlukijakoe: kuulostavatko nimet järkeviltä ilman, että ikonia näkee?
Liittyvät kriteerit: 1.1.1, 1.3.1, 4.1.2.
Miten huomioida tämä kriteeri suunnittelussa?
- Suosi tekstiselitteitä tärkeissä toiminnoissa. Jos käytät ikoneja, varmista että sama toiminto esitetään aina samalla sanastolla (johdonmukaisuus auttaa personointia ja mappauksia).
- Määrittele käyttöliittymällesi yhtenäinen sanasto yleisille toiminnoille (Haku, Valikko, Sulje, Asetukset, Ohje, Jaa…).
- Suunnittele maamerkkialueet etukäteen: mitä navigaatioita sivulla on (päänavigaatio vs. murupolku vs. paikallinen navigaatio) ja miten ne nimetään.
Miten huomioida tämä kriteeri kehitystyössä?
- Aseta tarkoitus vuorovaikutteiselle elementille, ei SVG-/fontti-ikonille.
- Vain ikoni:
<button aria-label="Haku">…</button><a aria-label="Siirry etusivulle">…</a>
- Käsittele SVG-/sprite-/ikonifontti-ikoni esityksellisenä:
- inline SVG:
aria-hidden="true" focusable="false" - sprite
<use>: piilota SVG-kääre; nimeä pääelementti (button/link) - ikonifontti: piilota ikonispan; nimeä pääelementti (button/link)
- inline SVG:
- Jos ikoni on merkityksellinen itsessään (esim. tilailmaisin), varmista että merkitys on saatavilla tekstinä (näkyvänä tai ruudunlukijalle tarkoitettuna).