Saavutettavuus H5P:ssä

Sisällysluettelo:

1. Mitä on saavutettavuus?

1.1. Lisätietoa

2. Millainen on saavutettava sisältö?

2.1. Teksti

2.2. Linkit

2.3. Mediatiedostot

2.4. Video

2.5. Äänitiedosto

2.6. Kuva

2.7. Tehtävät

3. Sisällön lukemisjärjestyksen testaus H5P:ssä

4. H5P-sisältötyyppien saavutettavuus

4.1. Lista saavutettavista H5P-sisältötyypeistä

4.2. Sisältötyyppejä, joita ei suositella tai joissa on merkittäviä ongelmia

5. Saavutettavuus Interaktiivisessa Videossa

5.1. Videon asetukset

5.2. Käytä saavutettavia sisältöelementtejä

5.3. Ohjeista käyttäjää

5.4. Videon tekstitys

5.5. Visuaaliset elementit, värit ja kontrasti

5.6. Vielä muutama vinkki, miten rakennat loogisen ja rauhallisen vuorovaikutuksen

6. Saavutettavuus Course Presentationissa

6.1. Sisältö ja rakenne

6.2. Tekstin asetukset

6.3. Sisällysluettelo

6.4. Kuvat

6.5. Videot

6.6. Äänet

6.7. Tehtävät

6.8. Sisällön lukemisjärjestys

6.9. Testaa

6.10. Saavutettavan Course Presentationin tarkistuslista

 

 

1. Mitä on saavutettavuus? 

WCAG (Web Content Accessibility Guidelines) on kansainvälinen verkkosisällön saavutettavuusohjeistus. Sisällöntuottajan vastuulla on huolehtia siitä, että kurssille tuotettu sisältö on saavutettavaa.  Saavutettavuudella kiinnitetään huomiota niin oppijoihin kuin heidän erilaisiin tilanteisiinsa, tarpeisiinsa ja mahdollisiin haasteisiinsa. Sisällöntuotannossa on tärkeää huomioida myös tiedon ymmärrettävyys

H5P-sisällön saavutettavuus perustuu kahteen tekijään:

• Tekninen saavutettavuus: Onko itse työkalu rakennettu saavutettavasti.
• Sisällöntuottajan toteutus: Miten sisällöt on suunniteltu ja toteutettu. 

Kun puhutaan siitä, että H5P-sisältötyyppi on ”saavutettava”, yleensä tarkoitetaan, että:

1. Ruudunlukijaohjelmat pystyvät lukemaan sisällön järkevästi ja navigoimaan oikeassa järjestyksessä.
2. Sisällössä voi liikkua näppäimistöllä ja sisällön lukujärjestys on looginen.
3. Kuviin ja mediatiedostoihin on lisätty vaihtoehtoiset kuvaustekstit tai tekstitys.
4. Värit, tekstit ja muut visuaaliset elementit täyttävät saavutettavuusvaatimukset. 

1.1. Lisätietoa

Lisätietoa WCAG vaatimuksista (avautuu uuteen välilehteen): 

WCAG-dokumentin virallinen käännös 
WCAG 2.1: lain vaatimukset  

H5P on dokumentoinut saavutettavuustuen työkalukohtaisesti. Voit tutustua H5P:n ylläpitämään luetteloon tästä.

Voit tarkistaa onko kontrasti riittävä esimerkiksi kontrastitestillä WebAIM Contrast Checker.  

 

2. Millainen on saavutettava sisältö? 

2.1. Teksti 

• Sisällön tulee olla ymmärrettävää ja helposti omaksuttavaa. Vältä vaikeasti ymmärrettäviä termejä.  
• Jaksota pitkät tekstisisällöt ja käytä otsikkotasoja.
• Muista tarkistaa sisällön lukujärjestys, jotta ruudunlukija osaa lukea sisällön oikeassa järjestyksessä.
• Luettelo/lista on erinomainen tapa esittää asiat, sillä se tekee sisällön rakenteesta näkyvän ja loogisen myös apuvälineiden käyttäjille. Muista kuitenkin käyttää tekstieditorin omia Bulleted List tai Numbered List-työkaluja. Älä lisää välilyöntejä tai väliviivoja manuaalisesti.
• Vältä turhia muotoiluja. Käytä vain Moodlen tekstieditorin oletusfontteja ja värejä (käytä värejä harkiten).
• Vältä tekstiä kuvien päällä. Jos lisäät taustalle kuvan, varmista tekstin luettavuus ja riittävä kontrasti.
• Älä ilmaise asioita vain värillä (esim. “vihreä tarkoittaa oikein”) - lisää myös symboli tai teksti. 

2.2. Linkit

