WWW-sivujen käytettävyys ja esteettömyys - Luento 10

Tällä luennolla käsitellään WWW-sivujen käytettävyyteen ja esteettömyyteen liittyviä asioita.

Miksi?

The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.

- Tim Berners-Lee, W3C:n johtaja ja WWW:n keksijä

WWW-sivujen suunnittelussa on huomioitava käyttäjien

Määritelmät

Esteettömyys
on tuotteen, palvelun tai tilan käytettävyys erikykyisillä ihmisillä. [ISO 16071:2002, määritelmä 3.2]
  • Käsite ei rajoitu pelkästään vammaisiin käyttäjiin.
Saavutettavuus
on esteettömyyttä laajasti ymmärrettynä.
  • Usein näitä sanoja käytetään synonyymeinä, molemmat tulevat englannin kielen sanasta accessibility.
Käytettävyys
kuvaa missä määrin tietty käyttäjäjoukko pystyy käyttämään tuotetta tavoitteensa saavuttamiseksi tehokkaasti, tuloksellisesti ja tyytyväisesti (engl. usability). [ISO 9241-11:1998, määritelmä 3.1]

Esimerkkejä esteellisistä sivuista

Mitä mahdollisia ongelmia seuraavilla sivuilla on käytettävyyden ja esteettömyyden näkökulmasta?

Mobiiliversioita (selain Opera) edellä luetelluista sivuista

Tekstiselainversioita (selain Lynx) edellä luetelluista sivuista

Vrt. esim. kurssin kotisivu ruudunlukijalla, mobiiliselaimella ja tekstiselaimella.

Myyttejä esteettömyydestä

Lähde: Building Accessible Websites, kappale 2 ja Tilastokeskus

Hyötyä esteettömyydestä

Lähde: Building Accessible Websites, kappale 2 ja Tilastokeskus

Lainsäädäntö ja suositukset

WWW-sivut kannattaa siis suunnitella Design for All (DfA) periaatteella, jossa pyritään parantamaan sekä WWW-sivujen käytettävyyttä että saavutettavuutta kaikille käyttäjille.

WWW-sivujen tekemistä esteettömiksi puoltavat myös seuraavat voimakkaat kannanotot:

Saavutettavan sivun suunnittelun periaatteita

Seuraavissa luvuissa on vinkkejä yleisen käytettävyyden ja esteettömyyden parantamiseksi.

Standardienmukaisuus

Tekstivastineet

Kaikille ei-tekstuaalisille elementeille pitää antaa tekstivastine:

Sivuston ulkoasu ja taitto

Kehyksien käyttö taitossa

Älä käytä kehyksiä! Jos kuitenkin jostakin syystä käytät, niin huolehdi seuraavista asioista:

Taulukoiden käyttö taitossa

Älä taita sivustoa taulukoiden avulla, jos vain mahdollista.

Näyttöresoluution huomioiminen

Käytettävän sivuston suunnittelun perusideoita

Seuraavassa muutamia perusideoita, jotka kannattaa muistaa sivujen tekemisen jokaisessa vaiheessa.

Sivuston otsikkotiedot

Etusivu

Sivuston sisältö

Lomakkeet

Navigointi

Toteuta navigointi seuraavien periaatteiden mukaisesti.

Linkit

Kuvien käyttö

Seuraavassa muutamia kuvien käyttämisessä huomioitavia asioita.

Sivujen latausajat

Erillistekniikat

Erillistekniikoilla tarkoitetaan tässä XHTML:stä ja CSS:stä poikkeavia tekniikoita, joita käytetään verkkosivuilla.

Suosituksia mobiiliympäristöön

Uusissa puhelimissa on yleensä hyvin XHTML:ää ja CSS:ää tukevia selaimia. Itseasiassa WAP2-standardin WWW-julkaisupuoli koostuu XHTML:n osajoukosta XHTML Mobile Profilesta ja CSS:n osajoukosta Mobile CSS:stä. Kohtuullisen kännykällä selailtavan sivuston saa aikaan, kun suunnittelee hyvän vaihtoehtoisen tyylitiedoston mobiilipuolelle ja varmistaa, että mobiililaitteiden selaimet saavat otettua kyseisen tyylitiedoston myös käyttöön. Esim. appro-sivuston handheld.css.

