Korkeakoulujen verkkosivujen saavutettavuuskartoitus 2020

Johdanto: Saavutettavuus edistää yhdenvertaisuutta

Hannu Puupponen ja Merja Laamanen

Euroopan Unionissa tuli 2016 voimaan Saavutettavuusdirektiivi (EU) 2016/2102. Saavutettavuusdirektiivin toteuttamiseksi Suomessa säädettiin Laki digitaalisten palvelujen tarjoamisesta 306/2019. Lain mukaan ”Digitaalisten palvelujen tietosisältöjen on täytettävä saavutettavuusvaatimukset, kun tietosisältö on palvelun käyttäjien saatavilla.” (1). Käytännössä saavutettavuusvaatimusten täyttäminen tarkoittaa Web Content Accessibility Guidelines (WCAG) 2.1 ohjeiden AA-tason vaatimusten toteuttamista, muutamin poikkeuksin (2). Julkisen sektorin toimijoiden, myös korkeakoulujen, kaikkien julkisten verkkosivujen tulee olla vaatimusten mukaisia 23.9.2020 mennessä. (1).

Direktiivi, uudet vaatimukset ja tekniset ohjeet saattavat monesta tuntua raskaille omaksua. Toisaalta ohjeistuksen ja saavutettavien verkkosivujen tarve on tiedostettu jo 90-luvulla (3). Direktiiviin päädyttiin vasta, kun julkishallinnon sivujen esteet eivät monista kannustavista EU-aloitteista huolimatta poistuneet.

Lain lähtökohtana on edistää vammaisten henkilöiden yhdenvertaisia mahdollisuuksia käyttää digitaalisia palveluja (1). Samalla saavutettavuuteen keskittyvä tutkimus ja kehittäminen hyödyttävät kaikkia, varsinkin palvelujen käyttäjiä, joilla on esimerkiksi verkkoyhteyksiin, laitteisiin, ympäristön ääni- tai valaistusolosuhteisiin liittyviä tilannekohtaisia rajoitteita (4).

Digitaalisen saavutettavuuden toteuttaminen vaikuttaa käytännössä monien tehtäviin myös korkeakouluissa. Moni laatii sisältöjä verkkosivuille, sähköisille oppimisalustoille tai jaettavaksi tiedostomuodossa eri yhteyksissä. Toivomme voivamme osaltamme auttaa saavutettavien verkkopalvelujen toteuttamisessa ja siksi kartoitimme korkeakoulujen kotisivujen saavutettavuutta helmikuussa 2020.

Korkeakoulujen sivujen lyhyt saavutettavuushistoria

Suomalaisten korkeakoulujen verkkosivujen saavutettavuusarviointi julkaistiin ES-VIAL-hankkeessa 2012. Silloin kuuden yliopiston ja yhden ammattikorkeakoulun sivuja tarkasteltiin TAW-validaattorilla ja testaamalla sivujen saavutettavuus näppäimistöllä navigoiden. Kolme sivuista oli saavutettavuudeltaan hyväksyttävällä tasolla, kaksi esteellisen rajamailla ja kaksi esteellisiä. Yleisarviona suomalaisten korkeakoulujen sivut eivät olleet huonoja verrattuna eri maiden vastaavien korkeakoulujen sivuihin (5).

Vuosina 2008 ja 2009 ESOK-hanke kartoitti kaikkien korkeakoulujen 59 aloitussivua Firefox-selaimen laajennoksella. Vertailukohtana oli WCAG 1.0 -kriteeristö, jonka vaatimuksia yksikään sivu ei aivan täyttänyt. Silloisessa arvioinnissa tavallisin ongelmista oli kuvatiedon tekstivastineiden puute, joka ilmeni jokaisella testatulla sivulla (6). Puutteet kuvien ja kuvakkeiden tekstivastineissa eli alt-teksteissä haittaavat esimerkiksi näkövammaisten lukijoiden tiedon saantia ja huonontavat myös sisältöjen löytymistä hakupalveluissa.

Verkkosivujen teknisen toteutuksen lisäksi etsittiin vuosina 2008 ja 2009 korkeakoulujen sivustoilta hakutoiminnoilla tietoa opiskelun esteettömyydestä. Lopputulema sisälsi suuria haasteita: “Korkeakoulujen esteettömyys näyttäytyy verkkosivuilla olevien tietojen perusteella edelleen kovin sirpaleisena ja korkeakoulujen keskinäinen esteettömyysvertailu opintopaikan valintakriteerinä on vaikeaa.” (6). OHO!-hankkeen vastaavanlainen kartoitus 2017 antoi hyvin samankaltaisen tilannekuvan: “Hakijan on kovin vaikea vertailla verkkosivuilla tarjolla olevaa esteettömyys- ja saavutettavuus­tietoa, ei pelkästään sen hajanaisuuden takia, vaan myös tiedon määrän ja sisällön vaihtelun vuoksi” (7).

