Ajankohtaista

Saavutettavuustestaus

Julkaistu: 9.4.2025
Kategoriat: Saavutettavuus
Lukuaika: 20 min
Blindfolded person typing on a computer while other person is giving instructions

Olitpa suunnittelija, kehittäjä tai sisällöntuottaja, saavutettavuustestauksen tulisi olla osa työtäsi. Testauksen avulla voidaan tunnistaa mahdolliset saavutettavuusongelmat, jotta ne voidaan korjata – niin palvelun saavutettavuuden parantamiseksi kuin sen ylläpitämiseksi uusien ominaisuuksien ja sisällön myötä. Vaikka et olisikaan saavutettavuusasiantuntija, voit silti oppia perustason testausmenetelmiä, joiden avulla löydät yleisiä ongelmia, jotka vaikuttavat moniin käyttäjiin.

Automaattinen testaus

Hyödyt

Automaattinen testaus on tehokas työkalu, joka voi nopeasti löytää useimmat tietyn tyyppiset ongelmat tarkkuudella, jota olisi vaikea saavuttaa manuaalisesti.

Useimmat näistä ongelmista liittyvät koodauskäytäntöihin. Esimerkiksi automaattinen testaus pystyy nopeasti tarkistamaan, onko kaikilla kuvasisällöillä (kuten <img>-elementeillä) tekstivastineet, joita ruudunlukijoiden käyttäjät tarvitsevat.

Rajoitteet

Valitettavasti automaattinen testaus pystyy havaitsemaan vain 10–40 % saavutettavuusongelmistaAvautuu uuteen välilehteen. Automaattiset työkalut voivat johtaa sekä väärin negatiivisiin (jättävät havaitsematta ongelman) että väärin positiivisiin tuloksiin (ilmoittavat ongelmasta, jota ei todellisuudessa ole).

Koska saavutettavuuskäytännöt on suunniteltu vastaamaan todellisten ihmisten tarpeisiin, suurin osa ongelmista täytyy testata manuaalisesti. Esimerkiksi vaikka automaattinen testaus voi tarkistaa, että tekstivastineet ovat olemassa, vain ihminen voi arvioida, ovatko ne kirjoitettu oikein ja välittävätkö ne sen tiedon, jonka niiden on tarkoitus. Voit lukea lisää tekstivastineista Saavutettava käyttöliittymä -sivultamme.

Tietoa aiheesta

Ota huomioon, että alla olevat sisällöt ovat englanniksi.

Väritestaus

WCAG ja värien käyttö

On tärkeää ymmärtää, mitä WCAGAvautuu uuteen välilehteen tarkoittaa väreillä ja niihin liittyvillä termeillä, jotta väärinkäsityksiltä vältytään.

  • Kun WCAG puhuu väristä, he tarkoittavat värisävyä (esimerkiksi punainen vs. vihreä).
  • Kun taas puhutaan kontrastista, viitataan värin kirkkauseroihin tai luminanssiin (esimerkiksi tumma vs. vaalea).

Tarpeeksi kontrastia

WCAG määrittelee vähimmäis- ja suositellut kontrastisuhteet tausta- ja etualan elementtien (kuten tekstin, kuvakkeiden ja kohdistusviivojen) värien välillä. Eri sisältötyypeille ja vaatimustasoille on erilaisia vaatimuksia:

Vaikka useimmat värikontrastiongelmat voidaan arvioida automaattisen testauksen avulla, interaktiivisten elementtien osalta tarvitaan manuaalista testausta, sillä niiden värit muuttuvat usein, kun niitä osoitetaan, niihin fokusoidaan tai ne aktivoidaan.

Varmistaaksesi, että esimerkiksi hover-tilan ja aktiivisen tilan väreillä on riittävä kontrasti, voit käyttää developer tools työkaluja tai selainlaajennusta, joka päivittyy reaaliajassa, kun olet vuorovaikutuksessa sivuston kanssa, kuten WCAG Color contrast checkerAvautuu uuteen välilehteen -Chrome-laajennusta.

Huomioithan, että WCAG:n kontrastivaatimukset eivät aina ole optimaalisia; jotkin yhdistelmät, jotka läpäisevät kontrastitestin, voivat silti olla vaikealukuisia useimmille ihmisille (esimerkiksi punainen teksti mustalla taustalla). Käytä siis silmiäsi ja aivojasi!

Älä koskaan käytä pelkkää väriä

Meidän on varmistettava, että tietoa ei koskaan välitetä pelkästään värisävyn avulla, sillä kaikki ihmiset eivät välttämättä pysty havaitsemaan sitä. Esimerkiksi:

  • Pakollinen kenttä voidaan merkitä sinisellä reunuksella ja sanalla "pakollinen" sen vieressä.
  • Painike, joka vaihtaa päälle ja pois -tilojen välillä, voidaan merkitä esimerkiksi seuraavasti:
    • Värisävyn muutos vihreästä punaiseen sekä sanat "PÄÄLLÄ"/"POIS".
    • Kirkkauden muutos (musta harmaaksi), joko tekstin muutoksella tai ilman.
    • Värisävyn ja kirkkauden muutos (voimakkaan vihreästä vaaleanpunaiseen), joko tekstin muutoksella tai ilman.

