Web-sivustojen kehittäminen kognitiivisista ongelmista ja oppimisvaikeuksista kärsiville

Kirjoittajat: Roger Hudson, Russ Weakley ja Peter Firminger. Käännös: Yoji Hirabayashi ja Marjut Mutanen.

Artikkeli on julkaistu alunperin Juicy Studio -sivustolla nimellä Developing sites for users with Cognitive disabilities and learning difficulties.


Yhteenveto

Web-sisällön esteettömyyttä pohdittaessa keskitytään usein vain näkövammaisiin. Kognitiivisista häiriöitä ja oppimisvaikeuksista kärsivät jäävät yleensä vähemmälle huomiolle.

Tämä Roger Hudsonin, Russ Weakleyn ja Peter Firmingerin artikkeli paneutuu ongelmiin, joihin käyttäjä saattaa törmätä webissä. Artikkeli tarjoaa hyödyllisiä ja käytännöllisiä ehdotuksia siihen, kuinka sivustoja voidaan kehittää saavutettaviksi myös kognitiivisista vammoista ja oppimisvaikeuksista kärsiville.

Sisältö

Johdanto

Kognitiivisista vammoista ja oppimishäiriöistä kärsivät ovat yhteiskunnan suurin esteellinen käyttäjäryhmä. Silti tämä käyttäjäryhmä usein unohdetaan web-sivuston esteettömyyttä suunniteltaessa.

Kognitiiviset vammat ja oppimisvaikeudet tuntuvat kattavan niin monia erilaisia tiloja, että web-suunnittelijoiden on usein vaikeaa tunnistaa niistä kärsivien henkilöiden tai ryhmien erityistarpeita.

Useat erilaiset rajoitteet voivat vaikuttaa henkilön kykyyn päästä sivustolle ja käyttää sieltä löytyvää informaatiota. Esimerkkejä:

  • Kognitiiviset heikkoudet, joihin sisältyvät mm. muistin havaintokyvyn, ongelmien ratkomisen, käsitteellistämisen ja tarkkaavaisuuden heikkeneminen. Nämä voivat johtua monista eri asioista kuten esimerkiksi henkisestä jälkeenjääneisyydestä, autismista, aivovauriosta, Parkinsonin taudista, Alzheimerin taudista tai korkeasta iästä.
  • Oppimisvaikeudet voivat myös vaikuttaa muistiin, havaintokykyyn, ongelmienratkaisukykyyn ja käsitteellistämiskykyyn monin tavoin. Oppimisvaikeuksiin sisältyvät mm. sellaiset lukemisvaikeudet kuten lukihäiriö, laskennalliset, päättelykyvyn ja organisointikyvyn puutteet ja sanattoman oppimisen ongelmat. Nämä yhdistetään joskus myös tarkkaavaisuus- ja ylivilkkaushäiriöön, ADHD:hen (Attention Deficit Disorder and Hyperactivity).

Web-kehittäjälle ongelmia aiheuttaa lisäksi se, että yksittäisten käyttäjien tarpeet vaihtelevat suuresti. Onkin tavallista, että henkilöllä joka kärsii kognitiivisista vaikeuksista yhdellä osa-alueella, jokin toinen osa-alue on vahva. Esimerkiksi henkilöllä, joka on erinomainen lukemaan, voi olla huomattavia vaikeuksia ymmärtää kuinka dokumentti on organisoitu tai hän häiriintyy helposti sivulla vilkkuvasta pienestä animoidusta kuvasta.

Pystyykö web sitten vastaamaan kaikkien ryhmien erilaisiin tarpeisiin? Todennäköisesti kyllä, mutta erilaisilla sivustoilla.

Web voi tuottaa huomattavaa mielihyvää ja auttaa henkilöitä, jotka kärsivät erilaisista, joskus melko suuristakin, kognitiivisista häiriöistä. Nyt jo suljettu Peepo Project -sivusto tarjosi laajalti resursseja ja ideoita siihen, kuinka vaikeasti oppimishäiriöisten selailua ja itsenäistä webin käyttöä voidaan helpottaa.

