Esteettömyys www-sivuilla Eija Mykkänen Mediatekniikan seminaari

Esityksen sisältö Mitä on esteettömyys? Miksi tehdä esteettömiä sivuja? Erityisryhmät ja esteettömyys –näkövammaiset (sokeat, heikkonäköiset, värisokeat) –kuulovammaiset –kognitiivisista häiriöistä kärsivät –motorisista häiriöistä kärsivät

Mitä on esteettömyys? Kuka tahansa voi käyttää sivuja riippumatta vammoista, sijainnista, kokemuksesta tai teknologiasta Huomioidaan erilaiset käyttäjäryhmät sivujen suunnittelussa saavutettavuus, käytettävyys, accessibility, inclusive design, universal design, design for all

Miksi tehdä esteettömiä sivuja? Yhdenvertaisuus Internet tärkeä osa jokapäiväistä elämää Helppo toteuttaa Verkossa useita toimintoja, joita muuten vaikea saavuttaa Hyödyttää myös palveluntarjoajaa

Erityisryhmät Näkövammaiset –sokeat –heikkonäköiset –värisokeat Kuulovammaiset Kognitiivisista häiriöistä kärsivät Motorisista häiriöistä kärsivät

Sokeat ja esteettömyys (1/4) Apuna ruudunlukuohjelma ja puhesyntetisaattori tai pistenäyttö Sivukohtainen title-elementti Semanttinen rakenne (,, ) Tärkein asia alussa Sivun alun linkkilistojen ohitus (esim. piilolinkillä)

Sokeat ja esteettömyys (2/4) Linkkitekstien oltava kuvaavia irrallisinakin Linkit eri riveille tai erotettuina Vältettävä kuvakarttoja Linkeissä vältettävä skriptejä Kuville selitteet (alt-attribuutti)

Sokeat ja esteettömyys (3/4) Toimittava näppäimistöltä (tabindex- attribuutti) Taulukot vain tilastollisen tiedon esittämiseen Lomakkeissa kentät allekkain ja ohjeteksti samalle riville Vältettävä kehyksiä

Sokeat ja esteettömyys (4/4) Videoista, Flash-esityksistä yms. tekstiversiot Vältettävä itsestään käynnistyviä animaatioita PDF- ja Word-tiedostoista tarjolle myös html-versiot Tyylit määritelty erillisessä tyylitiedostossa Sivut oltava luettavissa ilman tyylitiedostoa

Heikkonäköiset ja esteettömyys Käyttävät usein samoja apuvälineitä kuin sokeatkin, usein myös ruudunsuurentajaa Fontin koko muuteltavissa (suhteellinen koko) Tekstin ja taustan väri muuteltavissa Riittävä kontrasti taustan ja tekstin välillä Linkkilistat ja leipäteksti riittävän väljästi

Värisokeat ja esteettömyys Väreillä ei saisi pelkästään merkitä oleellisia asioita Huomioitava esim. tekstin ja taustan väreissä

Kuulovammaiset ja esteettömyys Ongelmia aiheuttavat video, ääni ja multimedia Äänitiedostoista tekstivastikkeet Videoista synkronoitu tekstitys

Kognitiivisista häiriöistä kärsivät ja esteettömyys (1/2) Esim. tarkkaavaisuushäiriöt, lukihäiriöt, Downin syndrooma Sivujen yleinen selkeys tärkeää Navigoinnin ymmärrettävyys ja yhdenmukaisuus tärkeitä Sisältöä vaihtoehtoissa muodossa, esim. selittäviä kuvia, selkokielistä tekstiä

Sisältö lyhyt ja yksinkertainen Vältettävä pitkiä rivejä, noin 70–80 merkkiä Vältettävä tekstin tasaamista molempiin reunoihin Vältettävä välkkyviä elementtejä Kognitiivisista häiriöistä kärsivät ja esteettömyys (2/2)

Motoriset häiriöt ja esteettömyys Esim. käsiä ei voida liikuttaa ollenkaan tai voidaan liikuttaa hyvin hitaasti, epävarmasti ja epätarkasti Sivujen käyttö onnistuttava näppäimistöltä Vältettävä liian pieniä osuttavia kohtia Ehdottomasti ei liikkuvia osuttavia kohtia

Yhteenveto Validia koodia Tyylit erillään Elementtejä käytetään siihen, mihin ne on tarkoitettukin Kuville, videoille yms. vaihtoehtoista sisältöä

Lähteet me.nsf/pages/06D2E977451D62FFC2256C ?Opendocumenthttp:// me.nsf/pages/06D2E977451D62FFC2256C ?Opendocument Virta, Katja : Esteettömät www-sivut. Insinöörityö. EVTEK-ammattikorkeakoulu Korpela, Jukka: www-sivut jokaiselle sopiviksi. TIEKE Nielsen, Jakob: Designing Web Usability. Indianapolis: New Riders, 2000.