Dynaamisen sisällön kanssa toimiminen ei ole apuvälineille mikään helpoin tehtävä. Kesken kaiken muuttuva DOM on haaste esimerkiksi ruudunlukuohjelmille. Mutta ei hätää! Dynaamisen sisällön pystyy tekemään myös saavutettavasti.
Yksi tärkeimmistä asioista sivun sisällön muuttuessa on fokuksen siirto: siten voi pakottaa ruudunlukuohjelman käyttäjän fokuksen haluttuun kohtaan. Tätä tosin ei tulisi käyttää kuin niissä tilanteissa, jolloin käyttäjä osaa odottaa sijaintinsa muuttuvan, siis jonkin käyttäjän oman toiminnon jälkeen. Jos sivulla on vaihtuva mainos, sinne ei missään tapauksessa tulisi pakottaa fokusta. Sitten taas, jos lomakkeen lähettäminen aiheuttaakin esimerkiksi virheilmoituksen, on hyvä siirtää käyttäjän fokus ko. ilmoituksen kohdalle, jottei se jää huomaamatta. Tai jos linkkiä painamalla sisältö muuttuu, voi fokuksen siirtää muuttuvan sisällön alkuun.
JavaScriptin avulla voi lisätä toiminnallisuutta vähän mihin tahansa elementteihin, niihinkin, jotka eivät sitä semanttisesti sisällä. Tässä kohtaa suureksi avuksi tulee ARIA, josta lisää seuraavassa.
ARIA (Accessible Rich Internet Application) on valikoima attribuutteja, joiden avulla verkkosivusta saa tehtyä saavutettavamman apuvälineille. Uusimmat selaimet ja ruudunlukuohjelmat tukevat hyvin ARIA-attribuutteja, mutta vanhat välttämättä eivät. ARIA:n avulla saa tehtyä paljon nppäriä asioita ja niiden avulla pystyy mm. korjaamaan ruudunlukuohjelman käyttäjän näkökulmasta sivun semantiikkaa oikeaksi. Silti ensisijaisesti tulisi noudattaa perus HTML-semantiikkaa, jotta vanhemmatkin ruudunlukijat ymmärtävät sisällön oikein.
ARIA-attribuutin voi lisätä lähes jokaiselle html-elementille. ARIA:an sisältyy role-attribuutti sekä joukko erilaisia aria-* -attribuutteja. Role-attribuutti kertoo nimensä mukaisesti elementin roolin, esimerkiksi "main", "button", "menubar" jne – vaihtoehtoja on toista sataa. Aria-* -attribuuteilla voi taas lisätä elementille vaikka kuvauksen (aria-describedby=id), labelin (aria-label="tekstiä") tai sen voi piilottaa ruudunlukuohjelmalta (aria-hidden=true/false).
ARIA-attribuutit lisäävät saavutettavuutta etenkin dynaamisen sisällön kanssa – niiden avulla on mahdollista antaa ruudunlukuohjelman käyttäjälle tietoa muuttuneesta sisällöstä heti, kun se muuttuu, sekä muista sovelluksessa tapahtuvista asioista. ARIA:sta on hyötyä myös ilman JavaScriptiä ja dynaamisyyttä.
| attributti | Arvo | Kuvaus | Esimerkki |
|---|---|---|---|
| aria-checked | true/false | Kertoo, onko elementin tila "valittu" vai ei | Lomakkeissa, joissa käytetään valittavina elementteinä jotain muuta kuin input-elementtiä relevantilla typellä |
| aria-describedby | id | Lisäkuvaus elementin toiminnalle | Lomakekentässä "tooltip", salasanan muoto |
| aria-hidden | true/false | Piilottaa elementin ruudunlukuohjelmalta | |
| aria-label | tekstiä | Kertoo ruudunlukuohjelmalle halutun asian elementistä | Lue lisää -linkkiin tieto, mistä voi lukea lisää |
| aria-labelledby | id1 id2 ... | Lista elementille annettavista labeleista | Lomake-elementti, jolla labelina sekä "oma" label että ryhmän label. |
| aria-required | true/false | Kertoo lomake-elementin pakollisuudesta | |
| aria-level | numero | Ilmaisee elementin hierarkiaa | Apuna esimerkiksi puurakenteen ja "alilistojen" ymmärtämisessä |
| aria-setsize | numero | Elementin, esimerkiksi listan tai puun, koko |
Kaikki seuraavat ovat muotoa role="arvo".
| Arvo | Kuvaus |
|---|---|
| alert | Ruudulle ilmestyvä ilmoitusteksti, joka halutaan tulevan varmasti luetuksi |
| button | Jos jokin muu kuin varsinainen button-elementti toimii kuin button, tämä role auttaa |
| main | Sivun pääsisältö. Helpottaa ruudunlukuohjelmalla navigointia. |
| menubar | Kertoo elementin olevan valikko. |
| menuitem | Kertoo, että elementti on valikon kohde. |
| presentation | Ottaa elementiltä sen semantiikan pois. Esim taulukkoa ei lueta enää taulukkona. |
| radiobuttongroup | Elementti on valikoima radiobuttoneita. |
| menuitemradio | Elementti, joka on radiobuttongroup-alueen yksi kohde. |
| tabpanel | Tabien valintapaneeli |
| tab | Tabien valintapaneelin yksi valittava tabi. |
Erilaisia roleja on vielä ehkä noin 100 lisää.
Viestilista näyttää viestin sisällön, kun klikkaa sitä listasta. Valitettavasti viestilistan elementit ovat vain li-elementtejä, joten ruudunlukuohjelmalle niiden klikattavuus ei ole itsestäänselvää. Tee ARIA:n avulla li-elementeistä ruudunlukuohjelman näkökulmasta painikkeita.
Listassa on vaihtoehtoja, joista voi valita vain yhden. Valitettavasti ruudunlukuohjelman käyttäjälle valinnat ovat vain yksittäisiä sanoja ilman mitään tietoa siitä, että niitä voisi edes painaa, saati sitten mitään tietoa, mikä vaihtoehdoista on valittuna. Käytä apuna tarvittavia ARIA roleja ja propertyja, jotta tästä saa saavutettavan.
Jostain syystä en ole saanut toimimaan tehtävän JavaScriptiä JSFiddlessä sellaisenaan, joten tässä vielä linkki toimivaan versioon, jossa on js-koodi laitettu HTML:n sekaan.
Edellisen luennon tehtävistä tuttu Verkokauppa on saanut navigaatioonsa "dropdown"-valikoita. Paha vaan, valikot tulee näkyviin pelkästään hiiren käyttäjille. :( Lisää sivulle JavaScript-koodia, jolla valikon saa näkyviin myös näppäimistöllä navigoidessa tai kosketusnäytöllä.