Tämä artikkeli keskittyy pääasiallisesti siihen, miten webiä voidaan parantaa sellaisen henkilön kannalta, joka kykenee itsenäisesti selailemaan sivustoja ja niiden tekstisisältöä. Erityisesti artikkelissa annetaan yksinkertaisia neuvoja, joiden avulla voidaan parantaa sivustojen saavutettavuutta silloin, kun henkilöllä on vaikeuksia lukea ja ymmärtää tekstisisältöä.

Artikkelissa An Accessibility Frontier: Cognitive disabilities and learning difficulties [en] käsitellään aihetta yksityiskohtaisemmin.

1. Sisällön kanssa työskenteleminen

1.1 Selkeä ja helppo sisältö

Hyvin kirjoitettu sisältö tekee sen saavuttamisesta helpompaa kaikille, myös niille henkilöille, jotka kärsivät kognitiivisista häiriöistä ja oppimisvaikeuksista.

  • Pidä huolta siitä, että informaatio on hyvin jäsennetty.
  • Pidä sisältö lyhyenä ja yksinkertaisena.
  • Tarjoile informaatio pieninä annoksina, yksi idea per kappale.
  • Tarjoa lisäinformaatio asiasta mieluummin listamuodossa kuin pitkänä kappaleena tekstiä.
  • Käytä mielekästä otsikointia ja väliotsikointia.
  • Vältä kirjoitus- ja kielioppivirheitä.
  • Tarjoa teknisille termeille ja lyhenteille selitykset.

1.2 Optimaalinen rivin pituus

Monille käyttäjille pitkien tekstirivien lukeminen on vaikeaa. Lukemisvaikeuksista kärsiville henkilöille pitkien rivien lukeminen saattaa muodostaa jopa ylitsepääsemättömän esteen. Näyttöjen resoluutioiden kasvaminen mahdollistaa myös suurempien kirjainmäärien mahduttamisen riville, vaikka mielekäs fonttikoko vaihtelee lukijasta riippuen. Tästä johtuen parasta rivin pituutta on mahdotonta määritellä, mutta nyrkkisääntönä voidaan pitää sitä, ettei rivin pituus ylitä 70-80 merkkiä. Tekstille tulisi myös määritellä reunukset vasemmalle ja oikealle.

1.3 Tekstin tasaus molempiin reunoihin

Tekstin tasaaminen molempiin reunoihin vaikeuttaa lukemista käyttäjille, joilla on lukemisvaikeuksia. Epäsuhtainen sanojen väli kumpaankin reunaan tasatussa tekstissä saattaa aiheuttaa ns. rivers of white -ongelman (ts. tekstikappaleiden sisälle näyttää muodostuvan valkoisia uomia), jolloin lukeminen vaikeutuu ja joissain tapauksissa jopa estää sen. Yksinkertaisin ratkaisu ongelmaan on välttää tasausta molempiin reunoihin.

1.4 Käänteinen pyramidimalli

Yksinkertainen keino tehdä sisällöstä saavutettavampaa on käyttää käänteistä pyramidimallia. Aloita asian ja tulosten yhteenvedolla tai lyhyellä esittelyllä ja tarjoa sen jälkeen aihetta tukevaa informaatiota ja taustatietoja. Tällöin lukija voi helposti, koko sivua läpikäymättä, päättää haluaako tutustua kirjoitukseen tarkemmin.

2. Sisällön näyttäminen ja piilottaminen

Joillekin käyttäjille, etenkin kognitiivisista häiriöistä ja oppimisvaikeuksista kärsiville, suuri määrä tekstiä saattaa toimia esteenä sisällön saavuttamiselle. Tämän potentiaalisen ongelman vaikutusta voidaan vähentää antamalla käyttäjälle mahdollisuus vaikuttaa sivulla olevan informaation määrään. On olemassa monia keinoja antaa käyttäjälle mahdollisuus valita joko yksityiskohtainen tai yksinkertainen versio sisällöstä.

