Miten navigaatiovalikko toteutetaan saavutettavasti?

Näkövammaiselle ruudunlukijan käyttäjälle on tärkeää, että valikko on toteutettu niin, että kaikki visuaalisesti kerrottu informaatio on saatavilla, eli merkkauksesta käy ilmi mm.

• mikä osa sivusta kuuluu valikkoalueeseen
• linkit ja painikkeet on merkattu oikein
• jos on pudotusvalikoita, onko pudotusvalikko näkyvissä
• nykyinen sijainti erottuu valikossa
• valikko on helppo löytää.

Toteutuksessa täytyy varmistaa myös se, että valikko toimii erilaisilla ohjaustavoilla, eli erityyppisillä osoitinlaitteilla ja kosketusnäytöllä, sekä näppäimistöllä tai näppäimistörajapinnan kautta toimivilla apuvälineillä kuten kytkinohjaimilla.

Koska päävalikko on monilla sivustoilla tärkein keino löytää sisältöä, on tärkeää, että se on selkeä ja helppo hahmottaa. Valikoissa on usein paljon linkkejä monella tasolla, sekä näytettäviä ja piilotettavia alatasoja, mikä tuo lisähaastetta rakenteen toteuttamiseen ymmärrettävästi ja teknisesti laadukkaasti.

Valikkoalueen merkkaus

Päävalikko on yleensä visuaalisesti muotoiltu vaakasuuntaiseksi palkiksi, jossa on linkkejä vierekkäin. Toinen yleinen tapa on vasemmassa reunassa oleva pystysuuntainen valikko. Nämä ovat yleisiä käytäntöjä monilla verkkosivustoilla, joten näkevät käyttäjät tunnistavat valikon ulkoasun perusteella. Jos valikoita on kaksi tai useampia, niiden sijainti ja ulkoasu kertovat valikoiden suhteesta, jos esim. toinen valikoista näyttää valitun alaosion sivut.Koska valikoissa visuaalinen ulkoasu ja asettelu kertoo sisällön merkityksestä, sama asia olisi oltava pääteltävissä myös merkkauksesta tai tekstisisällöstä (WCAG 1.3.1).

Päävalikko tulisi merkata valikoksi. Tämä käy helpoiten käyttämällä nav-elementtiä. Jos teknisistä tai muista syistä halutaan käyttää geneeristä div-elementtiä, valikko tulisi merkata navigation-roolilla.

Jos valikoita on useampia, ne täytyy erottaa toisistaan antamalla valikoille kuvaavat nimet. Tämän voi tehdä helpoiten aria-label -attribuutilla, jolla voi antaa valikolle nimen tekstimuodossa. Jos valikolla on näkyvä otsikko, voi valikon nimetä viittaamalla tähän otsikkoon aria-labelledby-attribuutin avulla.

Pudotusvalikot

Monesti valikossa on laajennettavia osioita, pudotusvalikoita tms., joissa painiketta painamalla saa valikon alaosion näkyviin. Valikoita on kahdenlaisia: toisissa on vain yksi painike, joka toimii valikkopainikkeena, ja toisissa on linkki alaosion pääsivulle sekä sen vieressä painike, josta saa alaosion näkyviin.

Valikoissa tulisi käyttää linkkejä ja painikkeita johdonmukaisesti. Yleisperiaate on, että linkki vie toisille verkkosivuille ja painike suorittaa toiminnon samalla sivulla. Valikoissa tämä tarkoittaa sitä, että valikon varsinainen sisältö, linkit sivuston eri osiin, toteutettaisiin linkkeinä, ja pudotusvalikot ja muut toiminnot toteutettaisiin painikkeiden avulla.

Valikkopainikkeen toteutuksessa olennaista on, että

• sillä on nimi
• se on merkattu painikkeeksi ja se toimii eri ohjaustavoilla
• siitä käy ilmi onko valikko näkyvissä vai ei
• avautuva valikko sijaitsee lukemisjärjestyksessä seuraavana.

Jos valikkopainikkeissa on tekstiä, tämä teksti toimii painikkeen nimenä. Monesti painikkeessa ei ole näkyvää tekstiä, vaan esimerkiksi alaspäin osoittava nuolikuvake, ja tällöin painikkeelle täytyy määritellä nimi. Painikkeelle voidaan antaa nimi suoraan tekstinä aria-label-attribuutin avulla. Jos painikkeen vieressä on linkki alaosioon, ja linkin teksti sopii myös alaosion nimeksi, voidaan painikkeen nimeksi laittaa myös viittaus linkin tekstiin aria-labelledby-attribuutin avulla.

