tietojenkäsittelytieteiden laitos WWW:n ja sähköisten dokumenttien esteettömyys ruudunluvun käyttäjän kannalta 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, vanhukset ja 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 huomioida esteettö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ö Amerikan kuntoutuslainsäädäntö pykälä 508 vaatii: www.section508.gov Valtion, kuntien, firmojen jne. tietotekniset ratkaisut esteettömiä mm. vammaisille Tulkittu niin, että Webbi ja softat ovat palveluja Briteissä vastaavasti disability discrimination act DDA

Esteettömyyden edut Esteettömät tuotteet käytettävämpiä ja myyvät paremmin: Puhelin esimerkki (H. Petrie, 2006) Parantaa käytettävyyttä tilannekohtaisesti (G. Vanderheiden, 2000) 18-64 vuotiaista puolet hyötyisi esteettömyysominaisuuksista et räätälöitävyydestä (Forrester tutkinut Microsoftin tilauksesta) Eri teknologioilla oma esteettömyysohjeisto ja standardit

Näkövammaisen apuvälineistä 1/2 Syöttölaitteena tavallinen näppäimistö Hiiritoiminnoilla kohdistimesta riippumattomat näppäinvastineet (standardit) Näytön sijasta käyttöliittymä luetaan ääneen ruudunlukuohjelmalla Tekstin, kuvien ja elementtien toimittava puhuttuna Lineaarisuus, muistin kuormitus, hitaus (Pitt)

Näkövammaisen apuvälineistä 2/2 Voidaan myös lukea pistenäytöltä 40-merkkiä riville, erikoismerkit, kokonaisuuden hahmotus Olemassa suurennusohjelmia heikkonäköisille käyttäjille Kokonaisuus vaikea hahmottaa Kontrastit ja värivalinnat Painotuotteisiin tekstintunnistus tai ns. lukuTV (CCTV) Lisätietoa NKL:stä: www.nkl.fi/tietoa

Web: Yleistä Esteettömyys tärkeää Webin laajuuden ja merkityksen tähden erityisesti sovellukset, CMS, Wikit jne... Standardina W3C Web Content Accessibility Guidelines: www.w3.org/TR/WAI-WEBCONTENT/

Web: Tutkimuksia Redish & Theofanos: Guidelines for Accessible and Usable Web Sites www.redish.net/content/papers/interactions.html Yesilada et al: Rendering tables in audio: the interaction of structure and reading styles Arditi: Effective Color & Contrast www.lighthouse.org/accessibility/effective-color-contrast/

Web: Kuvat Guideline 1. Provide equivalent alternatives to auditory and visual content Kuviin ja kaavioihin tekstiselitys: vaaditaan alt tai longdesc Alt myös kuvalinkkeihin, kerro merkitys ei sisältöä Kuvissa on tekstiselitys: http://www.afb.org/ Selitys uupuu: www.finnair.fi/

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ä ja tekstiselaimilla Nyrkkisääntönä, että teksti luettavaa mustavalkomuunnoksen jälkeen Edustan ja taustan kirkkauserojen kasvatus parantaa 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äyksyyksien erottamisessa

Web: Värit 3/3 Punaviher/keltasini sokeus Useimmille heikkonäköisille vaaleaa tummalla parempi Huono kontrasti: www.the-underdogs.info/ Turha värien käyttö: ohjelmointikielen syntaksin väritys Suosi selaimen oletusvärejä, jotka käyttäjä voi valita HUOM! Kaikilla käyttäjille ei ole oletuksena valkoinen tausta

Web: Otsikot Guideline 3. Use markup and style sheets and do so properly. Mark up documents with the proper structural elements. Otsikot olennainen osa rakennetta Näyttävät otsikoilta mutta eivät ole: http://docs.python.org/lib/built-in-funcs.html Web-sivu jäsentyy otsikoiden kautta: www.student.oulu.fi/~vtatila/reviews_of_speech_synths.html Suhteelliset mitat varmistavat skaalautuvuuden Lainaukset, koodi, kieli

Web: Taulukot Guideline 5. Create tables that transform gracefully Ei yhtä lukutapaa taulukoille -> puheen lineaarisuus (Pitt) Tiivistä monimutkaiset taulukot Suosi yksinkertaisia taulukoita Taulukon tulkinta on moniselitteinen ja kuormittaa muistia: www.microsoft.com/windows/products/windowsvista/editions/choose.mspx Taulukon otsikot merkattava erikseen (HTML:ssä TH) Älä käytä taulukoita palstoitukseen

