Kirjoittaja: Jari Mikola, Näkövammaisten Keskusliiton atk-kouluttaja.
Sisältö
- Erilaisia näkövammoja
- Kuinka näkövammainen surffaa
- Navigointivalikko
- Käsittämättömät linkit
- Kuvat
- Fontit
- Animaatiot ja Flash
- Pienistä parannuksista on iso apu
Erilaisia näkövammoja
Erittäin karkeasti ajatellen näkövammaiset voidaan jakaa kolmeen ryhmään: heikkonäköiset, vaikeasti heikkonäköiset ja sokeat. Heikkonäköisten tietokoneen käyttö saattaa helpottua jo pelkän isomman näytön ansiosta ja/tai Windowsin ulkoasua muokkaamalla. Jos nämä toimenpiteet eivät riitä, tarvitaan suurennusohjelma. Suurennusohjelma suurentaa nimensä mukaisesti näytölle tulevat tekstit, pikakuvakkeet ja niin edelleen.
Vaikeasti heikkonäköisille paras apuväline voi olla puhetuellinen suurennusohjelma. Tällöin suurennusta voi käyttää näytöllä liikkumiseen ja tekstin seuraamiseen. Mutta usein esim. silmien rasittumisen takia pidempien tekstien lukeminen on hankalaa. Tällöin suurennusohjelman puhetuki auttaa, kun pidemmät tekstit, dokumentit tai muut sellaiset voi kuunnella puhesyntetisaattorin kautta.
Sokeat tarvitsevat apuvälineekseen ruudunlukuohjelman sekä puhesyntetisaattorin ja/tai pistenäytön. Ruudunlukuohjelma on softa, joka tutkii näytönohjaimelta näytölle tulevaa dataa ja tulkitsee sen sitten joko puheeksi ja/tai pistekirjoitukseksi pistenäytölle. Pelkällä puhesyntetisaatorilla tai pistenäytöllä ei tee mitään â?? tarvitaan ruudunlukuohjelma.
Kuinka näkövammainen surffaa
Ehkä merkittävin ero Internet-sivujen selailussa niin sanottuun normaaliin on, että pelkän puheen tai pistenäytön varassa toimiva näkövammainen joutuu lukemaan sivun rivi kerrallaan. Nopea ”vilkaisu” sivun sisältöön on käytännössä lähes mahdotonta. Toki ruudunlukuohjelmat sisältävät erinäisiä navigointikomentoja, joilla sivun selailu nopeutuu. Näitä voi yleensä hyödyntää kuitenkin vasta, kun sivu on jo tuttu eli käyttäjä tietää, mitä ja mistä kohti sivua haluttu tieto löytyy.
Kun mennään jollekin Internet-sivulle niin, että käytössä on puhesyntetisaattori, se alkaa lukea sivun sisältöä heti. Aluksi puhe kertoo montako otsikkotasoa, kehystä ja linkkiä sivulla on. Sitten aletaan lukea tekstiä. Tämän voi toki pysäyttää ja lukea sivua sitten ”omaan tahtiin”.
Apuvälineitä käytettäessä surffailu ei siis ole ihan ongelmatonta. Seuraavaksi käydään läpi lyhyesti yleisimmät ongelmakohdat ja annetaan vinkkejä niiden parantamiseksi näkövammaisia käyttäjiä silmällä pitäen.
Navigointivalikko
Usein törmää sivuun, jonka yläosassa on muuttumaton päävalikko. Kun päävalikosta valitaan jokin linkki, valikko pysyy paikallaan, mutta sen alle tulee linkin avaamana teksti. Ruudunlukuohjelma aloittaa lukemisensa kuitenkin taas sivun yläreunasta höpöttäen ensin päävalikon; koneenkäyttäjän kärsivällisyyden riitettyä uusi tekstikin luetaan aikanaan. Näkevällehän tämä systeemi on kätevä: voi aina tekstin luettuaan vierittää päävalikon näkyviin ja klikata uuden aihealueen luettavakseen. Jonkinlainen kompromissi voisi olla ”Suoraan sisältöön” â??tyyppinen linkki päävalikon alussa. Tällöin ruudunlukua käyttävä voi heti sivun alusta valita kyseessä olevan linkin ja saada kuullakseen linkistä avautuneen tekstin.
Käsittämättömät linkit
Toinen yleinen puhesyntetisaattoria tai pistenäyttöä käyttävän ongelma ovat käsittämättömästi nimetyt linkit. Koska ruudunlukuohjelmat kaivavat linkkien selitykset lähdekoodista, käyttäjä saattaa saada korviinsa tai sormiinsa esim. tällaisia linkkejä (leikattu K-raudan sivuilta):
images/C536F64CA46B41E7A0C2BF72D16D4CC3
images/02700DCFFEC243AB9CEFC4F9C104F518
images/BE5551E025BD43D68F55B896597A8107
images/44A66ADB83D140CC87E8B642D9851674
Pitsinnyplääjäkään ei ota selvää siitä, mitä moisen linkin takaa mahdollisesti löytyy!
Linkkien nimeäminen on tärkeää myös toisesta syystä. Ruudunlukuohjelmissa on niin sanottu linkkilistatoiminto. Tällä toiminnolla sivulta tiputetaan kaikki muu teksti ja tavara pois. Pelkästään linkit kerätään listaksi, jossa käyttäjä voi navigoida mm. nuolinäppäinten, mutta myös linkin alkukirjaimen avulla. Mikäli linkit ovat numerosarjoja, alkavat >-merkillä tai ovat tyyliä ”Lue lisää”, alkukirjaimesta on suunnilleen yhtä paljon hyötyä kuin lasisilmästä avaimenreiässä.
Kuvat
Kuvien käyttöä nettisivuilla ei mitenkään tarvitse karsastaa. Kuvia voi käyttää, kunhan muistaa muutaman perusprinsiipin. Kuvissa tulisi aina olla alt-teksti, joka valottaa kuvan sisältöä. Alt-tekstissä ei tarvitse ruveta runoilijaksi, vaan riittää maininta tyyliin ”Kuvassa polkupyörä”. Jos kuvia käytetään linkkeinä, kannattaa jälleen kiinnittää huomiota nimeämiseen. Puhtaasti koristeluun käytetyt kuvat on parasta asettaa CSS:n avulla, mutta jos se ei ole mahdollista, niissä kannattaa jättää alt-attribuutti tyhjäksi, alt=""
.
Fontit
Heikkonäköisiä Internetin käyttäjiä ajatellen on erinomaisen tärkeää, että sivun fonttia ei ole määritelty absoluuttiseksi, vaan sen voi halutessaan muuttaa. Sivuja ei myöskään saisi optimoida jollekin tietylle resoluutiolle.
Animaatiot ja Flash
Ruudunluku alkaa lukea sivua alusta aina, kun sivu päivittyy. Tästä syystä automaattipäivitykset, flash-animaatiot ja muut vastaavat kilkkeet ovat myrkkyä. Jos sivuille halutaan esimerkiksi raikas flash-animaatioesitys, mukavaa olisi, jos sen voisi käynnistää linkistä tai painikkeesta sen sijaan, että se pörähtää liikkeelle automaattisesti sivulle laskeuduttua.
Pienistä parannuksista on iso apu
Näkövammaisille saavutettavien verkkosivujen tekeminen ei ole hankalaa ja vaativaa, vaikka monenlaisista selailuun käytettävistä apuvälineistä ja laitteista (joita moni suunnittelija ei ole koskaan nähnytkään) voisi päätellä toisin. Standardinmukainen merkkaus takaa parhaimmat lopputulokset, mutta jo edellä lueteltujen pienten asioiden huomioiminen helpottaa näkövammaisen liikkumista internetissä merkittävästi – muista käyttäjäryhmistä puhumattakaan.
Mainio kirjoitus, lisää tällaista kiitos. Kysymyksiä ja kommentteja:
Lukeeko linkkilistatoiminto linkkien titlet? Usein ”lue lisää” -tyyppistä tekstiä käyttäessä on näkevälle turhaa toistoa kerrata mikä linkin takana jatkuu, joten sillä ei haluaisi kuormittaa sivua. Title olisi luonteva paikka tällaiselle lisätiedolle.
Olisiko ”Kuvassa polkupyörä” tekstiä parempi vaihtoehtoteksti pelkkä ”polkupyörä”. Kai ruudunlukuohjelma kuitenkin mainitsee että kyseessä on kuva, joten maininta siitä olisi vain toistoa?
On toisaalta hyvin vaikea käsittää, mitä informaatioarvoa tuolla esimerkin polkupyörällä olisi missään yhteydessä. Jos kuva olisi vaikka tuotekuva polkupyöräuutuudesta, eikö teksti olisi huomattavasti parempi, jos siinä sanottaisiin jotain tyyliin: ”Menopeli X:ssä on paksut renkaat ja käyrät sarvet”, eikä ”polkupyörä”?
Ja osastolla valivali: pitsinnyplääjä on paitsi outo kielikuva niin myös yhdyssana. Samoin avaimenreikä, ellei viitata itse avaimessa olevaan reikään. Tärkeitä asioita.
Jari Mikola toivottavasti vastaa kysymyksiisi tarkemmin, mutta kommentoin lyhyesti titlen käyttöä.
Käsittääkseni kaikki puheselaimet eivät tuota tue. Lisäksi olen ymmärtänyt että esimerkiksi Jawsin 4.5 versiosta niiden lukeminen on oletusarvoisesti pois päältä.
Toinen ongelma title-attribuutin käytössä on ilman hiirta surffailevat henkilöt. Title-teksti näytetään vain silloin kun hiiren kursori viedään linkin päälle. Tieto jää saamatta silloin kun linkki valitaan näppiksen avulla.
Ja lisää hyviä juttujakin pitäisi olla tulossa 😉
Ihan käsittämätön oletusasetus, ei voi muuta sanoa.
Jälkimmäisestä ongelma tulee vain tilanteissa, joissa titleen on pantu liian oleellista tietoa. Titlenhän tulisi olla vain lisätietoa, ei elintärkeää. Mitään takuuta ei edes ole, että hiirenkään käyttäjä pitäisi kursoria linkin päällä tarvittavan pitkään.
Toki näin. Jossain muistan törmänneeni kompromissiin, jossa etusivulla olevassa linkkilistassa käytetään linkeissä title-attribuuttia ja linkkiarkistossa title on linkin perässä aukikirjoitettuna.
Konehuoneesta sellaisia terveisiä, että Joskun mainitsema tapa näyttää linkkien kuvaukset on tarkoitus saada aikaiseksi tälläkin sivustolla. Se vaatii julkaisualustan muokkausta. Onko lukijoiden joukossa ketään WordPressin lisäosista ymmärtävää?
Yhdyssanat korjattu.
Enpä tiedä noista titleistä. Mikäli se toteutetaan siten, että mentäessä hiirellä linkin päälle, title tulee esiin, se on ruudunlukuohjelmien kannalta huono juttu. Mutta ainakin JAWS:in linkkilistatoiminnossa on mahdollista puhuttaa tällaisen ”Lue lisää”-linkin osoite kokonaisuudessaan tilariviltä. Useimmiten tästäkään ei tosin ole hyötyä, kun nämä osoitteet saattavat olla valtaosaltaan numerosarjoja.
Tuo maininta polkupyörästä kuvassa ei nyt ehkä ollut paras mahdollinen, mutta tarkoitin sanoa, että kunhan nyt olisi edes jokin maininta siitä, mitä kuvassa on. Tietysti on aina parempi, jos kuvaa on selitetty laajemmin. Ajattelin vaan olla masentamatta sivujen tekijöitä heti kättelyssä (tosin kättely viittaa jälleen atk-sanastossa ihan muualle, joten anteeksi kielikuva!:-) Totta on sekin, että ruudunluku kertoo kyseessä olevan grafiikan. Ei siis tarvitse kirjoittaa ”Kuvassa wanha Monark”, pelkkä ”Wanha Monark” riittää, koska syntetisaattori kertoo, että ”Graphic Wanha Monark”.
Ja pahoittelut mahdollisesti ontuvista kielikuvista samoin kuin yhdyssana- ym. kielivirheistä (kiitokset muuten korjauksista). Alkaa olla jo aikaa noista pilkkusääntöjen opiskeluista. Ja kun tahtoo tulla näppylöitä Wordista ja sen oikoluvusta, niin näin pääsi käymään.
Hei, ja kiitokset hyvästä artikkelista.
Haluaisin kysyä, että mitä merkitystä näin selatessa on esimerkiksi pystypalkeilla, |? Jos kyseessä on navigointi, joka tapahtuu kuvalinkkejä käyttäen (joissa on teksti, siis sekä kuvassa että alt-attribuutissa), mitä syytä olisi laittaa alt-teksteihin pystypalkkia, niinkuin meille tehdyssä esteettömyystutkimuksessa kehotettiin tekemään linkkien erottamiseksi toisistaan? Tauottaako se linkkien lukemista? Tulisiko tällaisen alt-tekstin olla |teksti|, teksti| vai mikä?
Tähän mennessä on jäänyt mainitsematta html-taulukot, jotka ovat joko täysin tarpeettomia, jos ne voidaan korvata tyylitiedostoilla, tai sitten niiden merkkauksessa on puutteita. Keskityn tässä jälkimmäiseen.
Ensinnäkin taulukoiden rivi- ja sarakeotsikot pitäisi merkitä
<th>
-tägeillä. Näihin puolestaan pitäisi määrittääscope
-attribuutit, joilla ilmaistaan otsikon ”vaikutusalue”, esim.<th colspan="2" scope="colgroup">
. Tällöin ruudunlukuohjelma osaa yhdistää asianmukaiset otsikot tiettyyn soluun, eikä näkövammaisen tarvitse arvailla tai laskea, minkä otsikon tai otsikoiden alle kyseinen solu kuuluu. Malliesimerkki huonosti merkitystä taulukosta on Matkahuollon lippuhinnasto, jossa<th>
-tägien ja oikeanlaistenscope
-attribuuttien avulla taulukko olisi täysin saavutettava.Scope
-attribuutin arvo voi olla jokin seuraavista:col
(yksi sarake),colgroup
(useita sarakkeita),row
(yksi rivi) tairowgroup
(useita rivejä).Totta, taulukoiden merkkauksessa on usein puutteita.
Mitä
col
-attribuutin käyttöön tulee, niin Roger Hudsonin artikkelissa vihjataan id:n olevan (ainakin kirjoitushetkellä) parempi tapa:Hei.
Kiitos hyvästä artikkelista.
Käytän Linuxia,sieltä löytyy hyvä helppokäyttinen suurennusohjelma.Luen verkkolehtiä ja katselen ottamiani valokuvia. Ei tällä ohjelmalla pysty lukemaan maastoutunutta tekstiä.Mutta muuten olen tyytväinen sillä pystyn tällä maksamaan laskut varaamaan matkat ym.
Ari Harjula
ari_ha@welho.com