Saavutettavat merkinnät

Mitä tulisi merkitä ohjelmallisesti?

Ensinnäkin verkkosivun tai dokumentin kieli tulee merkitä oikein. Näin ruudunlukija tietää, millä korostuksella sisältöä tulee lukea. Mikäli kieli on merkitty väärin tai merkintä puuttuu, lopputulos voi olla käsittämätöntä puuroa. Myös hakukoneet etsivät sisältöä tämän kielimerkinnän pohjalta. Jotta mahdollisimman moni ruudunlukija tunnistaisi kielimerkinnän, on hyvä suosia kaksimerkkisiä kielilyhenteitä, kuten fi, sv ja en, ilman tarkennuksia.

Sisällöstä ruudunlukijalla pitäisi pystyä hahmottamaan vastaavat tiedot kuin visuaalisesti. Tärkeimpiä asioita ovat otsikkojen merkinnät, sillä Eficoden tekemän kyselyn perusteella, 47 % ruudunlukijakäyttäjistä tutustuu uuteen verkkosivuun käymällä läpi sen otsikot. Ruudunlukijaa käyttävien käyttötottumuksista löydät lisätietoa blogista "Ruudunlukija­käyttäjien ääni kuuluviin - yhteenveto saavutettavuuskyselyn tuloksista".

Kaikkien visuaalisesti otsikoilta näyttävien tekstien tulisi siis olla myös koodissa merkittynä oikein, jotta ruudunlukijat tunnistavat ne otsikoiksi. Suurempaa kirjasinkokoa, lihavointia tai muita tyylimuotoiluja ruudunlukijat eivät tunnista oletusasetuksilla eivätkä pysty niitä kuulijalle välittämään muutoin kuin tavallisena tekstinä, vaikka teksti olisi kissan kokoisin kirjaimin.

Esimerkki ohjelmallisista merkinnöistä

Katsotaanpa yksi esimerkki otsikoiden merkinnöistä. Ensimmäisessä versiossa otsikot on merkitty vain eri kokoisina fontteina:

Jännän äärellä

Vähän leipätekstiä välissä. Aiheina
- jännitys
- ääri

Jännitys

Tarkempaa tekstiä jännityksestä.

Ääri

Tarkempaa tekstiä äärellä olosta.

Ruudunlukijakäyttäjälle tämä kuulostaa VoiceOveria käyttäen seuraavalta:

"Jännän äärellä. Olet kohteen tekstielementti päällä. 
Vähän leipätekstiä välissä. Aiheina 
Olet kohteen tekstielementti päällä. 
jännitys 
Olet kohteen tekstielementti päällä. 
ääri 
Olet kohteen tekstielementti päällä. 
Jännitys 
Olet kohteen tekstielementti päällä. 
Tarkempaa tekstiä jännityksestä. 
Olet kohteen tekstielementti päällä. 
Ääri 
Olet kohteen tekstielementti päällä. 
Tarkempaa tekstiä äärellä olosta. 
Olet kohteen tekstielementti päällä."

Ei kovin jännää – tai ainakaan helposti jäsennettävää.

Entä miltä sama sisältö näyttäisi ja kuulostaisi, jos se olisi tehty ohjelmallisesti oikein?

Jännän äärellä

Vähän leipätekstiä välissä. Aiheina

• jännitys
• ääri

Jännitys

Tarkempaa tekstiä jännityksestä.

Ääri

Tarkempaa tekstiä äärellä olosta.

Esimerkki jatkuu…

Miltäs jälkimmäinen versio esimerkistä kuulostaa ruudunlukijalla? Jälleen VoiceOveria käyttäen:

"Otsikkotaso 4, Jännän äärellä
Olet kohteen otsikkotaso 4 päällä.
Vähän leipätekstiä välissä. Aiheina
Olet kohteen tekstielementti päällä. 
Luettelo 2 kohdetta. Olet kohteen luettelo sisällä.
luettelomerkki jännitys 1 /2. 
Olet kohteen tekstielementti päällä. 
luettelomerkki ääri 2/2. 
Olet kohteen tekstielementti päällä.
Kohteen luettelo loppu. Olet kohteen luettelo päällä.
Otsikkotaso 5, Jännitys.  
Olet kohteen otsikkotaso 5 päällä.
Tarkempaa tekstiä jännityksestä. 
Otsikkotaso 5, Ääri.  
Olet kohteen otsikkotaso 5 päällä.
Tarkempaa tekstiä äärellä olosta.
Olet kohteen tekstielementti päällä."

Mitä eroja näissä toteutuksissa on? Visuaalisesti ne näyttävät samalta, mutta jälkimmäisessä ruudunlukijallakin erottaa otsikot ja tunnistaa luettelon. Tärkeintä kuitenkin on se, että ruudunlukijalla voi tunnistaa otsikot ja näin myös hypätä suoraan otsikosta toiseen. Vastaavasti muistakin rakenteellisesti oikein merkityistä elementeistä, kuten linkeistä, luetteloista ja taulukoista, saa ruudunlukijalla tiedon, millaisesta elementistä on kyse. 