Värien mukauttaminen

Parhaiden käytäntöjen mukaan käyttäjän tulisi voida muuttaa oletusarvoisia etu- ja taustavärejä (esimerkiksi käyttämällä omia CSS-tiedostojaan tyylien paikalliseen ohittamiseen selaimessa). Voit testata tätä developer tools työkaluilla tai selainlaajennuksella, joka sallii mukautettujen värimallien käytön.

Tietoa aiheesta

Ota huomioon, että alla olevista sisällöistä osa on englanniksi.

Näppäimistötestaus

Näppäimistöt ja muut vaihtoehtoiset menetelmät

Monet toimintarajoitteiset henkilöt eivät käytä tietokonehiiriä. Jotkut navigoivat näppäimistön avulla, ja jotkut käyttävät vaihtoehtoisia syöttömenetelmiä, joista monet (kuten kytkimet, fyysiset osoittimet sekä silmä- ja liikeanturit) jäljittelevät näppäimistön käyttäytymistä. Varmistamalla, että verkkosivustosi on näppäimistöystävällinen, palvelet todellisuudessa monien muiden teknologioiden käyttäjiä. Lue lisää eri tietoteknisistä apuvälineistä täältä.

Perusnäppäimet

Varmista, että seuraavat perusnäppäimet ovat tuettuja:

  • Tab: hyppää seuraavaan fokusoitavaan elementtiin.
    • Huom: joissakin selaimissa tämä toiminto ei toimi täysin automaattisesti. Esimerkiksi tässä on artikkeli, joka auttaa sinua mahdollistamaan tabuloinnin kaikille fokusoitaville elementeille Safari- ja Firefox-selaimissa.
  • Enter: aktivoi linkit sekä painikkeet.
  • Space: aktivoi painikkeet ja monet `<input>`-elementit sekä valitsee vaihtoehdon `<select>`-pudotusvalikosta.
  • Nuoli: vaihda vaihtoehtojen välillä `<select>`-pudotusvalikoissa ja radiopainikkeiden ryhmissä.
  • Escape: sulje laajennetut `<select>`-pudotusvalikot.  

Kaikki yllä mainitut natiivit HTML-elementit sisältävät jo kuvaillun toiminnallisuuden, joka on toteutettu selaimessa. Jos luot mukautettuja elementtejä, niiden on oltava näppäimistöystävällisiä tavanomaisia käytäntöjä noudattaen. Esimerkiksi käyttäjän on voitava painaa Escape sulkeakseen tai hylätäkseen mukautettuja elementtejä, kuten monitasoisia valikoita tai modaalisia peittokuvia.

Huomioita lomakkeista:

  • Jos painike `type="submit"` on `<form>`-elementin sisällä, Enter-näppäimen painaminen, kun jokin lomakkeen elementeistä on valittuna, laukaisee lomakkeen lähetyksen ilman, että Lähetä-painiketta itse aktivoidaan.
  • Jos `<form>`-elementillä ei ole Lähetä-painiketta, selain etsii ensimmäisen painikkeen, jolla ei ole määriteltyä tyyppiä (eli tyhjää tai puuttuvaa type-attribuuttia), mutta vain lomakkeen sisältä. Jos sellaista ei löydy, lomaketta ei voi lähettää oletusselaimen menetelmillä.

Fokusjärjestys ja näkyvyys

Oletusarvoinen fokusjärjestys seuraa DOM:ia (Document Object Model). Tämä tarkoittaa, että kun käyttäjä liikkuu sivustolla tab-näppäimen avulla, interaktiiviset elementit saavat fokuksen siinä järjestyksessä, jossa ne esiintyvät HTML-koodissa. Fokusjärjestystä voidaan muuttaa `tabindex`-HTML-attribuutilla tai JavaScript-menetelmillä, mutta tätä tulisi tehdä vain erityistapauksissa, joissa ei ole vaihtoehtoa.

Voit testata fokusjärjestystä yksinkertaisesti tab-painikkeella sivun läpi. Fokusjärjestyksen tulisi yleensä seurata visuaalista järjestystä, vaikka poikkeuksiakin on. Esimerkiksi, jos kielivalitsin on visuaalisesti navigointipalkin lopussa, voit asettaa sen tulemaan ensimmäiseksi fokusjärjestyksessä, jotta näppäimistön ja ruudunlukijan käyttäjät voivat vaihtaa sivun kieltä mahdollisimman nopeasti.

Kaikilla fokusoitavilla elementeillä on oltava näkyvä fokusindikaattori. Tämä on niin keskeinen saavutettavuusominaisuus, että selainten on tarjottava oletusarvoisia fokus-tyylejä; valitettavasti saavutettavuusongelmia syntyy usein, koska oletusselaimen fokus on riittämätön tai kehittäjät ovat ohittaneet sen. Voit oppia lisää hyvistä fokus-tyyli käytännöistä sivustomme Saavutettava käyttöliittymä -osiossa.

Tietoa aiheesta

Ota huomioon, että alla olevista sisällöistä osa on englanniksi.

Ruudunlukijan testaus

Miksi tämä kannattaa opetella