Yli 10 vuoden tauon jälkeen on ajankohtaista katsoa, miltä korkeakoulujen verkkosivujen tekninen saavutettavuus näyttää - ja millaisia hyviä esimerkkejä ja käytänteitä on löydettävissä.

Kartoitus kahdella, toisiaan täydentävällä testillä

Tämänkertaisessa arvioinnissa kartoitimme ammattikorkeakoulujen (n=24) ja yliopistojen (n=14) koti- eli aloitussivujen saavutettavuutta WAVE- sekä Siteimprove-testeillä Chrome-selaimessa helmikuussa 2020.

Korkeakouluilla on sivustoillaan kymmeniätuhansia verkkosivuja, joten valitsimme kartoitukseen työmäärän rajoittamiseksi ainoastaan kotisivut. Kotisivut ovat “paraatiovi” korkeakoulun muille sivuille ja saavat usein eniten huomiota kehittäjiltä. Lisäksi kotisivun ja muiden sivujen ongelmien välillä on tutkimusten mukaan yhteys (8).

Testisovellukset, WAVE ja Siteimprove, ovat verkkoselaimen maksuttomia laajennoksia, automaattitestejä jotka vertaavat selattavan sivun saavutettavuutta muun muassa WCAG-kriteereihin. Automaattitestien etuja ovat nopeus ja helppokäyttöisyys sekä mahdollisuus arvioida myös sivuja, joita ei ole julkaistu verkossa. Testit kuvailevat ongelmat ja niiden vaikutukset sekä antavat ohjeita saavutettavuuden korjaamiseksi, joten niiden käyttäjän ei tarvitse olla asiantuntija.Toisaalta niiden kyky tunnistaa ongelmia on rajallinen. Kymmenen suositun verkkosivujen saavutettavuustestin vertailussa 2017 löydettiin parhaimmillaan (virheet ja varoitukset) 37 % ongelmista, vähäisimmillään 17 % (9).

KUVA 1. Siteimprove asetuksissa voi valita raportoinnin WCAG-tason, ongelmien vakavuuden ja sivusta vastaavien henkilöiden työnjaon mukaan. WAVE antaa mahdollisuuden tarkastella sivua ilman CSS-tyylejä, jolloin sivun rakenne ja erilaisten ongelmien sijainti ovat selvemmin havaittavissa.

Suositeltavaa on käyttää useampaa testityökalua. Tehokkaimmillaan testaamisessa yhdistetään automaattisia työkaluja manuaalisiin tarkistuksiin, saavutettavuusauditointiin ja käyttäjätestaukseen (9; 10). Tässä kartoituksessa hyödynsimme Siteimprove- ja WAVE-testien yhdistelmää. Tähän yhdistelmä oli kolmen eri automaattisen testin keskinäisessä vertailussa tuloksellisin. Kolmantena vaihtoehtona oli aXe, jota myöskin pidetään hyvänä testityökaluna (10). WAVE- ja Siteimprove-testit painottavat eri tavoin WCAG-ohjeistuksen sisältämiä onnistumiskriteereitä sekä muita verkkosisällön saavutettavuuteen vaikuttavia seikkoja (esimerkiksi html-merkintäkielen oikeellisuutta), joten tulokset ovat epäidenttisiä ja toisiaan täydentäviä.

WAVE- ja Siteimprove-testiraporteissa eritellään virheet (errors) ja varoitukset (alerts/warnings), joihin molempiin on suhtauduttava vakavasti. WAVE-sovelluksessa virheet ovat korjattavia ongelmia ja varoitukset manuaalisesti tarkistettavia kohtia (11). Siteimprove:ssa virheet ovat puutteita WCAG-ohjeistuksen toteuttamisessa, varoitukset koskevat WCAG:n hyvien käytäntöjen ohittamista (12). (Taulukoissa 1.ja 2. varoitukset sisältävät sekä “alerts” että “warnings” -ilmoitukset).

Tässä kartoituksessa otimme huomioon vain virheet ja varoitukset. Käytännössä kaikki testeistä saatava tieto  (myös Siteimprove:n Review sekä WAVE:n Features, Structural elements ja ARIA) kannattaa hyödyntää saavutettavuuden kehittämiseen (13).

