Gradu saavutettavuuden automaattisesta arvioinnista

Jokin aika sitten lukijamme lähestyi meitä kysellen linkkivinkkejä ja lähteitä saavutettavuusaiheiseen graduunsa. Eilen saimme tietää, että gradu on valmis, ja nyt meillä on myös kunnia esitellä se! Jukka Mäntylän gradussa Www-sivun saavutettavuuden automaattinen arviointi DOM-rajapintaa käyttäen mm. tarkastellaan, miten erilaiset vammat ja tekniset rajoitteet vaikuttavat verkkosivujen selailuun ja selvitetään kriteerit, jotka edistävät verkkosivujen yleistä saavutettavuutta. Näiden kriteerien pohjalta kehitettiin automaattinen saavutettavuuden arviointijärjestelmä, joka hyödyntää selainympäristön tarjoamaa DOM-rajapintaa ja elementtien asemointitietoja. Näistä louhitut tiedot mahdollistavat dynaamisten sivustojen kattavan arvioinnin.

Gradun yhteydessä toteutetun automaattisen arviointityökalun runko on kaikkien kokeiltavissa: Acc – an Accessibility Evaluator.

Onnea, Jukka!

Joe Clark & WCAG 2

A List Apart: To Hell with WCAG 2 (Web Content Accessibility Guidelines 2.0)

Viiden vuoden kehitystyö uuden verkkosisällön saavutettavuusohjeen (WCAG 2) osalta alkaa olla loppussuoralla. Hieno asia, kaikki ovat iloisia ja suosituksenkin pitäisi olla näin pitkän kehitystyön jälkeen vähintäänkin erinomainen.

Nykymuotoisen suositusluonnoksen kovaäänisin vastustaja, kanadalainen tietokirjailija, toimittaja ja esteettömyys-asiantuntija Joe Clark ampuu tuoreessa A List Apartin numerossa uuden suosituksen alas. Artikkelissa kyseenalaistetaan niin itse suositusluonnos kuin työryhmän toimintatavatkin.

Artikkelissa esiin nostettuja epäkohtia ovat mm.:

  • suosituksen (ja oheisdokumentaation) massiivinen koko
  • englanninkielisyys
  • suositusluonnoksen lyhyt kommentointiaika
  • määritelmät
  • testattavuus
  • vaikeaselkoisuus / tulkinnanvaraisuus

Joe Clarkin mukaan uusi suositus ei välttämättä ole edes parannus jo olemassa olevaan suositukseen (WCAG 1.0) verrattuna. Hän kehottaakin lukijoita kommentoimaan luonnosta ja näin vaikuttamaan sen lopulliseen muotoon. Nykymuotoisen suosituksen seuraaminen onkin artikkelin esille nostamien ongelmien takia hankalaa – käytännössä siis vain aniharva, jos kukaan pystyisi täyttämään kaikkia siinä esitettyjä saavutettavuusvaatimuksia. Voi vain toivoa, että työryhmä ei anna henkilökohtaisten erimielisyyksien vaikuttaa asiaan, ja että ainakin artikkelissa mainittuihin epäkohtiin puututtaisiin ennen kuin luonnos saa suositus-statuksen.

Artikkelin lopussa mainitaan myös WCAG Samurai -sivusto, jolla tullaan ehdottamaan korjauksia ja laajennuksia sekä olemassa olevaan että tulevaan ohjeistukseen.

Tulevan suosituksen suomenkielistä versiota ei kannattane odotella pitkään aikaan, koska sen julkaiseminen ilman käännettyä oheisdokumentaatiota ei ole järkevää.

Lisäys: WCAG 2.0-suositusluonnoksen kommentointiaikaa on jatkettu kolmella viikolla.

Ruotsissa kaikki on paremmin