Monet tukea tarvitsevat henkilöt käyttävät tekstinlukijoita tai ruudunlukijoita; molemmat ohjelmistotyypit lukevat sivulla olevan tekstin ääneen. Lisäksi ruudunlukijat tarjoavat lisätietoja henkilöille, joilla on näkörajoitteita. Esimerkiksi, jos teksti on linkki, ruudunlukija ilmoittaa siitä; jos se kohtaa tekstittömän elementin, se lukee sen tekstivaihtoehdon.

Ruudunlukijaohjelmistot voivat olla melko monimutkaisia ja aluksi pelottavia. Tässä on kuitenkin hyviä uutisia:

  • Jos näet, et ole yhtä hämmennyksissä kuin täysin sokea henkilö yrittäessään oppia ohjelmistoa, koska voit silti nähdä näytön ja näppäimistön.
  • Perusnäppäimet, joista opit näppäimistötestauksen osiossa, pätevät myös täällä (näppäimistöllä varustetuilla laitteilla).
  • Jos aiot käyttää ruudunlukijaa vain verkkosivustojen testaamiseen, selviät vain muutamilla lisänäppäinohjeilla ja/tai eleillä, jotka olemme koonneet sinulle alle.

Äänet ja kielet

Ruudunlukijan ääni on äänen synteesi, jota käytetään kyseisellä hetkellä.

Kieli voi olla:

  • Käyttöjärjestelmäsi kieli.
  • Ruudunlukijan käyttöliittymän kieli.
  • Verkkosisällön kieli.

Saatat käyttää verkkosivustoa monikielisissä tilanteissa; esimerkiksi käyttöjärjestelmäsi tai ruudunlukijan käyttöliittymä voi olla suomeksi ja verkkosisältö englanniksi. Valitettavasti tämä johtaa ongelmalliseen kielikäyttäytymiseen kaikissa suurimmissa ruudunlukija-, käyttöjärjestelmä- ja selainyhdistelmissä, vaikka sivun tai osan sivusta kieli olisi asetettu oikein. Esimerkiksi ruudunlukija saattaa lukea englanninkielistä tekstiä suomenkielisellä äänellä (tai "aksentilla"). Entinen kollegamme Xurxe Toivo García teki kokeita tästä aiheesta; tutustu hänen artikkeliinsa "The troubled state of screen readers in multilanguage situationsAvautuu uuteen välilehteen” (englanniksi).

Lukuosoitin

Lukuosoitin on indikaattori siitä, missä ruudunlukija "on". Se näkyy usein kehystyksenä kohteen ympärillä. Kun käytät ruudunlukijaa verkkosivustolla, tilanne voi olla seuraavanlainen:

  1.  Osoitin navigointipalkissa, ja ruudunlukija ilmoittaa "Navigointi".
  2. Osoitin jokaisessa linkissä, ilmoittaen "Linkki" plus linkin teksti.
  3. Osoitin navigointipalkissa jälleen ja ilmoittaa "Loppu, navigointi".

Huom: monien (mutta ei kaikkien) ruudunlukijoiden kohdalla, kun lukuosoitin kulkee fokusoitavan elementin yli, se siirtää näppäimistön fokuksen siihen. Fokus pysyy kyseisessä elementissä niin kauan kuin ruudunlukija jatkaa, kunnes se kohtaa uuden fokusoitavan elementin.

Lukutilat

On kaksi yleistä lukutilaa, jotka liittyvät siihen, kuinka aktiivisesti käyttäjä ohjaa lukuosoitinta:

  1. Jatkuva lukutila: Käyttäjä aloittaa lukemisen (painamalla tiettyjä näppäimiä tai suorittamalla tietyn eleen), ja sen jälkeen ruudunlukija käy läpi loput sivusta itsenäisesti.
  2. Hallittu lukutila: Käyttäjä siirtää lukuosoitinta seuraavaan tai edelliseen elementtiin jokaisella kertaa käyttäen tiettyä näppäinkomentoa tai elettä. Useimmat ruudunlukijat antavat käyttäjille mahdollisuuden hallita lukemisen tarkkuutta; tämä voi tarkoittaa esimerkiksi seuraavan kirjaimen, sanan, lauseen tai kappaleen lukemista.

Lisäksi, jos käyttäjä käyttää tab-painiketta hypätäkseen fokusoitaviin elementteihin sivulla, ruudunlukija ilmoittaa jokaisen elementin, kun se tulee fokukseen.

Ruudunlukijat eivät aina ilmoita samaa elementtiä samalla tavalla eri lukutiloissa. Tämän vuoksi on tärkeää testata käyttämällä kolmea juuri kuvaamaamme menetelmää.

Vinkkejä VoiceOveriin macOS:llä (pöytäkoneversiolla)

  • Opettele, miten VoiceOverin voi laittaa päälle ja pois ilman, että sinun tarvitsee siirtyä kohtaan Asetukset > Esteettömyys; tarkka oikotie riippuu järjestelmästäsi (voit myös määrittää oman oikotiesi).
  • Jos testaat sisältöä useilla kielillä, aseta eri kielille omat äänet VoiceOver-työkalujen kautta.

