Vanha aarrekartta, josta kahden ihmisen kädet pitävät kiinni.
Tapahtumat, TINEL

Saavutettavaa konferenssikokemusta luomassa – verkkosivustosta alkaen

Isoja tapahtumia varten luodaan aina verkkosivusto. SeOppi on mukana järjestämässä kansainvälistä konferenssia eOppimisen saavutettavuudesta osana TINEL-hanketta.

Meitä toimijoita tapahtuman ympärillä on useita ja kaikilla on omat julkaisujärjestelmänsä talojen sisällä. Alustaa valittaessa meille tärkeimmiksi kysymyksiksi nousivat

  • Pääsevätkö kaikki helposti muokkaamaan sivuja
  • Pystymmekö takaamaan ilmoittautuneiden tietosuojan vaaditulla tasolla
  • Pystymmekö helposti upottamaan tietoa muilta sivuilta
  • Voimmeko luottaa palvelun pysyvyyteen ja tietoturvaan
  • Olisiko oletettavaa, että tuottamamme sivut olisivat saavutettavat

Olemme käyttäneet Google Sitesiä pitkään ja oletimme sen olevan hyvä valinta myös tähän.

Kuvakaappaus konferenssin verkkosivujen etusivulta. Artikkelitekstissä kuvaillut sivun osiot, kuten navigaatiopainikkeet on ympäröity punaisilla laatikoilla.
Kuvakaappaus konferenssin verkkosivuilta.

Sivuston ensimmäisessä versiossa:

  • sivun otsikkoalue muodostuu kolmesta osasta
    • alimpana on kuva,
    • sen päälle Google generoi itse harmahtavan kerroksen parantamaan tekstin luettavuutta
    • päällimmäisenä on otsikko tekstinä
  • navigaatio sijoitettiin yläreunaan
  • tekstialue keskelle ruutua
  • alareunaan hankkeen toimijoiden logot ja
  • ihan alimmaisena rivi vaadittuja rahoittajien logoja

Sivustolla upotettuina elementteinä ovat Google Forms -työkalulla tehty ilmoittautumislomake sekä Google Maps -kartta konferenssin tärkeimmistä paikoista.

Teknisesti katsoen sivut ovat hyvin yksinkertaiset, ei mitään ylimääräistä karkkia.

TINEL-hanke keskittyy verkkoaineistojen saavutettavuuden kehittämiseen erityisesti korkea-asteen näkökulmasta. 2020-2021 järjestettävät koulutukset keskittyvät opetusmateriaalien kehittämiseen ja opettajien täydennyskoulutukseen, mutta myös kaikki hankkeessa tuotettu materiaali täytyy olla saavutettavaa.

Niina testasi sivustoa WebAIMin WAVE-työkalulla sekä Microsoftin Accessibility Insights for Web -työkalulla omalla Windows-koneellaan. Samanaikaisesti Sanjit ja Kaisa testasivat sivustoa Yorkissa.

Ensimmäisen kierroksen huomiot:

  • Yläpalkin navigaatio ei toimi perustoiminnoilla.
  • Ruudunlukijalla luettaessa kappaleenvaihdot toimivat ihan hyvin. Kuulija kestää, vaikka lukija sanoo ääneen sanan ”tyhjä” yhden kerran. Monta tyhjää peräkanaa olisi ärsyttävää.
  • Tekstit itsessään olivat sopivan mittaisia ja niitä jaksoi kuunnella.
  • Kaikissa kuvissa ei ollut kuvailevaa alt-tekstiä ruudunlukijaa varten.

Suurimmaksi haasteeksi muodostui yläpalkin navigaatio. Sivulta toiselle ei pystynyt kulkemaan, koska navigaatio muodostui ns. lista-elementeistä, jotka kaikki olivat samanarvoisia. Ruudunlukija ei siis osannut vaihtaa listan elementistä toiseen.

Korjausliikkeenä testasimme erilaisia vaihtoehtoja navigaatiolle. Google tarjoamat vaihtoehdot eivät toimineet, joten lopulta päädyimme lisäämään sivuston alareunaan erillisen navigaation painikkeiden avulla. Sanjit on tehnyt omassa väitöskirjatyössään lukuisia haastatteluja sokeiden kanssa. Haastattelujen mukaan on ihan ok, jos navigaatio löytyy etusivulta, jolle voi aina palata. Riittää kun tietää mistä pääsee kulkemaan. Me kuitenkin päätimme, että teknisen käytettävyyden takia on parempi, että painikkeet ovat kaikilla sivuilla.

Kuvatekstit lisättiin ja muutama ylimääräinen tyhjä poistettiin.

Toisessa testiajossa sivusto olikin jo huomattavasti saavutettavampi eikä välittömiä korjaustarpeita enää ilmennyt.

Mitä siis muistaa saavutettavuuden kannalta:

  • Selkeä ja yksinkertainen kieli toimii ruudunlukijalla parhaiten
  • Muista kuvien alt-tekstit, jotta ruudunlukija pystyy kertomaan, mitä kuvissa on. Kerro kuvista niin, että niiden merkitys tekstiin säilyy. (context, and content richness stays)
  • Selkeä layout ilman kikkailua lisää saavutettavuutta ja antaa mahdollisuuden kaikille käyttäjille, vaikka visuaalinen ilottelu ehkä jäisikin vähemmälle.
  • Tarkista, että sivun navigaatio toimii erilaisilla koneilla, alustoilla ja selaimilla myös ruudunlukijan varassa. Toimimaton navigointi voi aiheuttaa ikuisen loopin (ns. “Keyboard trap”).

Linkkejä

Mainokset

Vastaa

Täytä tietosi alle tai klikkaa kuvaketta kirjautuaksesi sisään:

WordPress.com-logo

Olet kommentoimassa WordPress.com -tilin nimissä. Log Out /  Muuta )

Google photo

Olet kommentoimassa Google -tilin nimissä. Log Out /  Muuta )

Twitter-kuva

Olet kommentoimassa Twitter -tilin nimissä. Log Out /  Muuta )

Facebook-kuva

Olet kommentoimassa Facebook -tilin nimissä. Log Out /  Muuta )

Muodostetaan yhteyttä palveluun %s