tietojenkäsittelytieteiden laitos

Esitys aiheesta: "tietojenkäsittelytieteiden laitos"— Esityksen transkriptio:

1 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

2 Esteettömyyden määritelmä 1/2
ISO : 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 : 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

3 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ä!

4 Tilastotietoa esteettömyydestä
WHO: maailmassa 180 milj. näkövammaista, suomessa (yli 80 % vanhuksia) (Lahti, 2006) suuret ikäluokat näkövammaisista 4/10 käyttää Webbiä tavallista enemmän

5 Esteettömyyslainsäädäntö
Amerikan kuntoutuslainsäädäntö pykälä 508 vaatii: Valtion, kuntien, firmojen jne. tietotekniset ratkaisut esteettömiä mm. vammaisille Tulkittu niin, että Webbi ja softat ovat palveluja Briteissä vastaavasti disability discrimination act DDA

6 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

7 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)

8 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ä:

9 Web: Yleistä Esteettömyys tärkeää Webin laajuuden ja merkityksen tähden erityisesti sovellukset, CMS, Wikit jne... Standardina W3C Web Content Accessibility Guidelines:

10 Web: Tutkimuksia Redish & Theofanos: Guidelines for Accessible and Usable Web Sites Yesilada et al: Rendering tables in audio: the interaction of structure and reading styles Arditi: Effective Color & Contrast

11 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: Selitys uupuu:

12 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ä

13 Web: Värit 2/3 Heikkonäköisillä vaikeuksia värisävyjen, kirkkauksien ja eri värikylläyksyyksien erottamisessa

14 Web: Värit 3/3 Punaviher/keltasini sokeus
Useimmille heikkonäköisille vaaleaa tummalla parempi Huono kontrasti: 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

15 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: Web-sivu jäsentyy otsikoiden kautta: Suhteelliset mitat varmistavat skaalautuvuuden Lainaukset, koodi, kieli

16 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: Taulukon otsikot merkattava erikseen (HTML:ssä TH) Älä käytä taulukoita palstoitukseen

17 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ää

18 Web: Linkit ja vaihtoehtoiset siirtymistavat 2/2
Tulkinta riippuu asiayhteydestä: Liikaa linkkejä koko sivulla: Sivulla tietää minne kukin linkki vie:

19 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öä

20 Tehokas näppäimistökäyttö 2/2
Turhia alkioita sarkainjärjestyksessä, fokuksen käsittely ei toimi : Kaikkiin linkkeihin ei pääse käsiksi: Syvä hierarkia, fokuksen käsittely toimii oikein:

21 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

22 Web: Lomakkeet 2/2 Nimiöitä ei ole eritelty: Vaatii käyttäjältä nopeutta: Pelkistetty, tehokkaasti navigoitava lomake: esimerkki koneelta Oikeaoppista nimiöiden käyttöä:

23 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ä

24 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

25 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

26 Adobe Flash 2/2 Esimerkki kolmesta edelä mainitusta: Flashin sijaan tarjotaan tekstiversio: Sisällön yksinkertaisuus: Youtube

27 Adobe PDF 1/4 PDF-lukijoista vain Adobe Acrobat Reader esteetön
Dokumenttien tagittomuus hidastaa paljon: How To Think Like a Computer Scientist

28 Adobe PDF 2/4 Älä kiellä perusteettomasti kopiointia, tallennusta ja ruudunlukua: Beginning Perl Esteellisyyden lisäksi turvaton! Fonttien ongelmina siansaksa: ײ¬»®·±® Ù®¿°¸·½ Ü»­·¹²»®æ Ö¿³»­ Üò Õ®¿³»® Tekstiä ilman välejä: Perlbeganastheresultofoneman'sfrustrationand,byhisownaccount,inordinatelaziness.

29 Adobe PDF 3/4 Seonneet palstat:
While deciphering the Enigma Code during World /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

30 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

31 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

32 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

33 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”

34 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: Tekstissä haettaessa käytetty ilmaus: \s \R{3,} \w+ \(

35 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

36 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)

37 KIITOS! Onko kysymyttävää?
Palautetta ja kysymyksiä voi lähettää myös sähköpostitse: Esteettömyysasiaa myös kotisivuillani: