Setting up a screen reader testing environment on your computer

When you’re designing and developing for accessibility, performing manual testing using a screen reader is important to catch and fix accessibility issues that cannot be caught by automated accessibility testing tools.

Setting up a screen reader testing environment on your computer

Artikkeli on suunnattu näkevälle web-suunnittelijalle, joka haluaa testata kehitettävän sivuston käytettävyyttä ruudunlukijalla.

Artikkelista vinkkasi CSS-Tricks.

Saavutettavan pdf-tiedoston luominen ja ylläpitäminen voi olla varsin työläs tehtävä. Hankejulkaisuksi sopiva, melko yksinkertainen, tekstiä ja kuvia sisältävä verkkosivusto on kohtalaisen helppo rakentaa saavutettavaksi. Hyvin pitkälle päästään, kun huolehditaan tekstien ja taustojen riittävästä kontrastista sekä sivujen rakenteen merkitsemisestä oikeilla otsikkotasoilla. Kun vielä muistetaan käyttää informatiivisia linkkitekstejä ja kuvien alt-tekstejä, ja tarvittaessa kirjoitetaan kuville ja kaavioille laajemmat tekstivastineet, on julkaisu hyvin laajan lukijakunnan saavutettavissa.

Saavutettava verkkosivusto toimii laajalti eri päätelaitteissa ja sitä voidaan käyttää avustavan teknologian, esimerkiksi ruudunlukijan, kanssa. Sivusto myös indeksoituu hakukoneisiin ja on löydettävissä ja helposti luettavissa, kun sivuston aiheita etsitään verkosta. Sivuston eri osioihin on mahdollista linkittää, jolloin sivuston sisältöjä on helppo levittää eteenpäin jakamalla niihin suoria linkkejä.

Verkkojulkaisu mahdollistaa sisällön tehokkaan leviämisen.

Verkkosivusto on tarvittaessa helposti päivitettävissä. Pdf-julkaisua tuotettaessa on usein tarve graafiselle osaajalle, joka työstää julkaisun taitetun version ja luo siitä lopullisen pdf-version. Julkaisun päivittäminen voi olla työlästä, jos alkuperäiset taittotiedostot ovat tekijän hallussa tai jos tiedostot eivät ole enää saatavilla. Verkkojulkaisu voidaan rakentaa pienen perehtymisen myötä omaksuttavan sisällönhallintajärjestelmän avulla, jolloin julkaisun päivittäminen on helppoa ja päivitysvastuuta voidaan jakaa useammalle henkilölle.

Verkkosivustona toteutetusta julkaisusta voidaan saada kävijätilastoja ja esimerkiksi nähdä, mitä sisältöjä lukijat erityisesti lukevat. Pdf-julkaisusta voidaan tilastoida parhaimmillaan latausmäärä sekä reitti, jonka kautta lukija päätyi julkaisun lataussivulle, jos julkaisualusta tämän mahdollistaa. Verkkojulkaisu sen sijaan mahdolistaa monipuolisen kävijätilastoinnin. Tilastoinnin myötä voidaan nähdä, mistä kävijät julkaisuun tulivat, mitä tietoa he hakivat ja mille sisältösivulle he saapuivat, kuinka he liikkuivat sivuilla ja kauanko he viipyivät kunkin sisällön parissa.

Verkkojulkaisun rakentaminen

Julkaisun tärkein asia on sen tietosisältö, joka yleensä tarkoittaa kokoelmaa tekstejä ja kuvia. Julkaisuja voidaan toimittaa ja työstää esimerkiksi siten, että materiaalit jaetaan jossain sopivassa pilvipalveluissa. Verkkojulkaisua rakentaessa voidaan hyödyntää esimerkiksi Google Sites -alustaa, jossa sisältöjä voidaan rakentaa valmiiksi verkkosivuston logiikalla. Sisältöjen ollessa lähes valmiit materiaali voidaan siirtää ja muotoilla lopulliselle julkaisualustalle.