Yleisimmät VoiceOver-näppäinyhdistelmät verkkosivujen testaamiseen macOS:llä

  • VO: VoiceOver-muokkausnäppäin (Caps Lock ja/tai Control + Option asetuksistasi riippuen).
  • Kaikki näppäinyhdistelmät, jotka olet oppinut näppäimistötestausosiossa (Tab, Enter, Välilyönti, nuolinäppäimet ja Escape).
  • Caps Lock: pysäytä/jatka lukemista.
  • VO + A: jatka lukemista siitä kohdasta, jossa ruudunlukuohjelman kohdistin on.
  • VO + Oikea nuoli: siirrä lukukohdistin seuraavaan kohteeseen (hyödyllinen esimerkiksi silloin, kun ruudunlukija kohtaa pitkän kappaleen ja haluat siirtyä seuraavaan ilman, että kuuntelet koko kappaleen).
  • VO + Vasen nuoli: siirrä lukukohdistin edelliseen kohteeseen.

Keskitasoiset VoiceOver-näppäinyhdistelmät verkkosivujen testaamiseen macOS:llä

  • VO + U: avaa VoiceOver-roottori. Pöytäkoneella roottori on valikko, jonka avulla voit valita, miten navigoit nopeasti sivun eri osioissa. Voit jo käyttää tab-näppäintä hypätäksesi kaikkiin fokusoitaviin elementteihin, mutta roottori voi näyttää esimerkiksi listan linkeistä, maamerkeistä, otsikoista, artikkeleista... (tätä voit muokata).
    • Oikea ja Vasen nuoli: siirry roottorilistojen välillä.
    • Ylös ja Alas nuoli: siirry kohteiden välillä roottorilistassa.
    • Enter: valitse kohde roottorilistasta.
    • Escape: sulje roottorivalikko.
  • VO + Fn + Oikea nuoli: siirrä lukukohdistin nykyisen maamerkin loppuun.
  • VO + Fn + Vasen nuoli: siirrä lukukohdistin nykyisen maamerkkialueen alkuun.
  • VO + Välilyönti: aktivoi fokusoitu elementti.

Vinkkejä VoiceOveriin iOS:llä (mobiili)

  • Opettele, miten VoiceOverin voi laittaa päälle ja pois ilman, että sinun tarvitsee siirtyä kohtaan Asetukset > Esteettömyys; tarkka oikotie riippuu järjestelmästäsi (voit myös määrittää oman oikotiesi).
  • Jos testaat sisältöä useilla kielillä, aseta eri kielille omat äänet kohdassa Asetukset > Esteettömyys > VoiceOver > Puhe > Roottorin kielet.

Perus VoiceOver-eleet verkkosivujen testaamiseen iOS:llä

  • 1 sormen napautus: valitse ja lue kohde.
  • 1 sormen kaksoisnapautus: aktivoi kohde.
  • 1 sormen pyyhkäisy oikealle: siirrä lukukohdistin seuraavaan kohteeseen (hyödyllinen esimerkiksi silloin, kun ruudunlukija kohtaa pitkän kappaleen ja haluat siirtyä seuraavaan ilman, että kuuntelet koko kappaleen).
  • 1 sormen pyyhkäisy vasemmalle: siirrä lukukohdistin edelliseen kohteeseen.
  • 2 sormen napautus: pysäytä/jatka lukemista.
  • 2 sormen pyyhkäisy ylös: lue kaikki alusta.
  • 2 sormen pyyhkäisy alas: jatka lukemista siitä kohdasta, jossa ruudunlukuohjelman kohdistin on.
  • 3 sormen pyyhkäisy: selaa (riippuen pyyhkäisysuunnasta).

Keskitasoiset VoiceOver-eleet verkkosivujen testaamiseen iOS:llä:

Mobiilissa VoiceOver-roottori on valikko, joka auttaa sinua:

  • Navigoimaan nopeammin: jos valitset Roottori > Otsikot, voit nopeasti hypätä sivun otsikoiden välillä.
  • Vaihtamaan lukutyyliä: jos valitset Roottori > Sanat, voit lukea yhden sanan kerrallaan.
  • Muuttamaan ruudunlukijan asetuksia: jos valitset Roottori > Kieli, voit vaihtaa ruudunlukijan äänen ("aksentti").

Tässä on joitakin roottoriin liittyviä eleitä:

  • 2 sormen kierto myötäpäivään: seuraava Roottori-lista.
  • 2 sormen kierto vastapäivään: edellinen Roottori-lista.
  • 1 sormen pyyhkäisy alas: seuraava kohde Roottori-listassa.
  • 1 sormen pyyhkäisy ylös: edellinen kohde Roottori-listassa.

Muita hyödyllisiä eleitä:

  • 3 sormen kaksoisnapautus: mykistä ääni (mykistää ruudunlukijan puheen kokonaan, kunnes toistat eleen).
  • 2 sormen "pyyhkäisyele": Poistu (Escape).
  • 3 sormen kaksoisnapautus, pidä ja pyyhkäise ylös: kopioi.
  • 3 sormen kaksoisnapautus, pidä ja pyyhkäise alas: liitä.
  • 3 sormen kaksoisnapautus, pidä ja pyyhkäise vasemmalle: kumoa.
  • 3 sormen kaksoisnapautus, pidä ja pyyhkäise oikealle: tee uudelleen.