Runsaasti virheilmoituksia - värikontrastit suurin ongelmalähde

Kartoitukseen käytämiemme testien raportit tarjoavat hyvän tuen saavutettavuusongelmien korjaamiselle, mutta tulosten tallentamiseen ja jakamiseen on paremmat valmiudet sovellusten maksullisissa versioissa. Seuraavassa keskeiset poiminnat raporteista. Kokoava taulukko löytyy  LIITE Virheiden ja varoitusten kokonaismäärät korkeakouluittain -sivulta.

Ammattikorkeakoulujen (n=24) sivuilla WAVE ilmoittaa yhteensä 1875 virhettä ja 1732 varoitusta. Siteimprove löytää 2695 virhettä ja 747 varoitusta (Taulukko 1.).

TAULUKKO 1. Virheiden ja varoitusten määrät ammattikorkeakoulujen kotisivuilla

WAVE:n ilmoittamista 1875 virheestä riittämättömiä värikontrasteja koski 1171, prosentteina 62.5 %, kun 704 ilmoitusta, 37.5 % kertoivat muista ongelmista.

Testatuista ammattikorkeakoulujen sivuista vähiten tunnistettuja ongelmia löytyi Laurean ja Tampereen ammattikorkeakoulun sivuilta.

Yliopistojen (n=14) aloitussivuilta WAVE löysi yhteensä 948 virhettä ja 582 varoitusta, Siteimprove ilmoitti 964 virhettä ja 491 varoitusta. Vähiten virheitä ja varoituksia löytyi Aalto-yliopiston ja Helsingin yliopiston sivuilta. Turun yliopiston sivuilla on uutisvideot tekstitetty, mikä parantaa saavutettavuutta. Maininnan hyvästä kehityksestä ansaitsee myös Taidelyliopiston beta-sivu, josssa ongelmia oli huomattavasti vähemmän kuin testien aikaan käytössä olleella kotisivulla - myös tekstitettyjä videoita löytyi.

TAULUKKO 2. Virheiden ja varoitusten määrät yliopistojen kotisivuilla

Yleisin virhe yliopistojen sivuilla oli tekstin ja taustan riittämätön värikontrasti. WAVE ilmoittaa yksityiskohtaisemmin puutteelliset kontrastit, ja yliopistojen kotisivujen 948 virheilmoituksesta liian laimeita värikontrasteja oli 769 eli 81 %.

Korkeakoulujen sivut sisälsivät keskimäärin 68-112 virhettä/sivu (taulukot 1. ja 2.). Virheiden määrä vaikuttaa suurelle esimerkiksi verrattuna yhdysvaltalaisten yliopistojen verkkosivujen keskimääräiseen 23.8 saavutettavuusongelmaan. Myös WebAIM Million -raportin tieto koulutusalan organisaatioiden 36 virheestä/sivu ja korkeana pidetty internetin miljoonan suosikkisivuston 60 virhettä/sivu (13) ylittyvät.

KUVA 2. Sekä WAVE (kuvassa) että Siteimprove esittävät kontrastit sekä heksakoodeina että värisävyillä ja tarjoavat mahdollisuuden kokeilla värivalintojen vaikutusta.

Virheilmoituksia kertyi runsaasti korkeakoulujen sivujen riittämättömistä värikontrasteista. Tekstin ja taustan välisen kontrastin tulisi olla AA-tason vaatimusten mukaan vähintään 4.5:1 (14). Värikontrasti on teknisesti helppo tarkistaa. Värikontrastilla on huomattava merkitys lukijalle, jonka näkö on heikentynyt mutta myös esimerkiksi mobiilikäyttäjille, jotka tarkastelevat sivustoja pieniltä ruuduilta vaihtelevissa valaistusolosuhteissa.

Linkit ja tekstivastine johtavat tiedon äärelle

Muita yleisiä virheitä olivat ongelmat linkkien, kuvien tekstivastineden, sivun ulkoasun ja lomakkeiden merkinnöissä. Myös näkyvä kohdistus (Focus visible), joka kertoo osoittimen sijainnin sivulla näppäimistön avulla liikkuessa, puuttui muutamalta sivulla ja aiheutti enimmillään 142 virhettä.

Korkeakoulujen kotisivuilla Lue lisää -tyyppiset geneeriset linkkitekstit olivat yksi yleisimmistä ongelmista. Muita linkkeihin liittyviä virheilmoituksia olivat linkkien merkitseminen yksinomaan värillä (myös alleviivausta tai lihavointia suositellaan linkkien havaittavuuden varmistamiseksi) sekä url-osoitteen tai ylipitkän tekstin käyttäminen linkkinä.