Mitä tämä vaatii? Sen, että niin otsikot kuin luettelo merkitään tekstinkäsittelyohjelman työkaluin valitsemalla otsikoiden tyyliksi sopivan otsikkotason tyyli (tässä H4 ja H5) ja luettelo <ul> ja <li> -merkinnöillä. Jos tyyli ei näytä halutulta, tyyliä voi muokata mieleisekseen. Otsikkotyyleihin on myös yhdistetty suurempi riviväli ennen otsikkoa, joten ylimääräisiä rivinvaihtoja ei tarvita.

Kannattaa myös kiinnittää huomiota siihen, miten otsikkotasoja on käytetty. Esimerkin otsikkotasot jatkavat loogisesti artikkelin muita otsikkotasoja säilyttäen artikkelin sisällöllisen hierarkian: 

1. Saavutettavat merkinnät (H1)
2. Mitä tulisi merkitä ohjelmallisesti? (H2)
3. Esimerkki ohjelmallisista merkinnöistä (H3)
4. Jännän äärellä (H4)
5. Jännitys (H5)

Harvoin tarvitaan näin syvää rakennetta, mutta tässä esimerkissä halusin sisentää esimerkin otsikkotasot sitä edeltäviin otsikkotasoihin ja samalla osoittaa, miten otsikkojen ulkonäköä voi muokata haluamakseen, jos se on tilanteeseen sopivaa.

Mitäs muuta pitäisi merkitä?

Ruudunlukijat tarjoavat oikopolkuja moniin elementteihin otsikoiden lisäksi. Esimerkiksi linkkejä käytetään jonkin verran sivun sisällön hahmottamiseen, mutta niiden kohdalla haasteeksi usein nousee heikot linkkitekstit, kuten "Lue lisää" tai "tästä".

Myös taulukoita, luetteloita, kuvia ja maamerkkejä voi käydä läpi ruudunlukijan oikopoluilla. Niinpä nekin tulisi merkitä oikein. Taulukoista on tulossa oma bloginsa ja kuvien tekstivastineista löytyy blogi "Tekstivastine ei ole turhake", joten ei niistä sen enempää tässä. Palataan siis hetkeksi luetteloihin ja maamerkkeihin.

Luettelot

Usein numeroimattomat luettelot on merkitty hyvin, sillä moni tekstinkäsittelyohjelma tunnistaa ne ja pyrkii automaattisesti merkitsemään ne oikein. Edellä käytetty esimerkkikin piti väkisin muokata vääräksi, kun järjestelmä hyvin kärkkäästi muokkasi luettelon rakenteeltaan oikeaksi. Verkkosivuilla ja PDF-tiedostoissa merkkaamattomia luetteloita kuitenkin näkee jonkin verran ja etenkin numeroidut luettelot ovat usein vailla kunnollisia merkintöjä.

Kun luettelon merkinnät ovat esimerkiksi verkkosivulla oikein, ruudunlukija osaa kertoa siitä kaikenlaista:

• luettelon alku- ja loppukohdan
• luettelon pituuden
• luettelomerkin kunkin kohdan alussa
• luettelon etenemisen kyseisen kohdan lopussa, esim 2/3.

Jos merkinnät puuttuvat, ruudunlukijalla kaikki on vain yhtä pitkää monotonista listaa.

Maamerkit

Sitten on vielä maamerkit. Ne saattavat olla useammalle vieraampia kuin edellä käsitellyt otsikkomerkinnät ja luettelot. Maamerkeillä merkitään esimerkiksi ylä- ja alatunnisteet, navigaatioalueet ja pääsisältö. Pääsisällön merkintä on myös hyvä kohde hyppylinkille, josta on tarkempaa tietoa blogissa "Hyppylinkki – Loikkaus kohti saavutettavuutta".

Hyviä käytäntöjä noudattaen sivun kaikki alueet sisältyvät johonkin maamerkkiin ja esimerkiksi ylä- ja alatunnisteita ja pääsisältöjä on vain yksi. Jos jotain maamerkkiä on useampi, kuten navigaatioon kuuluva päävalikko ja täydentävä valikko, kummallekin alueelle tulee antaa kuvaava nimi, jolla ruudunlukijakäyttäjä voi ne erottaa toisistaan. Navigaatioalueiden merkinnästä tarkemmin blogissa "Miten navigaatiovalikko toteutetaan saavutettavasti?".

Muistilistaa

• Varmista, että otsikot on merkitty niin visuaalisesti kuin ohjelmallisesti.
• Pyri käyttämään otsikkotasoja loogisesti. Muokkaa visuaalista ilmettä tarvittaessa sen sijaan, että valitsisit otsikkotason esitystavan mukaan.
• Älä merkitse ylimääräisiä kohtia otsikkomerkinnöillä. Se vaikeuttaa sisällön jäsentämistä ruudunlukijaa käyttäen ja myös hidastaa sivun lukemista.
• Muista merkitä myös linkit, luettelot, taulukot, kuvat ja maamerkit oikein ja kuvaavasti.