Painike on helpointa toteuttaa käyttämällä button-elementtiä. Jos käytetään jotain toista elementtiä kuten a, div tai li, täytyy kertoa roolimäärityksen avulla, että kyseessä on painike (role=”button”). Tällöin on myös huolehdittava siitä, että painike toimii eri ohjaustavoilla, eli hiirellä, näppäimistöllä ja kosketuksella. Buttonin tai a-elementin käytössä on se etu, että ne toimivat eri ohjaustavoilla automaattisesti, ja ylimääräistä koodia ei tarvita.

Valikon näkyvyys merkataan aria-expanded -attribuutin avulla. Se saa arvon “true” tai “false” sen mukaan, onko valikko näkyvissä vai ei. Alkutilanteessa “false” kertoo apuvälineiden käyttäjille, että painiketta painamalla saa valikon näkyviin, ja tämän jälkeen sen, onko valikko avoinna.

Kun valikko on avattu, valikon tulisi sijaita lukemisjärjestyksessä seuraavana. Tämä tarkoittaa sitä, että kun valikkoa käyttää ruudunlukijalla ja avaa pudotusvalikon, avautuneen valikon tulee olla järjestyksessä seuraavana avauspainikkeen jälkeen. Jos valikko ilmestyisi johonkin muuhun kohtaan, se voisi olla vaikea löytää ruudunlukijalla. Järjestys määräytyy HTML-koodin järjestyksen perusteella, joten valikon sisältöön liittyvä koodi on sijoitettava painikkeen koodin perään.

Valikon rakenne

Monesti navigaatiovalikoissa esitetään sivuston rakenne hierarkkisesti niin, että osa linkeistä kuuluu loogisesti toistensa alle. Tämän hierarkisen rakenteen tulisi välittyä myös merkkauksessa niin, että se on ymmärrettävä myös käyttäjälle, joka ei näe visuaalista asettelua.

Rakenteen ilmaisemiseen on erilaisia tapoja. Voidaan käyttää nimettyjä alueita tai nimettyjä, sisäkkäisiä listoja.

Helpointa on käyttää listoja, koska listoissa on myös ymmärrettävyyttä helpottava ominaisuus: ruudunlukijan käyttäjälle kerrotaan listan pituus, kun sen sisältöä selataan. Käytännössä valikko koostuu silloin listasta, jossa alatasot ovat listaelementtien sisällä olevia alilistoja. 

Joskus valikoissa käytetään ns. menu-roolia. Tämä on täysin sallittua, mutta ei välttämättä suositeltavaa. ARIA-spesifikaation mukaan menu-roolia voidaan käyttää verkkosovelluksissa, joissa on Windows- ja Mac-käyttöjärjestelmille tyypillinen ikkunan yläreunassa oleva valikko, joka sisältää erilaisia toimintoja. Sivuston navigaatio ei ole tällainen toimintojen valikko, mutta jos valikko on rakenteeltaan yksinkertainen ja koostuu hierarkisista alivalikoista, menu-roolia voidaan kyllä käyttää. Silloin täytyy kuitenkin huolehtia, että roolimäärityksiä käytetään spesifikaation mukaisesti, koska se tuo mukanaan rajoituksia ja vaatimuksia valikon rakenteelle. Valikon täytyy myös toimia tietyillä näppäinkomennoilla ennalta määrätyn mallin mukaisesti, ja nämä täytyy koodata valikkoon käsin.

Nykyisen sijainnin merkkaaminen

Navigaatiovalikossa on usein kerrottu visuaalisella korostuksella millä sivulla ollaan. Tämä helpottaa oman sijainnin hahmottamista sivuston rakenteessa. Koska sijainti on kerrottu visuaalisesti, sen täytyisi saavutettavuusvaatimusten mukaan käydä ilmi myös merkkauksesta.

Jos sijainti on merkattu visuaalisesti korostamalla linkkielementtiä, samaan linkkiin tulee lisätä myös attribuutti aria-current=”page”. Jos korostus näkyy sivun linkin lisäksi myös nykyisen sivuston osion kohdalla, osion linkkiin voi laittaa myös aria-current=”true”.

Valikon käyttö näppäimistöllä

Saavutettavuusvaatimusten mukaan kaikkien toimintojen tulisi olla käytettävissä näppäimistöllä. Käytännössä tämä tarkoittaa, että valikon linkkejä tulisi voida selata ja pudotusvalikoiden painikkeiden tulisi toimia. Jos valikko on toteutettu käyttäen tavallisia linkkejä ja painikkeita, ne toimivat näppäimistöllä jo valmiiksi.