2.1 Pitkä ja lyhyt sisältö

Tämä metodi antaa käyttäjälle mahdollisuuden valita sivustolta joko lyhyt tai pitkä versio sisällöstä. Käyttäjä, joka valitsee lyhyen version voi selailla koko sivustoa käyttäen vain lyhytversioita sivuista. Tarvittaessa käyttäjä voi valita vaihtoehtoisen pidemmän version.

Tätä tapaa käytettiin Guardianship Tribunal -sivustolla. Sivuston käyttäjätestaukseen otti osaa laaja joukko käyttäjiä, joista osa kärsi kognitiivisista ja oppimisvaikeuksista. Useimmat pitivät mahdollisuutta valita lyhyt tai pitkä versio sisällöstä hyödylliseksi. Esimerkiksi henkilö, joka kärsi lukihäiriöistä, pystyi valitsemaan helpommin luettavan ja ymmärrettävän lyhytversion. Sosiaalityöntekijät ja lääkärit käyttivät myös lyhytversiota oletusarvoisesti, koska sen avulla he pystyivät hakemaan nopeasti etsimänsä ja tarvitsemansa tiedon.

2.2 Listamerkkien laajentaminen

Edellä mainitun kaltaisessa menetelmässä käytetään yksinkertaisia lauseita tai otsikoita sisällön yleiskuvan luomiseen. Lauseista muodostetaan lista, jonka kohdat toimivat avaimina lisätietoon. Kun käyttäjää valitsee yhden kohdan listalta, siihen liittyvä laajempi tieto esitetään ko. kohdan alla.

2.3 Näytä-piilota-listamerkit

Tässäkin menetelmässä muodostetaan yksinkertaisten lauseiden tai otsikoiden lista. Laajennettua sisältöä ei kuitenkaan näytetä heti jokaisen listamerkin alla, vaan koko listan alla. Tämä vaihtoehto on parempi silloin, kun käsitellään pidempiä tekstikappaleita.

2.4 Kalvosarjojen käyttö

Informaation tarjoaminen webissä käyttäjille, jotka kärsivät vakavammista kognitiivisista häiriöistä, vaatii erilaisen lähestymistavan. Eräs keino tarjota tietoa on esittää se heille kalvosarjana, jossa jokaisessa kalvossa käsitellään yksi asia tai kiinnostuksen kohde. Tämä mahdollistaa tiedon tarjoamisen selkeinä, helposti saavutettavina paloina, jotka käyttäjä voi käydä läpi itse valitsemaansa tahtiin.

3. Luettavuuden ja klikattavuuden parantaminen CSS:n avulla

Eräs CSS:n (Cascading Style Sheets) suurimmista eduista on se, että sen avulla voidaan muokata sisällön esitysasua puuttumatta itse rakenteeseen. Tässä muutama CSS:n avulla toteutettu keino parantaa sisällön saavutettavuutta:

3.1 Suurennettu rivin korkeus

Jotkut käyttäjät kokevat suurennetun rivin korkeuden parantavan kappaleen luettavuutta.

3.2 Kappaleen loppuun enemmän marginaalia

Yleensä jokaisen kappaleen perässä on tyhjä rivi. Sen suurentaminen puoleentoista tai kahteen riviin saattaa parantaa kappaleen luettavuutta.

3.3 Hover-efekti linkeissä

Joillain henkilöillä saattaa olla vaikeuksia erottaa linkkejä tavallisesta tekstistä. Linkeille voidaan asettaa hover-toiminto, joka muuttaa linkkitekstin väriä kun hiiri viedään sen päälle.

3.4 Linkkien alleviivaus border-bottom-ominaisuudella