Jos lisäät materiaaliin linkkejä, muista kirjoittaa kuvaava teksti, jotta käyttäjä tietää minne on siirtymässä, esimerkiksi ”Katso tästä mitä on saavutettavuus”. Muista myös lisätä tieto, miten linkki avautuu, esimerkiksi ”Avautuu uuteen ikkunaan”.

2.3. Mediatiedostot

Nimeä kaikki ladattavat tiedostot, jotta käyttäjä tietää mitä on lataamassa ja mihin sisältöön materiaali liittyy. Muista myös ohjeistaa, mitä ohjelmaa käyttäjä tarvitsee tiedoston avaamiseen ja/tai muokkaamiseen.

2.4. Video

• Videossa on oltava tekstitys. H5P tukee WebVTT-muotoisia tekstitystiedostoja. Voit tehdä tekstityksen esimerkiksi Subtitle Edit –ohjelmalla (avautuu uuteen välilehteen).
• Tarvittaessa lisää tekstimuotoinen versio videon puheesta ja tärkeistä visuaalisista elementeistä, esimerkiksi linkkinä “Lue transkriptio”.
• Video ei saa alkaa automaattisesti, käyttäjän tulee itse käynnistää video.

2.5. Äänitiedosto

• Kaikilla käyttäjillä täytyy olla mahdollisuus saada sama tieto myös ilman ääntä.  
  Kirjoita tai liitä tekstimuotoinen versio (transkriptio) siitä, mitä äänitiedostossa sanotaan. Transkriptiossa on myös kerrottava mahdolliset merkittävät äänet (esim. “[taustalla kuuluu liikenteen ääniä]”). 
• Käytä kuvailevaa tiedoston nimeä. Tämä auttaa ruudunlukijaa ja käyttäjiä löytämään sisällön helposti.
• Salli äänen hallinta. Älä käytä automaattista toistoa ja anna käyttäjälle mahdollisuus pysäyttää, kelata ja säätää äänenvoimakkuutta.
• Vältä pelkkää ääneen perustuvaa tietoa. Jos äänessä mainitaan tärkeitä lukuja, nimiä tai vaiheita, kirjoita ne myös näkyvään tekstiin.

2.6. Kuva

• Lisää kaikkiin kuviin lyhyt ja kuvaava vaihtoehtoinen teksti (alt-teksti), joka kertoo kuvan olennaisen sisällön tai tarkoituksen.
• Kuvaustekstin voit lisätä avaamalla kuvan asetukset ja kirjoittamalla teksti Vaihtoehtoinen kuvaus -kenttään. Jos kuvalla ei ole merkitystä sisällön kannalta, voit merkitä sen koristeelliseksi kohdasta ”Decorative only”.
• Vältä tekstin sijoittamista kuvaan, sillä ruudunlukijat eivät pysty lukemaan kuvan sisällä olevaa tekstiä. Jos kuvassa on tekstiä (esim. kaavio), kirjoita sama teksti myös kuvauskenttään tai kuvan alapuolelle.  

2.7. Tehtävät

• Lisää selkeä ohjeistus kaikkiin tehtäviin. Selitä, mitä tehtävässä pitää tehdä. Kirjoita ohje näkyvästi tekstinä, ei vain kuvana tai äänitiedostona.
• Tehtävän alussa oleva lyhyt otsikko auttaa ruudunlukijaa ja jäsentää sisältöä.
• Pidä tehtävät yksinkertaisina ja keskittyneinä yhteen asiaan. Jos yhteen tehtävään on liitetty monta vuorovaikutusta, ruudunlukija voi kadottaa järjestyksen. Mieluummin useita lyhyitä tehtäviä kuin yksi valtava.
• Testaa, että jokainen sisällön osa toimii näppäimistöllä.

 

3. Sisällön lukujärjestyksen testaus H5P:ssä

Avaa valmis H5P-materiaali ja testaa sisällön lukujärjestys näin:

1. Avaa aktiviteetti koko näytön tilaan.
2. Paina Tab → siirtyy seuraavaan elementtiin.
3. Paina Shift + Tab → palaa edelliseen.
4. Enter tai Space → aktivoi valinnan.

Jos joku kohta jää väliin, sisältö ei ole saavutettava.

Tällöin tarkista, ettei tehtävässä ole upotettu “ei-saavutettavaa” tyyppiä. 

 

4. H5P-sisältötyyppien saavutettavuus

4.1. Lista saavutettavista H5P-sisältötyypeistä

Löydät alla olevasta listasta saavutettaviksi merkityt H5P-sisältötyypit:

4.2. Sisältötyyppejä, joita ei suositella tai joissa on merkittäviä ongelmia 