KUVA 3. Siteimprove ilmoittaa samanlaisena toistuvasta linkkitekstistä "Lue juttu", joka johtaa eri osoitteisiin.

Linkkitekstien tulee olla kuvaavia ja kertoa linkin kohteesta, jotta lukija voi tietää, mitä valinnasta avautuu. Esimerkiksi ”Lue lisää” tai ”Klikkaa tästä” eivät kerro kohteesta. Ruudunlukuohjelmaa käyttävä lukija voi tiedonhaussaan listata linkit aakkosjärjestykseen, jolloin joukko Lue lisää -tyyppisiä identtisiä linkkejä ei auta halutun tiedon jäljille. Jos linkki ohjaa esimerkiksi pdf- tai word-dokumenttiin, myös tämä kannattaa kertoa linkkitekstissä. (18; 19).

KUVA 4. WAVE-raportti kertoo epäilyttävistä tekstivastineista, jotka osoittautuvat tiedostonimiksi.

Tekstivastine eli alt-teksti tarjoaa kuvamuotoisen informaation tekstinä ja edistää sisällön saavutettavuutta, kun lukija

• ei näe kuvia
• kuuntelee tekstisisällön
• käyttää hakupalvelua (20; 21).

Jos kuva ei tarjoa merkityksellistä tietoa, se tulisi käsitellä CSS-, ei HTML-koodissa. Tarvittaessa koristekuvan tekstivastine jätetään tyhjäksi merkinnällä alt=””. Korkeakoulujen sivuilla osalta kuvista tekstivastine puuttui kokonaan tai sen tilalla oli tiedoston nimi tai automaattisesti tuotettu, kuvan sisältöä vastaamaton teksti.

Korkeakoulujen sivujen evoluutio askeettisesta pursuavaan

Useilla sivuilla yksittäisistä virhelähteistä merkittävimmät ovat korkeakoulun brändivärit ja sosiaalisen median syötteet, joten päivityksiä tarvittaneen myös organisaation viestintäkulttuuriin ja -ohjeistuksiin (19). Sivuilla on yleisesti liikkuvia kuva-aiheita, dramatiikkaa ja vuorovaikusta - varsinkin keväällä, kun kilpaillaan opiskelusta kiinnostuneiden hakijoiden huomiosta. Myös sivujen sisällön määrässä on merkittävä muutos (7). Korkeakoulujen kotisivut mahtuivat vielä vuonna 2010 yleisesti käytössä olleisiin tietokoneen näyttöihin kokonaan eikä sivuilla ollut vierityspalkkia pystysuunnassa. Nyt korkeakoulujen sivut sisältävät 4-5 “näyttöruudullista” monenkirjavaa sisältöä.

KUVA 5. Metropolia.fi maaliskuu 2010. Internet Archive Wayback Machine

Vastaavat haasteet ja niiden seuraukset konkretisoituivat englantilaisessa Click-Away Pound -selvityksessä 2019. Asiakkaat, joilla on jokin vamma tai rajoite, kertoivat verkko-ostosten keskeyttämisen yleisimmiksi syiksi:

1. Sivut, joilla on liikaa sisältöä 66%
2. ”En ole robotti” CAPTCHA testit 59%
3. Huonon luettavuuden (kontastit, tekstin asettelu) 56%
4. Liikkuvien kuvien ja grafiikoiden häiritsevän vaikutuksen 53%
5. Puutteet hypertekstilinkeissä 59% (77% ruudunlukuohjelmia käyttävät lukijat)
6. Lomakkeiden täyttämisen 56% (20).

Verkkosaavutettavuuden asiantuntija Lawson huomauttaa, että ensimmäiset viisi haastetta eivät ole teknisiä vaan suunnittelun ja kirjoittamisen kysymyksiä (20).

Tekniset ongelmat ja kulttuurinen muutos