Web: Linkit ja vaihtoehtoiset siirtymistavat 1/2 Guidelines 9 and 13. Design for device-independence, Provide clear navigation mechanisms. Linkkitekstistä pitää pystyä päättelemään mihin se johtaa Sivuilla pitäisi olla Suoraan sisältöön –niminen linkki, jolla vähennetään selattaessa tarvittavien näppäinkomentojen määrää

Web: Linkit ja vaihtoehtoiset siirtymistavat 2/2 Tulkinta riippuu asiayhteydestä: www.shellcity.net/ Liikaa linkkejä koko sivulla: http://en.wikipedia.org/wiki/Noam_chomsky Sivulla tietää minne kukin linkki vie: www.celialib.fi/

Tehokas näppäimistökäyttö 1/2 Suosi syviä ja kapeita navigointirakenteita Navigointi alkamaan sivun ”luonnollisemmasta” kohdasta Pikanäppäimet tehostavat navigointia sivun eniten käytettyihin linkkeihin Navigointilistat sivuilla helpottavat näppäimistökäyttöä www.fanfiction.net/search.php

Tehokas näppäimistökäyttö 2/2 Turhia alkioita sarkainjärjestyksessä, fokuksen käsittely ei toimi : https://optima.oulu.fi Kaikkiin linkkeihin ei pääse käsiksi: www.tol.oulu.fi Syvä hierarkia, fokuksen käsittely toimii oikein: http://domino.research.ibm.com/tchjr/journalindex.nsf/SysVolumes?OpenView

Web: Lomakkeet 1/2 Guideline 12. Provide context and orientation information. Käytä label-elementtiä lomakkeen tekstiin (tekstin sijainti lähellä lomakkeen kontrolleja ei riitä) Lomakkeen hyväksyminen enterillä, kenttien pakollisuus voitava päätellä puheen perusteella Lomake sivun alkuun, täyttö alkamaan ensimmäisestä kentästä, ei ohjeita välille

Web: Lomakkeet 2/2 Nimiöitä ei ole eritelty: http://www.kirjasto.oulu.fi/palvelut/kaukopalvelu/kaavakeoulu.html Vaatii käyttäjältä nopeutta: http://www.emu.com/support/ 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 / kysymysotsikkojen alkuun (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 Deep View –ohjelma http://cs.unc.edu/~dorianm/academics/deepview/index.html

Adobe Flash 1/2 Teknisesti esteetön versiosta 6 lähtien, käytännössä ei Esteettömyys vaatisi Flash-sovelluksilta näppäimistöliittymä– ja puhetuen Esteettömyystekniikat samoja kuin Webissä yleensä Flashin erityiset ongelmat taustamusiikki, graafisuus ja näppäimistöliittymän puute

Adobe Flash 2/2 Esimerkki kolmesta edelä mainitusta: www.kraftwerk.com/flash/load_com.htm Flashin sijaan tarjotaan tekstiversio: www.jkrowling.com/textonly/en/ Sisällön yksinkertaisuus: Youtube

Adobe PDF 1/4 PDF-lukijoista vain Adobe Acrobat Reader esteetön Dokumenttien tagittomuus hidastaa paljon: How To Think Like a Computer Scientist www.greenteapress.com/thinkpython/thinkPP.pdf

Adobe PDF 2/4 Älä kiellä perusteettomasti kopiointia, tallennusta ja ruudunlukua: Beginning Perl www.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 World 1/3 to elephants. But this estimate is clearly amiss War II, I.J. Good and A.M. Turing considered the as the poor estimator will be completely unprepared

Adobe PDF 4/4 Guideline 10. Use interim solutions. Vinkki: Acrobat Readerissa on toiminto Quick accessibility check, jolla PDF-dokumentin esteettömyyden voi tarkistaa Käyttäjä saa määritellä värit Älä koosta PDF-dokumenttia sivujen kuvista

Microsoft Word-dokumentit ja HTML-ohjeet 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 sarkaimet vä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 eri määrä valkomerkkejä Kirjoita tekstiä, joka on täsmättävissä säännöllisellä ilmauksella Esimerkki: http://docs.python.org/lib/built-in-funcs.html Tekstissä haettaessa käytetty ilmaus: \s \R{3,} \w+ \(

Mitä tästä luennosta kannattaa vä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 puheen käyttäjänä Testatkaa, jos ehditte Selkeitä lauseita, rytmitys välimerkein, vähän lukuja ja lyhyitä luetteloja

Mitä tästä luennosta kannattaa vä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 Visual Desktop Access)

KIITOS! Onko kysymyttävää? Palautetta ja kysymyksiä voi lähettää myös sähköpostitse: vtatila@mail.student.oulu.fi Esteettömyysasiaa myös kotisivuillani: www.student.oulu.fi/~vtatila