Uutisissa on viime aikoina päivitelty suomalaisen tietoyhteiskuntakehityksen romahtamista ja Suomen sijoituksen tipahtamista asiaa mittaavissa tutkimuksissa. Koulutuksen taso on laskenut, kun määrärahoja on leikattu ja opetusta karsittu, eikä suuntaus ole ainakaan nousujohteinen. Tässä kontekstissa on vaikeaa kuvitella kuinka Suomi saataisiin nousukiitoon – matkapuhelinjätit kun eivät yksin riitä vauhtia takaamaan. Sisällöntuottajina voimme olla kärkipäässä, mutta entä toteuttajina?

Naapurimaassamme Ruotsissa on hoksattu satsata tulevaisuuteen. Ruotsalaisissa lukioissa on parhaillaan käynnissä suuri opetussuunnitelman uudistaminen, jonka toimeenpanijana on skolverket, kouluvirasto, joka on sikäläinen opetushallitusta vastaava elin. Web Standards Projectin sivuilla uutisoitiin, että samaisen kouluviraston aloitteesta on tarkoitus ottaa lukio-opetuksen osaksi web-standardit ja saavutettavuus vuoteen 2007 mennessä. Ruotsissa jo lukiossa on tarjolla opetusta niille oppilaille, joita kiinnostaa ura verkkopalveluiden parissa – tällöin saavutettavan ja standardinmukaisen suunnittelun opettaminen on looginen ensiaskel. Mikäli kouluvirasto ottaa aiotut muutokset osaksi opetussuunnitelmaa, on sillä mahdollisuus nousta johtavaan asemaan verkkosuunnitteluopetuksessa. Kouluvirasto itse on näyttänyt esimerkkiä taannoisessa kotisivu-uudistuksessaan, jolloin mm. taulukot jätettiin viraston sivuilta kokonaan pois.

Suomalaisten lukioiden opetussuunnitelmauudistus saatiin juuri valmiiksi ja on parhaillaan toimeenpanovaiheessa, mutta meikäläisittäin verkkoon liittyvät kehittämiskohteet ovat olleet enemmänkin virtuaaliopetuksen ja sisällöntuotannon puolella. Ainoa saavutettavuuteen liittyvä asia kotimaan korkeimman opetusviranomaisen taholta on viimekeväinen esteettömän koulutusoppaan julkaisu. Meillä ollaankin keskitytty puhumaan verkon mahdollisuuksien hyödyntämisestä, muttei juurikaan itse (teknisestä) tekemisestä.

WaSP:illa on monien muiden projektinsa ohella käynnissä Education Task Force -kampanja, jossa yhteistyössä eri koulutusinstituutioiden kanssa lisätään ja kehitetään standardi- ja saavutettavuustietoutta opettajien, hallinnon ja verkkovastaavien kanssa. Toisin sanoen: tarjolla on kansainvälinen asiantuntijaorganisaatio, kädestäpitelijä, joka auttaa ottamaan sen ensimmäisen askeleen. Tässä kohdassa suomalainen tietoyhteiskunta voisi ottaa oppia ruotsalaisen kansankodin ennakkoluulottomuudesta, sillä jostain on aloitettava.

Yleisurheilun MM-kisat verkossa

Parhaillaan käynnissä olevien yleisurheilun MM-kisojen nimikkosivusto on ongelmallinen paitsi saavutettavuuden myös web-standardien näkökulmasta. Sivusto löytyy osoitteesta http://www.helsinki2005.fi/ ja jo osoite herättää kummeksuntaa: helsinki2005.fi? Euroopan kulttuuripääkaupunki? Helsingin juhlavuosi? Helsingin tapahtumakalenteri vuodelle 2005?

Web-sivuston tekniseen toteutukseen on ilmeisesti sovellettu avajaisten aikakone-teemaa. Hetkeen ei liene törmätty uuteen, näin korkean profiilin sivustoon, jossa ei ole käytetty tyylipohjia (CSS, Cascading Style Sheets) laisinkaan. Lisäksi koko sivusto vilisee luvattoman paljon pienellä vaivalla helposti vältettävissä olevia, esteettömyyteen ja peruskäytettävyyteen liittyviä ongelmia.

