WWW:n ja sähköistendokumenttien esteettömyysruudunluvun käyttäjänkannalta
Veli-Pekka Tätilä
Oulun yliopisto
tietojenkäsittelytieteiden laitos
21.1.2008
Esteettömyyden määritelmä 1/2
•ISO 9241-20: Tuotteen, palvelun,ympäristön tai laitteen käytettävyyttämahd. suurelle käyttäjäkunnalle
–kyvyistä riippumatta -> vammaiset, vanhuksetja muut erityisryhmät
•ISO-9241-11: Käytettävyys kun tehtävät,käyttäjät ja käytön konteksti on määritelty:
–kuinka tuloksellista, tehokasta ja tyydyttävääkäyttö on
Esteettömyyden määritelmä 2/2
•Suhteellinen mittari
– Mac vs. PC esimerkki
•Nielsenin (2003) käytettävyyden osa-alueet: opittavuus aluksi, opittuaan ->tehokkuus, muistettavuus, virheettömyys,tyytyväisyys
•Tärkeintä on muistaa huomioidaesteettömyys suunnittelussa;yksityiskohdilla ei niin väliä!
Tilastotietoa esteettömyydestä
•WHO: maailmassa 180 milj.näkövammaista, suomessa 80 000 (yli 80% vanhuksia) (Lahti, 2006)
–suuret ikäluokat
–näkövammaisista 4/10 käyttää Webbiätavallista enemmän
Esteettömyyslainsäädäntö
–Valtion, kuntien, firmojen jne. tietoteknisetratkaisut esteettömiä mm. vammaisille
•Tulkittu niin, että Webbi ja softat ovat palveluja
•Briteissä vastaavasti disabilitydiscrimination act DDA
Esteettömyyden edut
•Esteettömät tuotteet käytettävämpiä ja myyvätparemmin:
–Puhelin esimerkki (H. Petrie, 2006)
•Parantaa käytettävyyttä tilannekohtaisesti (G.Vanderheiden, 2000)
•18-64 vuotiaista puolet hyötyisiesteettömyysominaisuuksista eträätälöitävyydestä (Forrester tutkinut Microsoftintilauksesta)
•Eri teknologioilla oma esteettömyysohjeisto jastandardit
Näkövammaisen apuvälineistä 1/2
•Syöttölaitteena tavallinen näppäimistö
–Hiiritoiminnoilla kohdistimesta riippumattomatnäppäinvastineet (standardit)
•Näytön sijasta käyttöliittymä luetaanääneen ruudunlukuohjelmalla
–Tekstin, kuvien ja elementtien toimittavapuhuttuna
•Lineaarisuus, muistin kuormitus, hitaus (Pitt)
Näkövammaisen apuvälineistä 2/2
•Voidaan myös lukea pistenäytöltä
–40-merkkiä riville, erikoismerkit, kokonaisuudenhahmotus
•Olemassa suurennusohjelmia heikkonäköisillekäyttäjille
–Kokonaisuus vaikea hahmottaa
–Kontrastit ja värivalinnat
•Painotuotteisiin tekstintunnistus tai ns. lukuTV(CCTV)
Web: Yleistä
•Esteettömyys tärkeää Webin laajuuden jamerkityksen tähden
–erityisesti sovellukset, CMS, Wikit jne...
Web: Tutkimuksia
•Redish & Theofanos: Guidelines for Accessibleand Usable Web Siteswww.redish.net/content/papers/interactions.html
•Yesilada et al: Rendering tables in audio: theinteraction of structure and reading styles
Web: Kuvat
•Guideline 1. Provide equivalentalternatives to auditory and visual content
–Kuviin ja kaavioihin tekstiselitys: vaaditaan alt tailongdesc
–Alt myös kuvalinkkeihin, kerro merkitys ei sisältöä
Web: Värit 1/3
•Guideline 2. Don't rely on color alone
–Ruudunlukijat eivät lue värejä oletuksena
–Värejä ei myöskään harmaasävynäytöillä jatekstiselaimilla
–Nyrkkisääntönä, että teksti luettavaamustavalkomuunnoksen jälkeen
–Edustan ja taustan kirkkauserojen kasvatusparantaa yleensä esteettömyyttä
–Vältä samaa kirkkautta vierekkäisissäväreissä
Web: Värit 2/3
–Heikkonäköisillä vaikeuksia värisävyjen,kirkkauksien ja eri värikylläyksyyksienerottamisessa
Web: Värit 3/3
–Punaviher/keltasini sokeus
–Useimmille heikkonäköisille vaaleaa tummallaparempi
–Turha värien käyttö: ohjelmointikielensyntaksin väritys
–Suosi selaimen oletusvärejä, jotka käyttäjä voivalita
–HUOM! Kaikilla käyttäjille ei ole oletuksenavalkoinen tausta
Web: Otsikot
•Guideline 3. Use markup and style sheetsand do so properly. Mark up documentswith the proper structural elements.
–Otsikot olennainen osa rakennetta
–Suhteelliset mitat varmistavat skaalautuvuuden
–Lainaukset, koodi, kieli
Web: Taulukot
•Guideline 5. Create tables that transformgracefully
–Ei yhtä lukutapaa taulukoille -> puheen lineaarisuus(Pitt)
–Tiivistä monimutkaiset taulukot
–Suosi yksinkertaisia taulukoita
–Taulukon tulkinta on moniselitteinen ja kuormittaamuistia:www.microsoft.com/windows/products/windowsvista/editions/choose.mspx
–Taulukon otsikot merkattava erikseen (HTML:ssä TH)
–Älä käytä taulukoita palstoitukseen
Web: Linkit ja vaihtoehtoisetsiirtymistavat 1/2
•Guidelines 9 and 13. Design for device-independence, Provide clear navigationmechanisms.
–Linkkitekstistä pitää pystyä päättelemäänmihin se johtaa
–Sivuilla pitäisi olla Suoraan sisältöön –niminenlinkki, jolla vähennetään selattaessatarvittavien näppäinkomentojen määrää
Web: Linkit ja vaihtoehtoisetsiirtymistavat 2/2
Tehokas näppäimistökäyttö 1/2
•Suosi syviä ja kapeita navigointirakenteita
•Navigointi alkamaan sivun”luonnollisemmasta” kohdasta
•Pikanäppäimet tehostavat navigointiasivun eniten käytettyihin linkkeihin
Tehokas näppäimistökäyttö 2/2
•Syvä hierarkia, fokuksen käsittely toimiioikein:http://domino.research.ibm.com/tchjr/journalindex.nsf/SysVolumes?OpenView
Web: Lomakkeet 1/2
•Guideline 12. Provide context andorientation information.
–Käytä label-elementtiä lomakkeen tekstiin(tekstin sijainti lähellä lomakkeen kontrolleja eiriitä)
–Lomakkeen hyväksyminen enterillä, kenttienpakollisuus voitava päätellä puheenperusteella
–Lomake sivun alkuun, täyttö alkamaanensimmäisestä kentästä, ei ohjeita välille
Web: Lomakkeet 2/2
–Pelkistetty, tehokkaasti navigoitava lomake:esimerkki koneelta
–Oikeaoppista nimiöiden käyttöä: www.game-accessibility.com/forum/index.php
Web: optimointi puheelle 1/2
•Tärkein linkkien / kysymysotsikkojenalkuun (Redish, W3C, Nielsen)
•Lyhenteet -> Aural CSS
•Vältä outoja nimiä, yhdyssanoja jne...
•Lyhyitä puhuttavia lauseita, välimerkeilläsaa paljon selkeyttä
Web: optimointi puheelle 2/2
•Kaavioiden ja taulkoiden olennainen sisältötekstiksi
•kaavat ASCIIna tai LatEXina
–esimerkki koneen lukemana: (a + b)^2 = a^2 + 2 * a *b + b^2
–Esimerkki ihmisen lukemana: Tilastolliset menetelmät
•Kaavioihin altit
Adobe Flash 1/2
•Teknisesti esteetön versiosta 6 lähtien,käytännössä ei
•Esteettömyys vaatisi Flash-sovelluksiltanäppäimistöliittymä– ja puhetuen
•Esteettömyystekniikat samoja kuinWebissä yleensä
•Flashin erityiset ongelmat taustamusiikki,graafisuus ja näppäimistöliittymän puute
Adobe Flash 2/2
•Sisällön yksinkertaisuus: Youtube
Adobe PDF 1/4
•PDF-lukijoista vain Adobe Acrobat Readeresteetön
•Dokumenttien tagittomuus hidastaa paljon:How To Think Like a Computer Scientistwww.greenteapress.com/thinkpython/thinkPP.pdf
Adobe PDF 2/4
•Älä kiellä perusteettomasti kopiointia, tallennustaja ruudunlukua: Beginning Perlwww.perl.org/books/beginning-perl/
–Esteellisyyden lisäksi turvaton!
•Fonttien ongelmina siansaksa:
–ײ¬»®·±® Ù®¿°¸·½ Ü»·¹²»®æ Ö¿³» Üò Õ®¿³»®
•Tekstiä ilman välejä:
–Perlbeganastheresultofoneman'sfrustrationand,byhisownaccount,inordinatelaziness.
Adobe PDF 3/4
•Seonneet palstat:
While deciphering the Enigma Code during World1/3 to elephants. But this estimate is clearly amiss
War II, I.J. Good and A.M. Turing considered theas the poor estimator will be completely unprepared
Adobe PDF 4/4
•Guideline 10. Use interim solutions.
•Vinkki: Acrobat Readerissa on toimintoQuick accessibility check, jolla PDF-dokumentin esteettömyyden voi tarkistaa
•Käyttäjä saa määritellä värit
•Älä koosta PDF-dokumenttia sivujenkuvista
Microsoft Word-dokumentit jaHTML-ohjeet
•Word-dokumentit
–Varaudu siihen, että käyttäjä saa määritellä värit
–Ongelmana palstat, kaavaeditorin kaavat,kuvaleikkeet ilman kuvatekstejä ja kaaviot
•HTML-ohjeet
–Tiedostomuotona CHM
•oma katseluohjelma, jossa sisällysluettelo, haku ja hakemisto
–Yleensä todella käytettävä, mutta eroja HTML:ään
•Älä linkitä Webbiin
•Ei johdantotekstiä päätasolle
Puhdas teksti 1/3
•On esteetön, suosittu ja siirrettävä
•Käytetty projekti Gutenbergissä
•Kaikki ruudunlukijat ja editorit tukevat
•Vie vähän levytilaa
•Rivitä käsin vain Webissä
•2 rivinvaihtoa kappaleisiin
Puhdas teksti 2/3
•Määrittele koodaus ja muuta sarkaimetvälilyönneiksi
•Tasalevyistä tekstiä taulukoihin
–CSV vaihtoehtona
•Taulukoissa mahd. vähän sarakkeita,lukujärjestys vasemmalta oikealle
–Yksi taulukon rivi on yksi dokumentin rivi
• Vältä ASCII-taidetta ja sisennystä sekä”lihavointia”
Puhdas teksti 3/3
•Numeroitu sisällysluettelo alkuun
•Eritason otsikoilla eri erottimet tai erimäärä valkomerkkejä
–Kirjoita tekstiä, joka on täsmättävissäsäännöllisellä ilmauksella
–Tekstissä haettaessa käytetty ilmaus:
•\s \R{3,} \w+ \(
Mitä tästä luennosta kannattaavähintään muistaa 1/2
•Levittäkää sanaa esteettömyydestä
–Parantaa käytettävyyttä
–Yllättävän tärkeää ja ajankohtaista monille
•Ajatelkaa lukijaa myös näppäimistön ja puheenkäyttäjänä
–Testatkaa, jos ehditte
–Selkeitä lauseita, rytmitys välimerkein, vähän lukuja ja lyhyitäluetteloja
Mitä tästä luennosta kannattaavähintään muistaa 2/2
•Tarjotkaa vaihtoehtoja esteellisille tekniikoille
–Sallikaa tekstin kopiointi ja ruudunluku
–Käytä tekstiselityksiä myös graafisissa esityksissä
•Esteettömyyden kannalta minusta
–Toimivia: HTML-ohjeet, HTML ja vaihtoehtona aina puhdas teksti
–Haastavia: PDF, flash, kaaviot
•Helpoin demonstroida kokeilemalla käytännössä
–Näyttö kiinni
–Hiiri pois
–Käytä ruudunlukijaa, mikäli mahdollista (Narrator, Non VisualDesktop Access)
KIITOS!
•Onko kysymyttävää?