Vinkkejä NVDA käyttöön Windowsilla

  • Käynnistä ohjelma kuten mikä tahansa muu; esimerkiksi kaksoisnapsauta työpöydällä olevaa pikakuvaketta.
  • Tässä muutamia asetuksia, jotka kannattaa tarkistaa ja/tai muuttaa. Asetusvalikon avaamiseksi paina NVDA + N (katso seuraava osio NVDA muokkausnäppäimestä) ja siirry kohtaan Preferences > Settings. Tämä avaa asetukset.
    • General > Language: muuta näytönlukijan käyttöliittymän kieli vastaamaan järjestelmän kieltä.
    • Speech > Synthesizer: valitse eSpeak NG tai muu monikielinen synteesi.
    • Speech > Voice: muuta näytönlukijan ääni vastaamaan järjestelmän kieltä.
    • Keyboard > Keyboard layout: voit valita näppäimistöasettelun koneesi mukaan tai valita Laptop, jos haluat VoiceOverin tyylisiä pikanäppäimiä.
    • Keyboard > Select NVDA modifier keys: valinta on sinusta kiinni, mutta kaikkien valintojen valitseminen voi tuoda enemmän joustavuutta.

Perusnäppäinkomennot NVDA verkkosivujen testaamisessa

  • NVDA: NVDA muokkausnäppäin. Oletuksena tämä on Insert, mutta asetuksista voi vaihtaa Insertin ja/tai Numpad Insertin ja/tai Caps Lockin.
  • Kaikki perusnäppäimet, joista mainittiin näppäimistötestausosiossa (Tab, Enter, Space, nuolinäppäimet ja Escape).
  • Control: pysäytä lukeminen.
  • Shift: tauota/jatka lukemista.
  • NVDA + Alanuoli (pöytäkone) tai NVDA + A (kannettava): jatka lukemista nykyisestä kohteesta.
  • Numeronäppäimistö 9 (pöytäkone) tai NVDA + Alanuoli (kannettava): siirrä lukukursori seuraavaan kohtaan (esim. pitkän kappaleen yli hyppäämiseksi).
  • Numeronäppäimistö 7 (pöytäkone) tai NVDA + Ylänuoli (kannettava): siirrä lukukursori edelliseen kohtaan.
  • NVDA + Q: sulje NVDA.

NVDA keskitason näppäinkomennot verkkosivujen testaamiseen

Seuraavat näppäimet siirtyvät seuraavaan kyseistä tyyppiä olevaan elementtiin, ja kun lisätään Shift-näppäin, ne siirtyvät edelliseen kyseistä tyyppiä olevaan elementtiin (alla vain muutama esimerkki):

  • D: maamerkki
  • H: otsikko
  • 1–6: otsikkotasot 1–6
  • K: linkki
  • U: vierailematon linkki
  • V: vierailtu linkki
  • L: lista
  • I: listan kohde
  • NVDA + Enter: aktivoi kohdistettu elementti
  • NVDA + Shift + Z (pöytäkone) tai NVDA + Shift + S (kannettava): kytke lepotila päälle ja pois (koskee vain nykyistä sovellusta)

Vinkkejä JAWS-ohjelman käyttöön Windowsilla

JAWS on maksullinen ohjelma, ja lisenssit voivat maksaa yli 1000 USD. Voit kuitenkin ladata ohjelman ja käyttää sitä ilmaiseksi 40 minuutin jaksoissa.

Käynnistä ohjelma kuten mikä tahansa muu, esimerkiksi kaksoisnapsauttamalla työpöydän pikakuvaketta. Ensimmäisellä kerralla saat valintaikkunan, jossa voit valita 40 minuutin kokeiluversion käytön. Voit myös valita, ettei tätä valintaikkunaa näytetä jatkossa.

Tässä muutamia asetuksia, jotka kannattaa tarkistaa ja/tai muuttaa. JAWS-ikkunan näkemiseksi napsauta JAWS-kuvaketta valikkopalkissa.

  • Language > JAWS Language: muuta näytönlukijan käyttöliittymän kieli vastaamaan järjestelmän kieltä.
  • Options > Voices > Voice Adjustment > Profile Name: valitse Eloquence tai muu monikielinen synteesi.
  • Options > Voices > Voice Adjustment > Synthesizer Language: valitse Match JAWS UI Language.
  • Speech > Voice: muuta näytönlukijan oletusääni vastaamaan järjestelmän kieltä.
  • Options > Basic > Use Keyboard layout: voit valita näppäimistöasettelun koneesi mukaan tai valita Laptop, jos haluat VoiceOverin tyylisiä pikanäppäimiä.
  • Voit sulkea ohjelman sulkemalla JAWS-ikkunan kuten minkä tahansa muun ohjelman.