Toteutin verkkojulkaisun Vaikuttava projekti, joka käsittelee vaikuttavuutta hanketoiminnan elinkaaren eri vaiheissa. Julkaisun on toimittanut Osuma-hankkeen projektipäällikkö, yliopettaja Katri Halonen. Tässä työssä Google Sites -alustan hyödyntäminen sisällöntuotannossa osoittautui lopullisen julkaisun näkökulmasta toimivaksi valinnaksi, koska Sitesilla julkaisu saatiin jo alkuvaiheessa sisällöntuottajien kesken verkkosivuston muotoon ja rakenteeseen. Kun tuli aika siirtää materiaali varsinaiseen julkaisujärjestelmään, oli sisällöt jo hyvin jäsennelty selkeiden yläotsikkojen alle.

Siirtovaiheessa kiteytettiin rakenteen osalta enää kahta yläotsikkoa: “Viestinnän vaikuttavuus” vaihtui muotoon “Viestintä” ja  “Hyvän käytänteen paikantaminen” muotoon “Hyvä käytänne”. Tarkoitus oli, että sivuston navigaatio-osion muodostavat aihealueiden nimet olisivat mahdollisimman selkeät ja ytimekkäät hahmottamisen ja käytettävyyden vuoksi.

Sisällönhallinta

Vaikuttava projekti -sivusto on toteutettu WordPress-julkaisujärjestelmällä. WordPress-ohjelmisto, jonka voi ladata WordPress.org -sivustolta, on asennettu Metropolia Ammattikorkeakoulun palvelimelle ja muokattu tarkoitukseen sopivaksi.

Sivuston ulkoasu on toteutettu Reykjavik-ulkoasuteeman pohjalle. Teema on maksuton ja sen on rakentanut WebMan Design / Oliver Juhas. WebMan Desing -teemat ovat lähtökohtaisesti saavutettavia, joten niiden pohjalta voi rakentaa saavutettavia sivustoja luottaen siihen, että esimerkiksi tekstien kontrastit ja teeman tuottama koodi ovat saavutettavia.

Vaikuttava projekti -sivustolla jokaisella sisältöosiolla on WordPress-järjestelmän otsakekuva-toiminnolla toteutettu, näyttävä kuvaelementti sivun otsikon alla. Otsakekuvien tarkoituksena on keventää tekstisisältöä ja antaa kullekin osiolle oma visuaalinen kiinnekohta. Otsakekuvaelementti toistuu sisältösivuilla “haitari (accordion)”-toiminnolla toteutettujen alaosioiden otsikoissa.

WordPress-ohjelmistolle on saatavilla runsaasti erilaisia lisäosia, joilla ohjemiston toiminnallisuuksia ja ominaisuuksia voidaan lisätä. Vaikuttava projekti -sivustolla on käytössä vain yksi lisäosa, Accordion Blocks. Lisäosalla on toteutettu otsikkosivujen alaosien piilottaminen ja esiin tuominen käyttäjän toiminnan mukaisesti. Kun sisältösivu avataan, ovat alaosiot suljettuina, ja kun osion otsikkoa klikataan, avautuu osio luettavaksi. Lisäosa on teknisesti saavutettava, eli sisältö on luettavissa ruudunlukijalla sisältöihin pääsee navigoimaan näppäimistöllä, jos käyttäjä ei esimerkiksi kykene käyttämään hiirtä tai kosketuslevyä.

Viisi vinkkiä verkkojulkaisuun

Parhaat vinkit verkkojulkaisun toteuttamiseen:

1. Selkeytä yläotsikot, määrittele päänavigaatio
2. Luo sisältösoivuille toistuva, johdonmukainen rakenne
3. Korosta ja elävöitä, mutta ei liikaa
4. Kevennä kuvilla
5. Karsi, yksinkertaista