Sivuston sisällönhallintajärjestelmä (ohjelmisto ei ole kirjoittajan tiedossa) tuottaa 2000-luvulle sopimatonta merkkausta eikä esteettömyyttä ole juurikaan mietitty. Tämä itsessään tuntuu omituiselta, kun muistetaan Sydneyn Olympialaisten sivuston saama tuomio [en]. Käymme tässä jutussa läpi muutaman räikeimmän epäkohdan, navigoinnin toteutuksen ja lomakkeiden merkkauksen.

Rakennetta otsikoinnilla

Sivuston hahmottamisen kannalta tärkeä rakenteen merkkaus puuttuu kokonaan. Pelkästään eriasteisten loogisten otsikkotasojen (h1h6) käyttö olisi tehnyt ihmeitä. Esimerkiksi uutisotsikko on MM-kisasivustolla merkattu näin:

<font FACE =" Verdana" SIZE =" 1" COLOR =" #666666"><b>KISASIVUILLA RUNSAASTI KÄVIJÖITÄ?</b></font>

Koska HTML on merkkauskieli, jonka elementit tarkoittavat jotain, huomataan, että ylläoleva ei tarkoita otsikkoa. Merkintä tarkoittaa, että versaalilla kirjoitettu (joka internetissä tulkitaan huutamiseksi) on pelkästään lihavoitu asian painottamiseksi ja erottamiseksi normaalista tekstistä.

Sivuston navigointi on myös monella tapaa ongelmallinen. Ensinnäkin, se sisältää kahdessa osassa toistakymmentä linkkiä, joita ei ole HTML:ssa erotettu toisistaan.

Kannattaa aina erottaa linkit selkeästi toisistaan. Yleisiä merkkejä ovat mm. |, » ja >. Paras tapa lienee kuitenkin merkitä lista linkkejä listaelementiksi (ul). Se on niin sanottu semanttinen tapa esittää listoja, joita navigointiosiot eli linkkilistat ovat. Bruce Lawsonin mukaan ruudunlukuohjelma Jaws for Windows rakastaa semanttisia listoja [en].

Toisen ongelman aiheuttaa kuvien käyttäminen tekstin korvaamiseksi. Tämä estää varsin tehokkaasti sen, että käyttäjä voisi itse vaikuttaa tekstin kokoon. Teksti kannattaa esittää tekstinä ellei pätevää syytä muulle ole. Varsinkin, jos teksti on näin pientä kuin mainitussa navigoinnissa. Nyrkkisääntönä tulisi myös muistaa, että varsinkin leipätekstin koon asettamista absoluuttiseen arvoon pitää välttää.

Sivuston alkuun olisi voinut sisällyttää myös linkin, jonka avulla voitaisiin ohittaa navigointi ja siirtyä suoraan itse sisältöön ja näin ollen välttää turhaa (kymmenien linkkien) toistoa sivuilla. Toistuvat listat ovat ongelma varsinkin puhe- tai tekstiselaimilla sivuja lukeville.

Vaikka navigointi olisikin järjestetty selkeästi ja ymmärrettävästi, jotain oleellista näyttäisi siltikin puuttuvan. Maailmanmestaruuskilpailuille tai ainakin urheilijoille tärkeä asia on hankala löytää. Miten kilpailuissa kävi? Kuka tuli kolmanneksi? Mistä löytyvät kilpailujen tulokset?

Kisa-aikataulut

Kisojen aikataulujen selaaminen on toteutettu alasvetolaatikolla, joka vaatii toimiakseen JavaScriptia tukevan selaimen. Ratkaisu on huono. Se muun muassa estää tehokkaasti navigoinnin pelkän näppäimistön varassa. Tämänkaltaisissa toteutuksissa olisikin järkevintä käyttää jotain palvelinpään tekniikkaa. Lisäksi käyttäjää hämmennetään lomakkeiden asettelulla. Käyttö toimii siis lähinnä arvaa-ja-kokeile-menetelmällä.