Mobiilikelpoisissa sivujen tekemisessä kannattaa noudattaa Mobile Web Best Practices 1.0 -ohjeistusta. Ohjeessa on paljon yhteneväisyyksiä WCAG-suosituksen kanssa.

Sivujen esteettömyyden varmistaminen

Seuraavaan on koottu erilaisia asioita, joiden avulla voidaan varmistaa sivuston esteettömyys. Kaikkia keinoja ei ole välttämättä käytettävissä, mutta jo muutamillakin tarkistuksilla saadaan sivustosta huomattavasti esteettömämpi.

  1. Anna erilaisten käyttäjien testata sivustoa jo varhaisessa vaiheessa.
  2. Tarkasta sivu arviointityökaluilla:
    • Validoi sekä XHTML- että CSS-dokumentti W3C:n validaattoreilla.
    • Tarkista esteettömyyden tarkastavalla ohjelmalla, esim.
  3. Tutki sivun rakennetta Firebug-laajennuksella.
    • Luetaan järjestyksessä ylhäältä alaspäin (mennen sisälle jokaiseen elementtiin). Tuleeko varsinainen sisältö pian esille?
    • Ovatko tekstit merkitty tekstin rakennetta kuvaavilla elementeillä? Esim. otsikot h1-, h2- ja h3-elementeillä, listat ul, ol ja dl-elementeillä, kappaleet p-elementillä jne.
  4. Testaa sivu erilaisilla graafisilla selaimilla erilaisilla asetuksilla.
    • Kuvat pois päältä, esim. Firefoxissa Tools | Options | Content | Load images automatically.
    • JavaScript pois päältä, esim. Firefoxissa Tools | Options | Content | Enable JavaScript.
    • Testaa ilman CSS:ää, esim. Web Developer -työkalupalkista CSS | Disable Styles | All Styles.
    • Pienennä ikkunan leveyttä puoleen. Tuleeko vaakavierityspalkkia?
    • Kasvata tekstin kokoa. Pysyykö sivun sommittelu kasassa?
  5. Testaa sivu merkkipohjaisilla selaimilla tai emulaattoreilla.
    • Ota SSH-yhteys esimerkiksi jalava.cc.jyu.fi-koneelle ja kirjoita lynx http://users.jyu.fi/~omatunnus/harkkahakemisto/.
    • Lynx Viewer -ohjelma toimii suoraan WWW-sivulta.
  6. Testaa sivu vanhemmilla selaimilla, jos mahdollista.
  7. Testaa sivu ääniselaimella tai ruudunlukijalla.
  8. Testaa sivu mobiiliympäristössä.
    • Jos et pysty testaamaan sivua oikealla kännykällä, niin yksi vaihtoehto on ladata Opera ja käyttää sen Small Screen Rendering -tilaa.
    • Valitse Tools | Preferences... | Advanced | Browsing | Show Web page dimensions in title bar ja pienennä ruudun koko 240:320 pikselin kokoiseksi (tyypillinen älypuhelimien tarkkuus, normaalipuhelimessa joskus jopa pienempi).
    • Valitse Small Screen Rendering -tila valinnalla View | Small Screen (Opera 10) tai View | Fit to Width (Opera 11). Varmista vielä, että View | Style -valikosta on valittuna Author Mode.
      • Huomaa, että sivu voi näyttää ihan hyvältä ilman handheld-medialle määrättyjä CSS-tyylejä tai vaihtoehtoista tyylitiedostoa, koska SSR-tila mukauttaa sivun mobiilikelpoiseksi. Silti vaihtoehtoinen tyylitiedosto mobiililaitteille on syytä tehdä, sillä kaikki mobiiliselaimet eivät ole yhtä adaptiivisia!
  9. Tarkista sivun kielioppi. Onhan kieli merkitty xml:lang tai lang-ominaisuudella?

Esteettömyyteen ja käytettävyyteen liittyvää aineistoa

Erilaisia ohjelmia verkon selailuun

Käyttäjien kommentit

Kommentoi Lisää kommentti
Kurssimateriaalien käyttäminen kaupallisiin tarkoituksiin tai opetusmateriaalina ilman lupaa on ehdottomasti kielletty!
http://appro.mit.jyu.fi/itkp1011/luennot/luento10/
© Tommi Lahtonen (tommi.j.lahtonen@jyu.fi) <http://hazor.iki.fi/>
2017-09-05 17:31:45
Informaatioteknologia - Jyväskylän yliopiston informaatioteknologian tiedekunta