Normaali linkkitekstin alleviivaus saattaa joskus vaikeuttaa tekstin lukemista, etenkin kun kyseessä ovat sellaiset kirjaimet, joissa on alapidennys (esim. j, p, q, g). Alleviivauksen etäisyyttä tekstiin voidaan kontrolloida korvaamalla normaali alleviivaus border-bottom-ominaisuudella.

3.5 Suurennettu aktiivinen alue linkeissä

Joillain henkilöillä, erityisesti niillä, joilla on motorisia rajoitteita, saattaa olla vaikeuksia linkkien klikkaamisessa. CSS:n avulla aktiivista aluetta voidaan suurentaa.

3.6 Hover-ominaisuuden käyttö kappaleissa, lista-elementeissä ja taulukon soluissa

Joillain lukuvaikeuksista kärsivillä henkilöillä on vaikeuksia hahmottaa missä kohdassa sivua he ovat. Hover-ominaisuuden käyttö kappaleissa, lista-elementeissä ja taulukon soluissa antaa käyttäjälle mahdollisuuden käyttää hiirtä paikan merkitsemiseen.

Valitettavasti Internet Explorer ei tue kyseistä hover-ominaisuutta kappaleissa, lista-elementeissä tai taulukkoriveissä. Mikäli tätä menetelmää halutaan kuitenkin käyttää, sitä voidaan emuloida Internet Explorerissa JavaScriptin avulla (käyttämällä Dean Edwardsin IE7:aa [en]).

3.7 Alleviivatut kappaleet

Eräs menetelmä lukemisvaikeuksien helpottamiseksi on aktiivisten kappaleiden tekstin alleviivaaminen. Ideana on tarjota eräänlainen virtuaalinen viivain, joka näkyy jokaisen tekstirivin alla ja helpottaa siten käyttäjän katseen kohdentamista kulloinkin kyseessä olevalle riville.

Eräs tämän tekniikan mahdollisista ongelmista on, että jotkut käyttäjät saattavat sekoittaa alleviivatun kappaleen ja linkit keskenään. Käyttämällä CSS:ia voi tarjota erilaisia alleviivaustyylejä, kuten esimerkiksi punaista pisteviivaa, jolloin tämänkaltaisen sekoittamisen riski vähenee.

3.8 Käänteiset värit

Joidenkin henkilöiden on helpompi lukea tekstiä, kun värit vaihdetaan käänteisiksi niin, että teksti on vaaleaa tummalla pohjalla.

3.9 Taustavärin kirkkaus

Joillekin käyttäjille ongelmia aiheuttaa liian kirkas taustaväri, joka vaikeuttaa lukemista. Tämä voidaan korjata käyttämällä luonnonvalkoista tai vaalean harmaata taustaväriä, joka vähentää kirkkautta.

4. Sisällön ja esitysasun kontrollointi

Monia artikkelissa käsiteltyjä ideoita voidaan käyttää pelkästään tarjoamalla käyttäjälle mahdollisuus valita sisällöstä sopivin esitystapa.

Kun CSS yhdistetään joko JavaScriptiin tai serveripäässä tapahtuvaan skriptaukseen, voi suunnittelija sisällyttää joitain ehdotettuja parannuksia (esimerkiksi linkkien alleviivaus ja laajennettu linkkialue) oletusarvoiseen esitystapaan ja tarjota käyttäjälle mahdollisuutta vaikuttaa myös muihin elementteihin:

  • Sisältö: pitkä tai lyhyt versio.
  • Fontin koko: mahdollisuus suurentaa tai pienentää tekstin kokoa.
  • Luettavuus: vaikuttaa kappaleiden väliseen tilaan ja/tai tarjoaa hover-ominaisuuden kappaleille.
  • Värit: erilaiset väriyhdistelmät, mukaan lukien käänteiset värit ja taustavärin kirkkaus.
  • Rivin pituus: kapea tai leveä asettelu.
  • Rivin korkeus: vaihtoehtoja rivin korkeuden määrittelyyn niin leipätekstille kuin linkeillekin.