Näppäimistöä käyttäessä on tärkeää, että näppäimistökohdistin on selkeästi näkyvissä. Kun käyttäjä navigoi painelemalla tab-näppäintä, jokaisen elementin kohdalla tulisi näkyä selkeä visuaalinen korostus, jotta on helppo seurata missä korostus etenee. Tähän riittää oletusasetusten mukainen kohdistuskehys, joka on jokaisessa selaimessa vähän erilainen, tai korostusvärin ja muodon voi määritellä itse. Jos värit määritellään itse, niiden on noudatettava vaatimuksia värien käytöstä ja kontrastista, jotta kohdistin erottuu riittävästi perustilasta ja taustasta. Ulkoasun suhteen on hyvä noudattaa tulevaa WCAG 2.2 -vaatimusta, joka tulee asettamaan vaatimuksia kohdistuksen näkyvyydelle. Kohdistin ei saa milloinkaan olla piilotettuna eikä käydä läpi piilossa olevia elementtejä.

Kohdistuksen tulisi käydä elementit läpi loogisessa järjestyksessä. Järjestyksen ei tarvitse olla täysin sama kuin visuaalisen järjestyksen, mutta sen tulisi olla looginen niin, että kohdistusta on helppo seurata. Käytännössä on hyvä noudattaa tavanomaista “vasemmalta oikealle, rivi kerrallaan alaspäin” -periaatetta. Järjestys määräytyy automaattisesti koodin järjestyksen perusteella, ja sitä ei ole tarpeen muuttaa kuin perustellusta syystä. 

Jos linkit tai painikkeet on toteutettu tekstielementteinä, joihin on lisätty mahdollisuus klikata niitä hiirellä tai painaa kosketusnäytöllä, niihin tulisi lisätä myös mahdollisuus käyttää niitä näppäimistöllä. Elementteihin täytyy lisätä tabindex-attribuutti, jotta niihin voi viedä näppäimistökohdistuksen, ja koodata näppäimistötapahtumien kuuntelija, jotta elementin voi aktivoida. Tämän vuoksi helpoin tapa on käyttää tavallisia painike- (button) ja linkki (a href) -elementtejä.

Valikon käyttö hiirellä

Pudotusvalikko toteutetaan joskus niin, että alataso avautuu automaattisesti, kun hiiri viedään valikon päälle. Tämä on hyväksyttävä toimintatapa, mutta silloin täytyy huolehtia siitä, että automaattinen avaaminen ei vaikeuta valikon ja sivun muiden osien käyttöä.

Jos valikko on iso (ns. “megamenu”) ja peittää ilmestyessään osan sivun pääsisällöstä, se pitäisi pystyä piilottamaan siirtämättä osoitinta (WCAG 1.4.13). Vaatimuksen taustalla on se, että automaattisesti ilmestyvää valikkoa voi olla vaikea saada piiloon, jos se peittää suuren osan näkymästä, ja pysyy näkyvissä silloin, kun osoitin on valikon päällä. Siksi se pitäisi pystyä piilottamaan painamalla esimerkiksi esc-näppäintä tai muulla yleisellä tavalla. Valikko ei saa mennä piiloon itsestään, vaan sen on pysyttävä näkyvissä kunnes se piilotetaan käyttäjän toimesta joko painamalla esc-näppäintä tai siirtämällä osoitin pois valikon päältä.

Toinen hiiren käyttöön vaikuttava vaatimus liittyy tarkan polun seuraamiseen osoittimella. Joissain valikoissa alaosio tulee näkyviin automaattisesti, kun osoitin viedään tietyn linkin päälle. Tällöin alavalikkoon siirtyminen vaatii, että osoitinta siirretään tarkasti tiettyyn suuntaan niin, että osoitin pysyy linkin päällä jotta valikko ei menisi piiloon, ja toisaalta että päästään ilmestyneen alavalikon alueelle. Tällainen toimintatapa on kielletty saavutettavuusvaatimuksissa (WCAG 2.5.1), koska se on hankala käyttäjille, joille osoittimen tarkka liikuttaminen on vaikeaa. Parempi käytäntö on toteuttaa valikko niin, että alataso ilmestyy näkyviin vain painamalla painiketta.

Verkkokauppa.com:n valikko toimi aikaisemmin tällä periaatteella, mutta on sittemmin korjattu.

Valikkorakenteiden muistilista

Huomioi valikkorakenteissa

• valikkoalueen merkintä
• valikon nimeäminen
• valikkopainikkeen toteutus
• lukemisjärjestys alavalikoissa
• käyttö näppäimistöllä
• näppäimistökohdistin näkyvissä
• nykyisen sijainnin merkkaaminen
• käyttö hiirellä.