Kartoitus osoitti, että korkeakoulujen sivujen saavutettavuus vaihteli suuresti WCAG-virheiden määrällä mitattuna. Muutamalla korkeakoululla oli jokseenkin virheettömät sivut, mutta keskimäärin ongelmia oli runsaasti, osalla sivuista sadoittain. Monien virheiden kohdalla korjaukset eivät ole monimutkaisia. Teknisten puutteiden lisäksi kotisivujen saavutettavuutta ja käytettävyyttä heikensivät suunnittelun ja sisällön tuotamisen ratkaisut, kuten sivujen sisällön suuri määrä, liikkuvien kuvaelementtien ja värien käyttö sekä some-syötteet. Yksittäinen henkilö voi omissa tehtävissään osaltaan edistää saavutettavuutta, mutta yhteisön toiminnan kehittämiseksi tarvitaan myös ohjeita, osaamista ja johtamista (21). Saavutettavuuden toteuttaminen on kulttuurinen muutos, jonka onnistuminen edellyttää koko korkeakouluyhteisön sitoutumista ja yhteistyöverkoston tukea.

Lähteet

1. Laki digitaalisten palvelujen tarjoamisesta (https://www.finlex.fi/fi/laki/alkup/2019/20190306).
2. WCAG 2.1: lain vaatimukset. Saavutettavuusvaatimukset.fi (https://www.saavutettavuusvaatimukset.fi/lait-ja-standardit/wcag-2-1/)
3. Rauhala-Hayes, M., Topo, P. ja Salminen A-L. 1998. Sitra 172. Kohti esteetöntä tietoyhteiskuntaa.
4. The role of accessibility in a universal web. Henry, Shawn Lawton, Shadi Abou-Zahra, and Judy Brewer. 2014. Association for Computing Machinery (https://dspace.mit.edu/bitstream/handle/1721.1/88013/SLHenry-W4A2014-MIT.pdf?sequence=1&isAllowed=y)
5. Accessibility and readability of university websites in Finland. Karhu, M., Hilera, J., Fernández, L & Rios, R. 2012. (http://www.esvial.org/wp-content/files/paper_Cafvir151.pdf)
6. Korkeakoulujen aloitussivujen esteettömyys. ESOK-hanke 2009. (http://www.esok.fi/esok-hanke/julkaisut/arvio/09/arviointi/wcag09)
7. Esteettömyys- ja saavutettavuustiedot yliopistojen ja ammattikorkeakoulujen verkkosivuilla vuonna 2017. Sari Hanska. (http://www.esok.fi/oho-hanke/julkaisut/esteettomyysraportti-2017)
8. The WebAIM Million. An accessibility analysis of the top 1,000,000 home pages. WebAIM 2019. (https://webaim.org/projects/million/)
9. What we found when we tested tools on the world’s least-accessible webpage. Mehmet Duran. 2017 Accessibility in government. GOV.UK. (https://accessibility.blog.gov.uk/2017/02/24/what-we-found-when-we-tested-tools-on-the-worlds-least-accessible-webpage/)
10. Which accessibility testing tool should you use? Paul Stanton 2018. Pulsar. (https://medium.com/pulsar/which-accessibility-testing-tool-should-you-use-e5990e6ef0a).
11. WAVE Help. (https://wave.webaim.org/help)
12. What is the difference between Errors, Warnings and Reviews in Accessibility? Bryn Anderson 2019. https://support.siteimprove.com/hc/en-gb/articles/206343973-What-is-the-difference-between-Errors-Warnings-and-Reviews-in-Accessibility-
13. Higher Ed in 4k Project. An accessibility analysis of up to 100 web pages from every college and university in the United States. Pope Tech 2020. (https://4k.pope.tech/)
14. Web Content Accessibility Guidelines (WCAG) 2.1. Virallinen suomenkielinen käännös. (https://www.w3.org/Translations/WCAG21-fi/)
15. Linkit. Yleiset ohjeet saavutettavasta sisällöstä. Celia. https://www.celia.fi/saavutettavuus/verkkopalvelujen-saavutettavuus/yleiset-ohjeet/#linkit
16. Links and Hypertext. WebAIM. https://webaim.org/techniques/hypertext/
17. Alt Text. Moz.com. https://moz.com/learn/seo/alt-text
18. Alternative Text. WebAIM. https://webaim.org/techniques/alttext/
19. Federal Social Media Accessibility Toolkit Hackpad. Digital.gov 2019. (https://digital.gov/resources/federal-social-media-accessibility-toolkit-hackpad/)
20. Web Accessibility Checklist. 16 Things to Improve Your Website Accessibility. Lawson, B. 2020. (https://websitesetup.org/web-accessibility-checklist/)
21. The State of Digital Accessibility 2019. Phillips, K. Level Access & G3ict. (https://g3ict.org/publication/the-state-of-digital-accessibility-2019).
22. 5 Digital Accessibility Myths Busted. Carie Fisher 2018. Deque. (https://www.deque.com/blog/5-digital-accessibility-myths-busted/)