Päätelmät

Artikkelin esimerkkejä ei ole tarkoitettu lopullisiksi vastauksiksi ongelmiin, joita mainituista ongelmista kärsivät saattavat verkossa kohdata. Esimerkit ovatkin lähinnä ehdotuksia, joita web-kehittäjä, joka on kiinnostunut saattamaan sisältöä mahdollisimman laajan yleisön saavutettavaksi, voi kokeilla. Joitain tekniikoista on testattu käytännössä, mutta toiset ovat vain yksinkertaisia ideoita, jotka perustuvat teoriaan ja aavistukseen.

Lisäluettavaa

Muut käännösversiot

Ruotsi
Ruotsinkielisestä käännöksestä vastaa Johan Sundsrom.
Italia
Italiankielisestä versiosta vastaa Livio Mondini.

Viisi virhettä bändien ja levy-yhtiöiden sivuilla

Kirjoittaja: Merlin Mann, käännös: Marjut Mutanen.

Artikkeli on julkaistu alun perin 43 Folders â??blogissa otsikolla Five Mistakes Band & Label Sites Make.


Myönnettäköön, että tämä aihealue ei ole sitä, mitä näillä sivuilla yleensä käsitellään, mutta suokaa minulle tämän julkisen viestin lähettäminen kaikkien internetissä roikkuvien musiikkifanien puolesta â?? viisi virhettä, joita bändien ja levy-yhtiöiden sivuilla tehdään (ja muutama vinkki niiden korjaamiseksi). Yhden fanin näkökulma.

Liikaa Flashia

Okei, kyllä minä sen tajuan; te olette luovia. Mahtavaa. Mutta samalla haaskaatte kallisarvoista aikaani, kun avuttomana odotan, että web-suunnittelijanne tanssivat makkarat lakkaisivat latautumasta. Pahin vitsaus kaikista on luultavasti se, että suurin osa Flash-sivuista estää fanejanne linkittämään artistin tietoihin, levyyn tai biiseihin. Faninne yrittävät houkutella ihmisiä kassakoneiden ääreen, mutta te vain sinnikkäästi vaaditte heitä katsomaan nukketeatteria ennen kuin he pääsevät edes pahuksen kauppaan sisälle.

Vinkki: Käytä flashia niin kuin käyttäisit korianteria â?? säästäväisesti yhden vaikuttavan efektin luomiseen. Kukaan ei halua syödä kulhollista korianteria, eikä kukaan halua myöskään animoitujen nakkien marssia silloin, kun täytettävänä on todella tärkeä tehtävä. Rakenna myös sivut sellaisiksi, että mihin tahansa linkittäminen on superhelppoa. Käytä ankkureita alasivuille, ja ilmaise selkeästi miksi ne ovat siellä.

Kehno tai olematon mp3-metadata

Jos lataan hittisinglenne mp3-version ja siinä kerrotaan, että kyseessä on ”Artistin” esittämä ”Biisi” levyltä nimeltä ”Levy”, mokasitte jo pahemman kerran. Minulla ei ole mitään mahdollisuuksia löytää teitä uudelleen. Sama pätee myös tiedostojen nimeämiseen. Muista: ihmiset lataavat kymmeniä tai satoja kappaleita kerrallaan, joten on aika epätodennäköistä, että he muistavat mistä Biisi%2007.mp3 on peräisin.

Vinkki: Täytä jokainen mahdollinen ID3-tietokenttä oikealla, riittävällä informaatiolla. Tämä on levynkannen digitaalinen versio, joten anna teineille jotain luettavaa samalla kun he rokkaavat biisienne tahtiin. Perustiedot biisistä eivät paljoa vaadi, mutta harkitse myös kansitaiteen, kappalenumeron, säveltäjätietojen, tyylilajin ja julkaisuvuoden lisäämistä, ja â?? siis hei â?? lisää myös linkki verkkosivuillenne sekä sähköpostiosoite kommenttikenttään. Mp3-tiedoston julkaisu ilman metadataa on sama kuin jos S-marketin pomo kieltäisi pullanmaistatuskonsulenttia kertomasta asiakkaille mistä niitä pullapitkoja kaupasta löytää.