JAWS perusnäppäinkomennot verkkosivujen testaamiseen

  • JAWS: JAWS muokkausnäppäin. Pöytäkoneella tämä on Insert-näppäin ja kannettavalla Caps Lock.
  • Kaikki näppäimet, joista mainittiin näppäimistötestausosiossa (Tab, Enter, Space, nuolinäppäimet ja Escape).
  • JAWS tai Control: pysäytä lukeminen.
  • JAWS + Alanuoli (pöytäkone) tai JAWS + A (kannettava): jatka lukemista nykyisestä sijainnista.
  • Alanuoli (pöytäkone) tai JAWS + O (kannettava): siirrä lukukursori seuraavaan kohteeseen (esim. pitkän kappaleen yli hyppäämiseksi).
  • Ylänuoli (pöytäkone) tai JAWS + U (kannettava): siirrä lukukursori edelliseen kohteeseen.

JAWS keskitason näppäinkomennot verkkosivujen testaamiseen

Seuraavat näppäimet siirtyvät seuraavaan kyseistä tyyppiä olevaan elementtiin, ja kun lisätään Shift-näppäin, ne siirtyvät edelliseen kyseistä tyyppiä olevaan elementtiin (alla vain muutama esimerkki):

  • R: alue (maamerkki)
  • H: otsikko
  • 1–6: otsikkotasot 1–6
  • U: vierailematon linkki
  • V: vierailtu linkki
  • L: lista
  • I: listan kohde

Vinkkejä TalkBackin käyttöön Androidilla

  • TalkBack voi olla jo asennettuna laitteessasi, tai sen voi joutua lataamaan. Voit ladata esimerkiksi Android Accessibility Suite -sovelluksen Google Playsta, joka sisältää TalkBackin.
  • Opi ottamaan TalkBack käyttöön ja pois käytöstä Asetuksissa. Se voi löytyä kohdasta Asetukset > Esteettömyys > Näytönluku, Asetukset > Esteettömyys > Asennetut palvelut > TalkBack tai jostain muualta järjestelmästä riippuen.
  • TalkBackille voi määrittää pikakuvakkeen. Se saattaa löytyä kohdasta Asetukset > Esteettömyys > Lisäasetukset tai muualta järjestelmästä riippuen. Käytettävissä olevat pikakuvakkeet riippuvat laitteestasi, mutta vaihtoehtoina voi olla esimerkiksi Virtapainike ja Äänenvoimakkuuden lisäyspainike ja/tai Äänenvoimakkuuden lisäys- ja vähennyspainikkeet.

TalkBackin perustoiminnot verkkosivujen testaamiseen

Kaikki TalkBackin liikkeet tehdään yhdellä sormella, mikä tarkoittaa, että voit suorittaa muut tutut eleet käyttäen enemmän kuin yhtä sormea. Esimerkiksi skrollaukseen TalkBackin ollessa päällä käytä kahta tai useampaa sormea.

  • 1 sormi, yksi napautus: valitse ja lue kohde.
  • 1 sormi, kaksoisnapautus: aktivoi kohde.
  • 1 sormi, pyyhkäisy oikealle: siirrä lukukursori seuraavaan kohteeseen nykyisessä navigointiasetuksessa (esimerkiksi pitkän kappaleen ohittamiseen).
  • 1 sormi, pyyhkäisy vasemmalle: siirrä lukukursori edelliseen kohteeseen nykyisessä navigointiasetuksessa.
  • Napauta millä tahansa sormimäärällä lukiessa: pysäytä lukeminen.
  • 1 sormi, pyyhkäisy alas ja sitten oikealle: avaa yleisvalikon (Global Context Menu), josta löytyy esimerkiksi:
    • Lue alusta
    • Lue seuraavasta kohteesta
    • TalkBackin asetukset
    • Kielet

TalkBackin keskitason toiminnot verkkosivujen testaamiseen

  • 1-sormen pyyhkäisy alas: siirry seuraavaan navigointiasetukseen. Asetukset voivat sisältää seuraavaa:
    • Oletus: pyyhkäisy oikealle siirtää lukukohdistimen seuraavaan kohteeseen riippumatta siitä, mikä se on.
    • Otsikot: pyyhkäisy oikealle siirtää lukukohdistimen seuraavaan otsikkoon, ohittaen väliin jäävän sisällön.
    • Linkit: pyyhkäisy oikealle siirtää lukukohdistimen seuraavaan linkkiin, ohittaen väliin jäävän sisällön.
  • 1-sormen pyyhkäisy ylös: siirry edelliseen navigointiasetukseen
  • 1-sormen pyyhkäisy ylös ja sitten alas: siirtää lukukohdistimen näytön ensimmäiseen kohteeseen.
  • 1-sormen pyyhkäisy alas ja sitten ylös: siirtää lukukohdistimen näytön viimeiseen kohteeseen.
  • 1-sormen pyyhkäisy oikealle ja sitten vasemmalle: siirtää liukusäädintä ylöspäin (esim. äänenvoimakkuuden säätö).
  • 1-sormen pyyhkäisy vasemmalle ja sitten oikealle: siirtää liukusäädintä alaspäin (esim. äänenvoimakkuuden säätö).
  • 1-sormen pyyhkäisy ylös ja sitten oikealle: avaa Paikallinen valikko. Tämä tuo näkyviin valikon, jossa on useita vaihtoehtoja, riippuen valitusta kohteesta. Esimerkiksi:
    • Muokattavassa tekstikentässä saat näkyviin tekstin muokkaukseen liittyviä vaihtoehtoja, kuten kopiointi, liittäminen jne.
    • Muissa kohteissa saat vaihtoehtoja, jotka liittyvät lukutarkkuuteen, ohjaukseen jne.
  • 1-sormen pyyhkäisy alas ja sitten vasemmalle: palaa takaisin.