• Advanced / Complex Fill in the Blanks (Teknisesti saavutettava, mutta voi olla haastava näppäimistön ja ruudunlukijaohjelmien käyttäjille. Vaatii sisällöntuottajalta huolellista suunnittelua ja testauksia. Varmista myös, että sisällön kieli on määritelty oikein.) 
• Drag the Words (haasteita ruudunlukuohjelmille, voi vaatia erityisiä säädöksiä)
• Find the Hotspot / Find Multiple Hotspots
• Find the Words (ei toimi mobiililaitteella, ei ole helppokäyttöinen)
• Image Juxtaposition, Image Sequencing
• Mark the Words (voi vaatia “text-only” vaihtoehdon)
• Personality Quiz, Questionnaire
• Speak the Words / Speak the Words Set
• Sort the Paragraphs (vaatii hiiren käyttöä, haastava myös ruudunlukijakäyttäjälle)

Lähde: help.h5p.com

 

5. Saavutettavuus Interaktiivisessa Videossa

5.1. Videon asetukset

Anna videolle kuvaava otsikko ja kerro, että kyseessä on interaktiivinen video.

Älä käytä automaattista toistoa (Autoplay), sillä se voi häiritä ruudunlukijoita ja heikentää hallittavuutta.

5.2. Käytä saavutettavia sisältöelementtejä

Kaikki H5P-interaktiiviset elementit eivät ole saavutettavia. Tarkista, mitkä sisältötyypit ovat saavutettavia ennen kuin lisäät ne videolle.  

Kun video on valmis, testaa, että esityksen kaikki sisällöt toimivat näppäimistöllä.

5.3. Ohjeista käyttäjää

Lisää ensimmäiseen interaktioon ohje, esimerkiksi:

”Tämä on interaktiivinen video. 
Videossa on kysymyksiä ja ohjeita, jotka ilmestyvät ruudulle. 
Käytä Tab-näppäintä siirtyäksesi ja Enteriä valitaksesi. 
Videossa on tekstitykset.”

Tämä auttaa myös ruudunlukijakäyttäjää ymmärtämään, mitä odottaa.

5.4. Videon tekstitys

Käytä tekstityksiä jokaisessa videossa. H5P tukee WebVTT-muotoisia tekstitystiedostoja. Voit tehdä tekstityksen esimerkiksi Subtitle Edit –ohjelmalla (avautuu uuteen välilehteen). 

Näin lisäät tekstitykset:

1. Avaa välilehti ”Lataa tai upota video”
2. Tekstiraidat → Tekstitykset  
3. Raidan lähde (WebVTT tiedosto)
4. Klikkaa Lisää-painiketta
5. Valitse VTT-tiedosto.
   
   

Tekstitysten on oltava aikakoodattuja, ei vain yhtenä tekstilohkona.

Tarvittaessa lisää tekstimuotoinen versio videon puheesta ja tärkeistä visuaalisista elementeistä.

Jos käytät YouTube-linkkiä, varmista että siinä on saavutettavat tekstitykset – H5P ei voi korjata puuttuvia YouTube-tekstityksiä.

5.5. Visuaaliset elementit, värit ja kontrasti

Varmista, että kaikki elementit erottuvat selkeästi taustasta. Käytä erottuvaa fonttia. Käytä lyhyitä tekstikenttiä ja vältä vilkkuvia elementtejä tai automaattista animaatiota.

5.6. Vielä muutama vinkki, miten rakennat loogisen ja rauhallisen vuorovaikutuksen

• Pidä interaktiivisia kohtia maltillisesti: 1–2 tehtävää / minuutti riittää.
• Käytä Pause video -asetusta kysymysten yhteydessä, jotta käyttäjä ehtii vastata.
• Vältä liian lyhyitä vastausaikoja ja automaattisia hyppyjä, jotka voivat yllättää käyttäjän.
• Kerro videon alussa lyhyesti, että se on interaktiivinen ja että näppäimistöllä voi vastata.

 

6. Saavutettavuus Course Presentationissa

6.1. Sisältö ja rakenne

Anna diaesitykselle kuvaava otsikko. Lisää otsikko editorin Otsikko-kenttään.

Aloita esitys lyhyillä käyttöohjeilla, esimerkiksi:

“Siirry seuraavalle dialle nuolinäppäimellä tai painikkeella ‘Seuraava’. 
Voit kuunnella äänen ja lukea tekstin. Kaikki tehtävät ovat näppäimistöllä käytettävissä.”

Kerro myös, jos jokin dia sisältää tehtävän, joka ei ole saavutettava (ja tarjoa vaihtoehto).

Course Presentation voi sisältää erilaisia sisältötyyppejä. Vältä niistä sellaisia, jotka eivät ole saavutettavia.

Pidä jokaisella dialla yksi pääasia: Liian paljon elementtejä yhdellä dialla vaikeuttaa ruudunlukijan ja näppäimistön toimintaa.

Käytä H5P:n omia navigointinuolia (Next / Previous) – älä tee omia linkki-painikkeita.

