Ensin pari sanaa nettisivujen selailusta ruudunlukuohjelmalla.
Ensinäkin, se on todella erilaista kuin näkevänä. Voi ajatella, että ruudunlukuohjelman kanssa verkkosivu on yksiulotteinen taulukko; kaikki sivun sisältö tulee luettavaksi peräkkäin. Sellaisia käsitteitä kuin "oikealla ylhäällä" tai "vasemman reunan valikossa" ei ruudunlukuohjelman käyttäjälle ole olemassa (unohdetaan tässä hetkeksi kosketusnäytön mahdollisuudet). Netissä liikutaan näppäimistön ja näppäinkomentojen avulla, täysin ilman hiirtä.
Sitten niitä vinkkejä.
1. Semanttinen rakenne
Koska html on kehitetty tekstin jäsentämiseen, siitä löytyy elementit otsikoille, taulukoille, listoille yms. Voisi sanoa, että kaikelle sisällölle löytyy oma, semanttinen html-elementtinsä (html5:ssä myös videolle). Käyttäkää niitä! Ruudunlukuohjelmalla on lähes mahdotonta selata verkkosivua, jossa otsikot ei ole koodattu otsikoina (h-elementteinä), vaan tehty kivasti otsikon näköiseksi muotoiluilla. Se ei riitä! Valikon linkkilista on järjettömän paljon helpompi löytää, jos se on oikeasti lista. Niin ja jos vaikkapa ohjeissa puhutaan painikkeesta, on todella hämmentävää ja väärin, jos oikeasti ei löydykään painiketta (button) vaan linkki (a).
Ruudunlukuohjelman kanssa sivuilla liikkuminen onnistuu siis myös tiettyihin elementteihin, aina ei tarvitse lukea sivua järjestyksessä alusta loppuun. Siksi ne semanttiset vastineet ovat niin tärkeitä. Esimerkiksi Googlessa hakukenttään pääsee, kun etsii tekstikentän (yksi näppäin), haun jälkeen hakutulokset löytyy helposti h-tasoina (jälleen yksi näppäin). Myös listat, taulukot, painikkeet, kuvat, linkit.... kaikki elementit on ruudunlukuohjelmalla löydettävissä niitä vastaavilla komennoilla, mikäli ne on koodattu oikein.
2. Lähdekoodin järjestys
Kyllä, sillä on väliä, missä järjestyksessä sivun sisältö on lähdekoodissa/domissa. Vaikka CSS:n avulla elementit saa mukavasti visuaalisesti käytännössä mihin tahansa välittämättä siitä, missä se sijaitsee lähdekoodissa, ruudunlukuohjelma lukee sivua eri tavalla. Siksi sokean käyttäjän käsitys siitä, mikä on "sivun alussa" voi olla täysin eri kuin näkevän. Tärkeintä lähdekoodin järjestyksen kanssa on ne tilanteet, joissa jotain valikon kohdetta painamalla avautuu alivalikko. Jos se ilmestyykin jonnekin aivan muuhun kohtaan sivulla kuin alkuperäinen valikon kohde, on sitä lähes mahdotonta löytää ikinä.
On ihan normaalia, että sivuston "päävalikko" löytyy ensimmäisenä, kun ruudunlukijan kanssa sivulle menee, eikä se ole ollenkaan huono. Silloin alkaa kyllä ottaa jo päähän, jos kaikki mahdolliset valikot ja mainokset ja turhuudet ja epäolennaisuudet tulee vastaan ennen sivun pääasiallista sisältöä. Siis, jos vaikka johonkin lehtijuttuun klikatessani päädyn lukemaan ensin koko lehden sivuston kaikki valikot ja lehden kaikkien muiden artikkeleiden otsikot ja linkit mainostajille ennen kuin pääsen juttuun, jonka halusin lukea, voi hieman ketuttaa.
3. For-attribuutit lomakkeissa
Lomake-elementeissä on sellainen juttu kuin for-attribuutti. Sillä saa näppärästi kerrottua, mikä labeli kuuluu millekin tekstikentälle tai checkboxille. Saattaa tuntua turhalta sellainen, kun kyllähän se lukee siinä vieressä. Niin. Etenkin pitkiä lomakkeita täyttäessä on mukavan helppoa siirtyä lomakkeen kohdasta toiseen pelkästään tabia painamalla. Lomakkeissa, joissa on for- ja id-attribuutit kohdallaan, tämä onkin helppoa ja vaivatonta; seuraavaan elementtiin siirryttäessä ruudunlukuohjelma kertoo, mikä kohta on kyseessä (esim: "sukunimi, tekstikenttä"). Jos forit puuttuu, tiedän päätyneeni vaan tekstikenttään. Sitä onkin sitten kiva miettiä, että mitäs tietoja tähän syötetään.
4. Fokuksen siirto dynaamisilla sivustoilla
On hienoa, että nykyään voi sivulle tuottaa lisää sisältöä ilman, että se täytyy kokonaan ladata uudestaan. Mutta miten sitten ruudunlukuohjelman käyttäjä näkee uuden sisällön? Fokuksen siirto on ratkaisu tähän silloin, kun sisältö on tarpeellista – jos se on vaan vaihtuva mainos, ÄLÄ siirrä fokusta sinne, huh. Jos vaikkapa lomakkeen täytön jälkeen pitää vielä kuitata, että kyllä, todellakin haluan lähettää nämä tiedot ja kuittauspyyntö ilmestyykin vaan jonnekin ruudulla, on ystävällistä siirtää fokus sinne. Muutoin saattaa ruudunlukijalla sivua käyttävä epäillä jo, että mitään ei tapahdu, kun mitään ei tapahdu. Toki myös 2. kohdassa mainitsemani avautuvan alivalikon voisi toteuttaa fokusta siirtämällä, jos ei millään tahdo laittaa sitä lähdekoodissa oikeaan kohtaan. Parhaassa tapauksessa sille sokealle käyttäjälle voi myös kertoa, että hei muuten, siirrettiin sinut sivulla toiseen paikkaan (tähän on olemassa tapoja, jotka ei ilman ruudunlukuohjelmaa näy).
5. Alt-tekstit merkityksellisissä kuvissa
Nykyään on kivaa ja näppärää sekin, että kuvasta voi tehdä "linkin", jota painamalla pääsee jonnekin. Kivaa ja näppärää joo, kunhan muistetaan ne alt-tekstit. Jos sivulle on ihan vaan kuvitukseksi läntätty söpö kuva koirasta, ei siinä ole välttämättä tarpeen olla kovin tarkkaa alt-tekstiä koiran rotuineen, mutta jos kuva on merkityksellinen ja etenkin jos se toimii linkkinä, alt-tekstit ovat äärimmäisen tärkeitä. Kuvitelkaa tilanne, jossa verkko-ostoksen maksamista varten eteen ilmestyy parikymmentä mustaa ruutua, joista valita oikea pankki. No ei nyt ehkä mustia ruutuja, mutta kuvia, joiden alt-tekstinä on "select". Eli siis parikymmentä select-linkkiä, joista sitten arpoa se oikea. Tässä tapauksessa alt-tekstit tyyliin "Osuuspankki", "Nordea", "S-pankki" helpottaisivat elämää melkoisesti.
*******
Presikseni Fraktiolla löytyy YouTubesta. Siellä on reilun tunnin verran asiaa saavutettavuudesta – vaikka silloin taisin vielä puhua väärin esteettömyydestä.
*******
Ruudunlukuohjelmia ja niillä nettisivujen käyttöä on helppo kokeilla. Kaikille alustoille löytyy ilmaisia ohjelmia:
Ei kommentteja:
Lähetä kommentti