Selkeytä aihealueet sekä yläotsikot ja määrittele päänavigaatio. Kun julkaisun rakenne on looginen ja jaettu selkeiden yläotsikoiden alle, on helppo tuottaa verkkosivustolle johdonmukainen navigaatio, joka kertoo lukijalle, mistä julkaisussa on kyse ja mistä asiat löytyvät.

Luo sisältösivuille toistuva, johdonmukainen rakenne. Käytettävyyden ja saavutettavuuden kannalta on hyvä pitää eri sisältösivut samankaltaisina, niin lukijan ei tarvitse jokaisella sivulla orientoitua uudelleen sisällön esittämistapaan.

Korosta ja elävöitä kohtuudella. Pitkiä tekstimassoja on hyvä jakaa sekä korostaa asioita sopivasti, ja näin antaa antaa lukijan kasteelle kiintopisteitä. Kannattaa kuitenkin varoa liioittelemasta; jos kaikkea korostaa ja elävöittää, tulee sisällöstä meluisaa sekamelskaa, jota on raskas hahmottaa.

Kevennä kuvilla. Kuvat keventävät näkevän käyttäjän käyttökokemusta, ja kuvilla voi havainnollistaa ja kiteyttää asioita. Ylimääräisten kuvituskuvien käyttöä kannattaa harkita, että ajatus ja pysyy itse asiassa.

Karsi, yksinkertaista. Verkossa tietoa etsitään nopeasti silmäillen, joten on tärkeää, että lukija löytää heti ja helposti oleelliset asiat. Olennaiseen keskittyminen auttaa karsimaan ja kiteyttämään asiat myös julkaisua tehdessä, mikä usein johtaa parempaan lopputulokseen myös sisällön kannalta.

Kirjoittaja

Jussi Linkola on projektisuunnittelija ja verkkoviestijä Metropolia ammattikorkeakoulun Media, muotoilu ja konservointi -osaamisalueelta. Osuma-hankkeessa Jussi vastasi verkkosivujen sekä Vaikuttava projekti -verkkojulkaisun toteutuksesta.

Lisätietoja

Osuma-hanke toimi valtakunnallisten Osallistamalla osaamista -kehittämisohjelmien aktivointi- ja koordinointihankkeena vuosina 2018-2021.

Kirjoitus on julkaistu alun perin Metropolia Ammattikorkeakoulun Tikissä-blogissa 25.10.2021.

Julisteet ovat ladattavissa Githubista:

• Englanninkielinen julistesetti pdf-muodossa.
• Muut kieliversiot (ei suomenkielisiä versioita).

Tein edellisessä julkaisussa mainitsemani Oiva-hankkeen mentorointi-podcastin litteroinnin tällä tekniikalla.

Tarvikkeet

1. Tietokone, johon saa liitettyä ulkoisen äänilähteen. Tähän tarvitaan mahdollisesti ulkoinen äänikortti, jossa on mikrofoni/linjatulo äänelle. Minulla oli käytössä Zoom H2N -mikrofoni, joka toimii ulkoisena äänikorttina ja johon saa yhdistettyä myös puhelimen.
2. Matkapuhelin, jossa on mediasoitin ja äänilähtö kuulokkeille
3. Audiokaapeli, joka sopii puhelimen kuulokeliitäntään ja tietokoneen tai äänikortin audioliitäntään (usein toimii 3,5mm uros – 3,5mm uros -audiokaapeli).

Litterointiprosessi

1. Avaa litteroitava podcast tai äänitiedosto matkapuhelimesi mediasoittimella (tai verkkoselaimella, jos tiedosto on jo julkaistu)
2. Liitä matkapuhelin tietokoneeseen audioliitäntään sopivalla kaapella
3. Avaa uusi Google-tekstidokumentti, sitten Työkalut / Puhekirjoitus
4. Käynnistä sanelu ”Klikkaa ja puhu” -painikkeesta.
5. Käynnistä podcast matkapuhelimesta.