Tietoa aiheesta

Ota huomioon, että alla olevat sisällöt ovat englanniksi.

Näytönlukijat ja kielet:

VoiceOver (macOS):

VoiceOver (iOS):

NVDA (Windows):

JAWS (Windows):

TalkBack (Android):

Koon testaus

Näytön koko ja suurennus

On tärkeää testata sivustosi toiminta eri laitteilla teknisiä työkaluja hyödyntäen, jotta sen toimivuus eri mittasuhteissa on taattu. Teemme tämän jo osana responsiivista suunnittelua ja kehitystä, mutta WCAGAvautuu uuteen välilehteen asettaa hyvin tarkkoja raja-arvoja saavutettavuude varmistamiseksi.

Sinun tulisi:

  • Developer Tools työkaluja responsiivisuuden tarkasteluun eri näyttökooilla. Teksikoon zoomausta voi myös tarkistaa Firefox-selaimessa valitsemalla tekstikoko-asetuksissa "Suurenna ainoastaan teksti" valintaa.
  • Käyttää selaimen teksti zoomausta tarkistaaksesi että sisältö luettavissa eikä työnny ulos nöytöstä tai peity muun sisällön alle. Sivuston tulisi säilyttää sisältö ja toiminnallisuus vähintään 200 % zoomauksessa, ihanteellisesti jopa 400 % zoomaukseen asti.
  • Varmistaa, että korkealla suurennustasolla sivustoa katsovat käyttäjät eivät joudu skrollaamaan kahteen suuntaan (ellei skrollausta ole ohjelmoitu osaksi komponenttia tätä tarkoitusta varten). Tämä tarkoittaa:
    • Pystysuuntaisessa skrollauksessa (useimmissa tapauksissa): varmista, ettei sisältöä tai toiminnallisuutta menetetä (ilman vaakasuoraa skrollausta) leveydellä, joka vastaa 320 CSS-pikseliä. Esimerkiksi:
      • Leveys 320 pikseliä 200 % zoomauksella.
      • Leveys 1280 pikseliä 400 % zoomauksella.
    • Vaakasuorassa skrollauksessa (harvinainen): vastaavasti kuin yllä, mutta korkeudella, joka vastaa 256 CSS-pikseliä.

Typografia

Sinun tulee varmistaa, että oletusfonttikoot ja rivivälit voidaan käyttäjän toimesta muuttaa ilman, että sisältöä tai toiminnallisuutta menetetään. Voit käyttää teknisiä työkaluja kokeillaksesi alla olevaa CSS-koodia ja tarkistaa, toimiiko sivustosi oikein, kun perusfonttikokoa ja vähimmäisvälityksiä kasvatetaan:

* {
 line-height: 1.5em !important;
 letter-spacing: 0.12em !important;
 word-spacing: 0.16em !important;
}

:root {
 font-size: 25px !important;
}

p {
 margin-top: 2em !important;
 margin-bottom: 2em !important;
}

Tietoa aiheesta

Ota huomioon, että alla olevista sisällöistä osa on englanniksi.

Chrome:

Firefox:

Safari:

Edge:

Muut:

Dokumenttien testaus

Vaatimustenmukaisuus

Kaikki dokumentit on testattava ennen julkaisua. Niiden on täytettävä WCAG 2.1 -vaatimukset, ja PDF-tiedostojen osalta myös PDF/UAAvautuu uuteen välilehteen-standardin (PDF/Universal Accessibility, eli ISO 14289) vaatimukset.

Testausmenetelmät

Koska automaattinen testaus tunnistaa vain 10–40 % saavutettavuusongelmistaAvautuu uuteen välilehteen, manuaalinen testaus on tehtävä käyttäen seuraavia menetelmiä:

  • Väritestaus
  • Näppäimistötestaus
  • Ruudunlukijatestaus

Monissa sisällöntuotantotyökaluissa on sisäänrakennettuja saavutettavuustestaustoimintoja, jotka voivat auttaa havaitsemaan saavutettavuusongelmia. Näitä työkaluja kannattaa käyttää osana työnkulkua ennen dokumenttien julkaisemista tai viemistä.

PDF-tiedostojen testaus

Acrobat Prossa on saavutettavuustyökalupaketti, jonka avulla voidaan tunnistaa ja korjata ongelmia. Automaattisen testauksen suorittamiseksi avaa PDF-tiedosto ja siirry kohtaan Näytä > Työkalut > Saavutettavuus. Valitse "Täysi tarkistus" suorittaaksesi testin ja luodaksesi raportin löydöksistä.

Saatavilla on myös muita automaattisia PDF-saavutettavuustestausohjelmia, jotka voivat olla joko verkkopalveluita tai ladattavia sovelluksia. Lisätietoja löytyy alla olevasta Resurssit-osiosta.

Muista, että automaattisilla testeillä on rajoituksia; hyväksytty testitulos ei takaa täydellistä saavutettavuusvaatimusten täyttymistä, joten manuaalinen testaus on edelleen tarpeen.