6.2. Tekstin asetukset

Käytä otsikkotasoja: Heading 2 pääotsikoille ja Heading 3 alaotsikoille.

Varmista, että teksti näkyy hyvin ja kontrasti on riittävä. Käytä leipätekstissä H5P:n “Paragraph” -tyyliä.

Jos luot listoja, muista käyttää tekstieditorin omia Bulleted List tai Numbered List-työkaluja.

6.3. Sisällysluettelo

Jos esityksessä on yli 10 diaa, sisällysluettelo on erittäin suositeltava saavutettavuuden kannalta.

Nimeä jokainen dia: avaa sisällysluettelo Näytä sisällysluettelo -painikkeesta (vasemmassa alareunassa) ja kirjoita dian otsikko klikkaamalla otsikkoa.

6.4. Kuvat

Lisää kaikkiin kuviin lyhyt ja kuvaava vaihtoehtoinen kuvausteksti (alt-teksti), joka kertoo kuvan olennaisen sisällön tai tarkoituksen.

Kuvaustekstin voit lisätä avaamalla kuvan asetukset ja kirjoittamalla teksti Vaihtoehtoinen kuvaus -kenttään. Jos kuvalla ei ole merkitystä sisällön kannalta, voit merkitä sen koristeelliseksi kohdasta Decorative only.

Vältä tekstin sijoittamista kuvaan, sillä ruudunlukijat eivät pysty lukemaan kuvan sisällä olevaa tekstiä. Jos kuvassa on tekstiä (esim. kaavio), kirjoita sama teksti myös kuvauskenttään tai kuvan alapuolelle.  

6.5. Videot

Käytä tekstityksiä (WebVTT) jokaisessa videossa. Jos linkität videon YouTubesta, tarkista, että siinä on tekstitykset.

Lisää videoon tekstitys kohdassa:

1. Esteettömyys  
2. Lisää raita
3. Avaa raidan asetukset klikkaamalla ”Raita”.
4. Lisää VTT-tiedosto kohdassa ”Raidan lähde (WebVTT tiedosto)”.

1. Lisää myös interaktiiviseen videoon tekstitys:
2. Avaa välilehti ”Lataa tai upota video”
3. Tekstiraidat → Tekstitykset  

Lisää VTT-tiedosto kohdassa ”Raidan lähde (WebVTT tiedosto)”.

6.6. Äänet

Käytä soittimen teemaa ”Täysi”, joka sallii äänen hallinnan. Älä käytä automaattista toistoa ja anna käyttäjälle mahdollisuus pysäyttää, kelata ja säätää äänenvoimakkuutta. ”Salli säätimet” kohta täytyy olla valittuna.

Kirjoita dialle tekstimuotoinen versio (transkriptio) siitä, mitä äänitiedostossa sanotaan. Transkriptiossa on myös kerrottava mahdolliset merkittävät äänet (esim. “[taustalla kuuluu liikenteen ääniä]”).

6.7. Tehtävät

Käytä vain saavutettavia tehtävätyyppejä.

Lisää selkeä ohjeistus kaikkiin tehtäviin. Selitä, mitä tehtävässä pitää tehdä. Kirjoita ohje näkyvästi tekstinä, ei vain kuvana tai äänitiedostona.

Tehtävän alussa oleva lyhyt otsikko auttaa ruudunlukijaa ja jäsentää sisältöä.

Lisää vain yksi tehtävä per sivu.

6.8. Sisällön lukujärjestys

Sivun sisällön lukujärjestyksen logiikka perustuu elementtien lisäämisjärjestykseen ja niiden kerrosjärjestykseen (z-index). Käytännössä elementti, joka on lisätty ensimmäisenä sivulle, luetaan ensimmäisenä, ja se on kerrosjärjestyksessä alimpana.  

Alla olevasta kuvasta näet, missä järjestyksessä elementit luetaan:

Lukemisjärjestyksen voi tarkistaa editointi vaiheessa valitsemalla ensimmäisen elementin ja painamalla sitten Tab-näppäintä siirtyäkseen seuraavaan elementtiin.  

Voit käyttää "Bring to front" ja "Send to back" -toimintoja, kun haluat muuttaa sisällön lukujärjestystä.

6.9. Testaa

Testaa, että esityksen kaikki sisällöt toimivat näppäimistöllä käyttämällä Tab- ja Enter-näppäimiä.

6.10. Saavutettavan Course Presentationin tarkistuslista

• Jokaisella dialla on otsikko
• Tekstit ovat riittävän suuria ja kontrastisia
• Kaikilla kuvilla on alt-tekstit
• Videoissa ja äänissä on tekstivastine
• Näppäimistönavigointi toimii koko esityksessä
• Käytetyt sisältötyypit ovat saavutettavia
• Ohjeet kerrottu käyttäjälle selkeästi