Turhan daideellista

Ihmiset tulevat sivuillenne siksi, että haluavat saada lisää tietoa bändistä ja musiikista â?? eivät saadakseen opastettua kierrosta designerin/lankomiehen Photoshop-taidoista. Älä kikkaile ulkoasun, osioiden nimeämisen tai navigoinnin kanssa. Älä pakota vierailijoita ratkaisemaan Rubikin kuutiota päästäkseen lukemaan lyriikoita.

Vinkki: Anna musiikin olla pääosassa ja tarjoa nopea pääsy sinne, mitä varten kävijät sivuille tulivat: 1) mp3:t/ladattavat tiedostot, 2) lyriikat/diskografia, 3) keikkapaikat, 4) yhteystiedot, 5) mistä näitä voi ostaa (mieluiten kehotus ostamiseen verkossa välitöntä lataamista silmällä pitäen). Kuvat, vanhat keikkojen biisilistat ja päiväkirjat â?? kaikki materiaali, joka kuvastaa bändin persoonallisuutta â?? on sekin toki hyvää, mutta ne ovat silti toissijaisia edellä lueteltujen asioiden kertomiseen ja päivittämiseen verrattuna. Säästä taiteelliset pläjäykset siihen kun ennen pitkää lakkaat musisoimasta ja ryhdyt harrastamaan öljyvärimaalausta.

Ei hakua

On erittäin paljon mahdollista, että sivuillenne tulevilla faneilla on tähtäimessään jotain erityistä: yleensä säkeistö jostain biisistä tai jonkin epämääräisen kappaleen nimi. Jos sivustolla on enemmän kuin kourallinen sivuja, tarjoa käyttäjille selkeästi nimetty hakukenttä (tai linkki hakutoimintoon) jokaisella sivulla, ja testaa sen toiminta. Varmista, että haku toimii ja tuo kävijöitä suosituimmille sivuillenne ilman haeskelun tarvetta.

Vinkki: Googlella on ilmainen sivustokohtainen hakupalvelu. Se ei ole täydellinen tai sataprosenttisesti ajan tasalla, mutta se toimii, on ilmainen ja aina parempi kuin ei mitään.

Yhdensuuntainen kommunikointi (tarjoiltuna yhdellä tavalla)

Faninne eivät ole tyhjiä astioita tai pelkkiä (uh) promootiotiimejä (street team); heilläkin on sanansa sanottavana. Näytä selkeä sähköpostiosoite yhteydenottoa varten (ja erilliset osoitteet lehdistölle ja keikkatarjouksille, jos olette kuuluisia ja vaikkette olisikaan). Harkitse myös erillistä fanien keskusteluareenaa ja sähköpostilistoja kiertue- ja julkaisupäivistä tiedottamiseen. Lue sähköpostia ja vastaa siihen.

Vinkki: Harkitse RSS-syötteen luomista eniten päivittyville sivuille. Sloan-yhtyeen sivuilla tämä on tehty erittäin hyvin.

Yleisesti ottaen: älä anna web-suunnittelijasi rakentaa esittelysivustoa fanien ja liiketoiminnan kustannuksella. Kysy faneiltasi mitä he haluavat, seuraa kuinka he käyttävät sivujanne ja anna heille sitä, mistä he pitävät ilman turhia kotkotuksia.

Onko sinulla avautumisen aihetta musiikkisivustoista?

Kääntäjän epilogi