Microsoft Officen tiedostojen testaus

Voit testata tiettyjen Microsoft Office -tiedostojen saavutettavuutta sisäänrakennetulla Saavutettavuuden tarkistus -työkalulla, joka on käytettävissä Wordissä, Excelissä, Outlookissa, OneNotessa ja PowerPointissa (Windows, Mac ja pilvi) sekä Visiossa (Windows).

Käynnistä Saavutettavuuden tarkistus siirtymällä kohtaan Tarkista > Tarkista saavutettavuus. Tarkistuksen jälkeen saat luettelon virheistä, varoituksista ja vinkeistä, ja voit klikata kutakin ongelmaa nähdäksesi, miksi se on korjattava ja miten. Lisätietoja Saavutettavuuden tarkistimen säännöistäAvautuu uuteen välilehteen on saatavilla Office-tukisivustolla.

Windowsissa voit myös valita valintaruudun "Pidä saavutettavuuden tarkistus päällä työn aikana," jolloin saat reaaliaikaisia ilmoituksia saavutettavuusongelmista asiakirjan muokkauksen aikana.

Kuten muutkin automaattiset työkalut, Saavutettavuuden tarkistus ei tunnista kaikkia virheitä, joten manuaalinen testaus on tärkeää.

Google Drive –tiedostojen testaus

Google Drivessa on rajallisesti saavutettavuustoimintoja, mukaan lukien automaattisten testityökalujen ja saavutettavien PDF-tiedostojen vientimahdollisuuden puuttuminen. Siinä on kuitenkin saavutettavuusvalikko, jonka voi ottaa käyttöön valitsemalla Työkalut > Saavutettavuusasetukset ja sitten "Ota ruudunlukijan tuki käyttöön". Tämän jälkeen päävalikkoon lisätään kohta "Saavutettavuus".

Saavutettavuusvalikon avulla käyttäjät voivat siirtyä asiakirjan tiettyihin elementteihin, kuten linkkeihin, otsikoihin, listoihin, taulukoihin ja kuviin. Tämän toiminnon avulla voidaan tarkistaa esimerkiksi, että otsikot ovat todellisia otsikoita eivätkä vain otsikoilta näyttävää tekstiä. Tämä on kuitenkin aikaa vievää eikä korvaa kunnollista automaattista testausta. Siksi manuaalinen testaus on välttämätöntä Google Drive -dokumenttien kohdalla.

Grackle SuiteAvautuu uuteen välilehteen on työkaluvalikoima, joka voi täydentää Google Driven puutteita tarjoamalla automaattisia testityökaluja ja mahdollisuuden viedä saavutettavia PDF-tiedostoja. Se on saatavilla Google Docs-, Google Sheets- ja Google Slides -lisäosina. Grackle Suite -Chrome-laajennus toimii Google Docsin ja Sheetsin kanssa. Ilmaisversio mahdollistaa saavutettavuusongelmien tarkistamisen, mutta korjausvinkkien saaminen ja PDF-vientitoiminto vaativat tilauksen.

OpenOffice- ja LibreOffice-tiedostojen testaus

OpenOffice ja LibreOffice eivät sisällä automaattisia testityökaluja. AccessODFAvautuu uuteen välilehteen on avoimen lähdekoodin laajennus LibreOffice Writerille ja OpenOffice Writerille, joka on kehitetty arvioimaan ja korjaamaan saavutettavuusongelmia dokumenteissa, kuten Open Document Format (ODF), Microsoft DOC, Microsoft DOCX ja Office Open XML -tiedostoissa. Valitettavasti AccessODF julkaistiin betaversiona vuonna 2012, eikä sitä ole päivitetty sen jälkeen, joten sen toimivuutta ei voida taata muiden teknologioiden kehittyessä.

AccessODF voi tarkistaa muun muassa seuraavat asiat:

  • Riittämätön värikontrasti
  • Kuvien ja muiden objektien tekstivaihtoehtojen puuttuminen
  • Dokumentin pääkieli ja kielimuutokset dokumentissa
  • Otsikot
  • Taulukot
  • Kuvien yhteensopivuus DAISY-lukuohjelman kanssa, joka on digitaalisten äänikirjojen de facto-standardi

Tietoa aiheesta

Ota huomioon, että alla olevista sisällöistä osa on englanniksi.

PDF-tiedostojen testaaminen

Muiden formaattien testaaminen:

Jos haluat kuulla tarkemmin, miten saavutettavuutta voidaan parantaa kustannustehokkaasti, tilaa webinaaritallenteemme (suomeksi), jossa Annanpurnan toimitusjohtaja ja kaksi Wunderin asiantuntijaa jakavat näkemyksiään aiheesta. Tilauksen yhteydessä saat myös linkin esitykseen, joka sisältää runsaasti hyödyllisiä työkaluja ja verkkosivustoja koskevia linkkejä.

Tilaa webinaaritallenne ja esityksen linkit

Toivotko saavutettavuusauditointia tai tukea digitaalisen ympäristösi saavutettavuuden parantamiseen?

Lähetä viesti asiantuntijallemme tai täytä alla oleva lomake – otamme sinuun yhteyttä!

Aiheeseen liittyvää sisältöä

Ladataan...