Yleensäkin tällaisen toiminnon asettaminen selainpään toiminnallisuuden varaan on kyseenalaista. Olemassa on kuitenkin paremmin toimivia selainriippumattomia palvelinpään tekniikoita.

Yleensäkin lomakkeiden merkkaukseen ja asetteluun kannattaa kiinnittää huomiota ja käyttää aikaa. Hyvän merkkauksen avulla lomakkeen ulkoasua on helpompi muokata CSS:in avulla ja erilaisten esteettömyyttä edistävien attribuuttien käyttö helpottaa usein kaikkien käyttäjien selailua.

Lopuksi erikoisena yksityiskohtana mainittakoon se, että vetolaatikoiden alapuolella tarjotaan ”uutta aikataulua” PDF-muodossa. Uusi aikataulu? Mikä on muuttunut tarjolla olevaan vetolaatikolliseen versioon verrattuna? Miksi sivulta ei löydy tavallista linkkiä aikataulun tavalliseen HTML -versioon?

Modernit ruudunlukuohjelmat ja CSS-taitto

Access Matters -blogissa on julkaistu yhteenveto siitä, kuinka kolme johtavaa ruudunlukuohjelmistoa (Jaws 6.1, Window Eyes 5.0, IBM Home Page Reader 3.04) tulkitsevat CSS-aseteltuja dokumentteja. Testidokumentteina toimi neljä eri css Zen Garden-sivuston leiskaa (000, ZG 019, ZG 151 ja ZG 167).

Kaikki testatut ohjelmistot lukevat dokumentin sisällön siinä järjestyksessä kuin se lähdekoodissa on määritelty, välittämättä CSS -asettelusta. Tämä tieto helpottanee ainakin silloin, kun halutaan jo suunnitteluvaiheessa kiinnittää huomiota (uudempien) ruudunlukuohjelmistojen käyttäjiin: tärkein asia ensimmäiseksi. Graafisessa versiossa voidaan CSS:n avulla tarjota kaksi- tai kolmepalstainen asettelu.

Artikkelin lopussa löytyvästä taulukosta huomaa helposti, kuinka erilaiset FIR-tekniikat (Fahrner Image Replacement, tekniikka jossa CSS:n avulla korvataan tekstiä kuvalla) ja varsinkin CSS:ssa käytetty display: none aiheuttavat selkeitä ongelmia ohjelmistoille.

Loppuun maininta viime aikoina ulkomaisissa design-blogeissa käsitellystä, Joe Clarkin ehdottamasta, Zoom-versiosta heikkonäköisille. Idea on yksinkertainen. Tarjotaan sivustosta CSS:n avulla muokattu versio, joka muun muassa:

  • on yksipalstainen
  • käyttää oletusarvoisesti suurta fonttikokoa
  • käyttää yksinkertaistettua navigointia
  • tarjoaa täsmälleen saman sisällön kuin graafinen versio
  • toteutetaan pelkästään CSS:n avulla, eikä merkkausta muuteta.

Aiheesta lisää (englanniksi):

  1. A List Apart: Big, Stark & Chunky (Joe Clark)
  2. Joe Clark: Zoom the Web: The problem of giant fonts – @media 2005-tapahtuman muistiinpanot
  3. 456 Berea Street: Inverted zoom: designing for low vision (Roger Johansson)
  4. Juicy Studio: Zoom for Low Vision (Gez Lemon)
  5. Stopdesign: Zoom layout (Douglas Bowman)
  6. Adactio: Zooming the Web (Jeremy Keith)

Myös allekirjoittanut tarjoaa harjoituksen vuoksi vaihtoehtoista Zoom -versiota blogistaan.