Äkkipäätä voisi kuvitella, ettei musiikkisivustojen käyttäjäystävällisyyttä käsittelevällä artikkelilla ole juuri tekemistä saavutettavuuden ja Saavutettava.fi:n kanssa, mutta mietitäänpä uudelleen. Terveet yksilöt eivät ole ainoita, jotka musiikkia kuuntelevat ja harrastavat. Internet tarjoaa merkittävän viestintäkanavan juuri heille, joiden mahdollisuudet vaikkapa keikoilla käymiseen ovat syystä tai toisesta rajalliset, ja joita esimerkiksi television (vaatimaton) musiikkitarjonta ei tavoita. Mutta yhtä lailla saavutettavasta sivustosta hyötyvät kaikki musiikin harrastajat ja kuluttajat parantuneena löydettävyytenä, mainoskanavana, tiedonlähteenä, elämysten luojana. Viime kädessä fiksu artisti huomaa sen kukkarossaan.

Näkövammaiset ja Internet

Kirjoittaja: Jari Mikola, Näkövammaisten Keskusliiton atk-kouluttaja.


Sisältö

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.

Saavutettava.fin 15 minuuttia

Sivustomme saavutti heti julkaisunsa jälkeen yllättävänkin paljon huomiota. Meidät mainittiin muun muassa Kalevan HighTech Forumin, Digitodayn, ITviikon ja Tietoyhteiskunta.fin uutisissa puhumattakaan lukuisista blogeista. Myös suoraa positiivista palautetta on tullut huomattavan paljon melko yllättäviltäkin tahoilta. Kuten arvelimmekin, tällaiselle sivustolle on nähtävästi ollut tarvetta. Kiitos!

Saavutettava.fin lähiaikojen suunnitelmissa on tarjota runsaasti uusia artikkeleita saavutettavuudesta ja web-standardeista. Sehän se on meidän hommamme. Työn alla on paraikaa muutamia käännöksiä ja, mikä hienointa, pari nimenomaan meitä varten kirjoitettua artikkelia. Tuskin maltamme odottaa.

Esteetikotkin voivat huokaista helpotuksesta. Olemme jo suunnitteluvaiheessa varautuneet järjestämään Saavutettava.fin leiskakilpailun, missä CSS-gurut pääsevät näyttämään kyntensä ja suunnittelemaan sivustollemme tyylikkään ja houkuttelevan ulkoasun. Verrytelkää hiiriranteenne valmiiksi!

Lyhyt johdatus esteettömyyteen

Kirjoittaja: Russ Weakley, Max Design. Käännös: Yoji Hirabayashi ja Mikko Kekki.


Sisältö

Esteettömyys ei ole…

  • Vain tekstipohjaisia sivuja
  • Erillinen, esteetön versio (ellei kyseessä ole multimedia)
  • Tylsää
  • Vaikeaa

Esteettömyys on…

Esteettömyydellä tarkoitetaan sellaisten web-sivujen kehittämistä, joita kuka tahansa voi navigoida ja lukea riippumatta käyttäjän mahdollisista vammoista, sijainnista, kokemuksesta tai käytössä olevasta teknologiasta.

Webin voima on sen universaaliudessa. Kaikkien saavutettavissa oleminen, esteellisyydestä riippumatta, on ensiarvoista.

Tim Berners-Lee
World Wide Webin ”isä”
Johtaja, W3C

Esteelliset käyttäjät

  1. Näkövammat
    • Sokeus
    • Heikentynyt näkökyky
    • Värisokeus
      • Vihersokeus (deutranopia)
      • Punasokeus (protanopia)
      • Sinisokeus (tritanopia)
  2. Liikunnalliset ja motoriset rajoitteet
    • Täydellinen tai osittainen halvaantuminen
    • Parkinsonin tauti
    • Niveltulehdus
    • Aivovaurio
    • Puutteellinen jäsenen liikuntakyky
  3. Kognitiiviset haitat
    • Kognitiiviset häiriöt
      • Vajavainen aivotoiminta
      • Lyhytmuistinmenetys
      • Ms-tauti
      • Alzheimerin tauti
      • Parkinsonin tauti
      • Ikääntyneisyys
    • Oppimisvaikeudet
      • Tarkkaavaisuushäiriö ADD
      • Dyslexia
      • Muut ei-kielelliset oppimisvaikeudet
  4. Kuulovammat