Tämän jälkeen pitäisi Google-dokumenttiin muodostua tekstiä podcastin puheen mukaisesti. Onnistumiseen vaikuttaa podcastin äänenlaatu sekä puhujan artikulointi ja puhenopeus. Myös verkkoyhteyden pitää olla hyvä, koska puheentunnistus tapahtuu käsittääkseni Googlen palvelimilla reaaliaikaisesti verkon yli.

Todennäköisesti sanelutoiminnolla tehty litterointi sisältää runsaasti virheitä, joten teksti on käytävä ainakin kertaalleen läpi ääniraidan kanssa. Tässä vaiheessa on hyvä korjata virheet sekä lisätä puhujien nimet ja tarvittaessa aikakoodit dialogiin.

Minulla kului tällä tekniikalla noin 3,5 tuntia 20 minuutin mittaisen podcastin litterointiin ja tekstin muotoiluun ja julkaisemiseen verkkosivuilla.

Muita litterointityökaluja

Puheentunnistus kehittyy ja litterointiin on sovelluksia, joista itselläni ei ainakaan vielä ole kokemusta. Listaan tähän kuitenkin muutaman vaihtoehdon. Suomenkielisten podcastien osalta haasteena on pieni kielialue, jonka vuoksi suomen kieli ei ole etusijalla suurille markkinoille pyrkivien yritysten palveluissa.

• Microsoft Word (Office 365 & Web) – Word-tekstinkäsittelyohjelmaan tuli sanelutoiminto (Dictate) syksyllä 2020, ja lisäksi on toiminto tekstin litteroinnille (Transcribe) äänitiedoston pohjalta. Transcribe toimii tällä hetkellä vain englanninkielisellä puheella, sanelu myös suomeksi. (Päivitys 28.3.2025: Office 365 ja Web toimivat tällä hetkellä erittäin hyvin suomenkielisen aineiston litteroinnissa äänitiedoston pohjalta).
• Sonix
• Watson Speech to Text
• Ääni Company

Jos sinulla on kokemuksia tai vinkkejä podcastien saavutettavuuteen ja tekstiversioiden tekemiseen liittyen, voit jakaa ne kommenttikentässä.

Lue myös edellinen julkaisu, joka käsittelee podcastin suhdetta saavutettavuusvaatimuksiin.

Artikkelin kansikuva: Christopher Ivanov on Unsplash.

Laki digitaalisten palvelujen tarjoamisesta ja WCAG 2.1

Laki digitaalisten palvelujen tarjoamisesta edellyttää siirtymäsäännösten puitteissa, että esimerkiksi viranomaisen ja julkisoikeudellisen laitoksen digitaaliset palvelut ovat saavutettavia.

Saavutettavuusvaatimusten toteutumista valvova viranomainen Aluehallintovirasto ylläpitää saavutettavuusvaatimukset.fi-sivustoa, jonka mukaan on noudatettava WCAG 2.1 eli Web Content Accessibility Guidelines 2.1 -ohjeistusta:

Laki digitaalisten palvelujen tarjoamisesta velvoittaa noudattamaan WCAG-ohjeistuksen uusimman version eli WCAG 2.1 -ohjeistuksen A- ja AA-tason kriteerejä.

WCAG 2.1: lain vaatimukset – Saavutettavuusvaatimukset

WCAG 2.1 ja podcast

Podcast on audiotallenne, joten WCAG 2.1 -ohjeistuksessa sitä käsittelevä kohta on Onnistumiskriteeri 1.2.1 Pelkkä audio tai pelkkä video (tallennettu). Onnistumiskriteerin perusteluja ei ole tämän artikkelin kirjoittamishetkellä suomennettu, mutta englanniksi ne ovat:

The intent of this Success Criterion is to make information conveyed by prerecorded audio-only and prerecorded video-only content available to all users. Alternatives for time-based media that are text based make information accessible because text can be rendered through any sensory modality (for example, visual, auditory or tactile) to match the needs of the user.