Laitteet ja ohjelmisto

Laitteet ja ohjelmistot web-sisällön saavuttamiseksi

Laitteet ja ohjelmistot sisällön tulostamista varten

Miksi esteettömyydestä pitäisi välittää?

  1. Lakisyistä (ei koske Suomea kirjoitushetkellä)
  2. Moraaliset syyt

    Internetissä kaikki ovat yhdenvertaisia. Se antaa meille sekä vallan että valinnanvapauden – mutta vain, mikäli pääsy sinne on yhtäläinen kaikille.

    http://www.rnib.org.uk/

  3. Julkinen palvelu

    Julkisella sektorilla on velvollisuus palvella yleisöä. Eikä se tee sitä, mikäli se palvelee vain tiettyjä ihmisryhmiä.

    http://joeclark.org/essentials/WE04notes1.html

  4. Kaupalliset syyt

    2003 SDAC arvioi että joka viides australialainen (3,951,000 tai 20%) kärsii jonkinasteisista häiriöistä. Luku on yhtäläinen niin naisilla kuin miehilläkin ja se suureni iän myötä ollen 81% yli 85-vuotiaiden keskuudessa.

    http://www.abs.gov.au/

  5. Esteettömistä web-sivuista hyötyvät kaikki.

Esteettömän web-kehityksen neljä vaihetta

  1. Tietämättömyys on autuutta
    • Tarvitseeko meidän todella välittää muutamasta prosentista käyttäjiä?
    • Tarvitseeko sokeiden päästä internetiin ollenkaan?
  2. Välttely
    • Me annoimme heille jo alt-tekstit ja tekstiversion sivuista. Mitä he vielä haluavat?
  3. Kävelyn opettelu
    • On niin paljon ajateltavaa, mistä aloittaisin?
  4. Osa prosessia
    • En edes ajattele sitä enää, se on osa prosessia

Joitain pikaisia tapoja parantaa sivuston esteettömyyttä

  • Käytetäänkö alt -määritteitä kaikille merkityksellisille kuville?
  • Onko tekstin koko määritelty sivustolla suhteellisilla yksiköillä?
  • Hajoaako mikään kohta taitossa, jos fonttikokoa suurennetaan?
  • Käytetäänkö sivustolla näkyviä pikalinkkejä (skip menus)?
  • Käytetäänkö sivustolla esteettömiä lomakkeita?
  • Käytetäänkö sivustolla esteettömiä taulukoita?
  • Ovatko värit riittävän kirkkaita ja kontrastit selkeitä?
  • Käytetäänkö kriittisen informaation osoittamiseen yksistään väriä?
  • Vaativatko sivun toiminnot hyvää näköä ja vakaata kättä?
  • Ovatko kaikki linkkitekstit kuvaavia?
  • Onko pääsy sivuston kaikille alueille mahdollista pelkästään näppäimistön avulla (tab key)?
  • Onko sivuston sisältö saavutettavissa mikäli CSS on kytketty pois käytöstä tai selain ei tue sitä?
  • Onko sivuston sisältö saavutettavissa mikäli kuvat on kytketty pois käytöstä tai selain ei osaa näyttää niitä?
  • Toimiiko sivusto tekstiselaimilla, kuten Lynx?
  • Toimiiko sivusto hyvin riippumatta selainikkunan koosta?

Web-standardien tarkistuslista tarjoaa yksityiskohtaisempaa lisätietoa.

Tästä artikkelista

Alkuperäinen esitys: A quick and dirty introduction to accessibility. Artikkeli on saatavilla myös presentaatiomuodossa.