Understanding Success Criterion 1.2.1: Audio-only and Video-only (Prerecorded)

Tavoitteena on siis tehdä audio- ja videotallenteiden sisältö saavutettavaksi kaikille käyttäjille. Tekstimuotoinen sisältö on saavutettavaa, koska se voidaan esimerkiksi lukea visuaalisesti tai pistenäytöltä tunnustelemalta, tai se voidaan kuunnella ruudunlukuohjelmalla.

Tavoitteen vaatimukset kuvataan seuraavaasti:

In an audio-only presentation, information is presented in a variety of ways including dialogue and sounds (both natural and artificial). In order to present the same information in accessible form, this technique involves creating a document that tells the same story and presents the same information as the prerecorded audio-only content. In this technique, the document serves as long description for the content and includes all of the important dialogue and as well as descriptions of background sounds etc. that are part of the story.

Providing an alternative for time-based media for audio-only content

Edellisestä käy selväksi, että podcast-äänitallenteen vaihtoehtona on tarjottava tekstidokumentaatio, joka sisältää kaiken puhutun tekstin sekä esimerkiksi taustaäänet, jotka ovat osa kokonaisuutta. Tämä on nähdäkseni ainoa saavutettavuusvaatimusten mukainen tapa toteuttaa podcast.

Täydellisen litteroinnin lisäksi voi olla hyvä tehdä podcast-jaksosta myös tiivistelmä, josta selviävät tärkeimmät asiat. Näin käyttäjä voi tiivistelmän perusteella päättää, haluaako tutustua koko sisältöön.

Esimerkkejä podcastien tekstiversioista

• Oiva mentorointi: mind-set ja mahdollisuus – Tekstiversio – Oiva-hankkeen podcast, jonka olen litteroinut Google-dokumentit-sovelluksen sanelutoimintoa käyttäen (tästä lisää seuraavaksi).

Lue myös julkaisuni Podcast-litterointi Google-dokumentin avulla, jos kaipaat helpotusta tekstivastineen tekemiseen.

Jos sinulla on kokemuksia ja esimerkkejä podcastien saavutettavuuteen ja tekstiversioihin liittyen, tai jos haluat korjata tässä tekstissä olevia päätelmiä, voit jakaa ajatuksesi kommenttiosiossa.

Artikkelin kansikuva:  Dan LeFebvre on Unsplash.

A collection of repeatable SVG background patterns for you to use on your web projects

Kivoja SVG-kuvioita, jotka sopivat käytettäväksi verkkosivujen taustakuvina. Itselläni on nyt kirjoittamishetkellä yksi näistä kuvioista sivuston taustakuvana.

Video sivuaa yleisemminkin saavutettavuusdirektiivin vaatimuksia ja saavutettavuusasioita. Tärkein huomio verkkoon julkaistavien tiedostojen osalta tulee jo videon alkuosassa:

mieti ensin, kannattaako dokumenttia julkaista tiedostona, vai voisiko sen julkaista tavallisena www-sivuna?

Jos julkaiseminen tiedostona kuitenkin on perustelua, huolehdi, että tiedosto on saavutettava.

• Lisää AVIn saavutettavuusainoistoja verkossa.

• Verkkokurssit ketterästi AgileAMK-mallilla (PDF)

Julkaisussa esitellään ketterään verkkokurssikehitykseen soveltuva AgileAMK-malli, laatukortit pedagogisten ja sisällöllisten ratkaisujen tueksi sekä ohjeistetaan käytettävyyden huomioimisessa. Myös vertaisarvioinin ja opetusvidoiden suunnittelu käsitellään kattavasti.

Julkaisu on suositteltavaa luettavaa kaikille verkkokurssien kehittämisestä kiinnostuneille.

How to Disable Gutenberg: Complete Guide | Digging Into WordPress

Gutenberg on aiemmin ollut valinnainen lisäosa, joka lähiaikoina on tulossa osaksi WordPress-ohjelmistoa.