Esteettömän sisällön luominen

Esteetön sisältö on hyvää sisältöä. Sisältö on esteetöntä, kun kaikki käyttäjäsi voivat käyttää ja lukea sitä. Alla on lueteltu joitain vinkkejä esteettömän sisällön luomiseen ja kirjoittamiseen.

Kirjoita selkeästi

Ohjeet ovat hyviä vain silloin, kun ihmiset ymmärtävät niitä. Jos kirjoitat liian monimutkaisesti, ihmiset eivät ymmärrä sinua. Selkeä kielenkäyttö parantaa esteettömyyttä.

Kirjoita yksinkertaisesti ja ytimekkäästi noudattamalla seuraavia vinkkejä:

Otsikkorakenne

Otsikot ovat erittäin tärkeitä helppokäyttöisen sisällön luomisessa. Niiden avulla näytönlukijoita käyttävät käyttäjät voivat siirtyä suoraan tiettyihin sisältökohtiin nopeasti.

Hyödynnä työkalua, jolla kirjoitat. Kaikki suositut työkalut, esimerkiksi Microsoft Word, PowerPoint ja Open Office, tarjoavat tyyli- ja muotoiluasetuksia, joilla voit varmistaa tiedostojesi asianmukaisen rakenteen. Käytä valitsemasi työkalun tarjoamia tyyli- ja muotoiluasetuksia.

Esimerkki: Otsikko 1 (

)

Otsikkotyylin numerot luovat rakenteellisen kontekstin näytönlukijoille ja auttavat sellaisia käyttäjiä, jotka eivät näe sisältöä hyvin, kunnolla tai ollenkaan, ymmärtämään sisältöä, vaikka he eivät näe sen visuaalisia elementtejä.

Esimerkki:

Esteettömyys koulutuksessa

Esteettömyys Blackboardin tuotteissa

Lisätietoja esteettömän sisällön luomisesta

Sisällön korostaminen

Näytönlukijat eivät tunnista fonttityylejä. Tämä koskee esimerkiksi seuraavia tyyliseikkoja:

  • Väri
  • Lihavointi
  • Kursivointi
  • Alleviivaus
  • Yliviivaus

Tarjoa visuaaliset elementit näiden tyylien avulla. Älä käytä niitä ainoana keinona tietojen välittämiseen tai tärkeyden ilmaisemiseen.

Esimerkki: Punainen teksti näyttää varoitukselta. Näytönlukijoiden käyttäjät eivät tiedä, milloin teksti on punaista. Heiltä jää tämä visuaalinen vinkki näkemättä, jolloin he eivät tiedä kyseessä olevan varoituksen.

Kun haluat antaa tärkeän visuaalisen merkin, muista luoda sille myös esteettömyystyökaluille soveltuva vaihtoehto. Jos lause on tärkeä, käytä sen lopussa huutomerkkiä. Näytönlukijat tunnistavat huuto- ja kysymysmerkit ja muotoilevat lauseet niiden mukaisesti. Tämä tarkoittaa sitä, että näytönlukija ei lue ääneen kysymysmerkkiä, vaan se käyttää kysyvää äänensävyä, kun se lukee kysymyksen ääneen.

Esimerkki: Älä siis ilmaise asioiden tärkeyttä pelkästään fonttityyleillä!

Kuvat Graphics that appear in the system. Administrators can set different images to appear in various parts of the user interface. Can be used for navigation.

Kysy itseltäsi, mikä kuvan tarkoitus on. Onko sen tarkoitus tuoda sivulle visuaalisuutta? Vai antaako se näkevälle käyttäjälle visuaalisesti lisätietoa siitä, mitä on luvassa? Onko kuva sellainen, että kaikkien käyttäjien täytyy voida käyttää sitä, jotta sisältösi ymmärretään?

Jos et tiedät kuvan tarkoitusta, älä käytä kuvaa ollenkaan! Tässä tapauksessa se on vain ylimääräistä sälää, joka aiheuttaa ongelmia oppimishäiriöisille.

Alt-teksti

Jos välität tietoa oppimisen hallintajärjestelmän tai verkkosivuston välityksellä, törmäät varmasti vaihtoehtoisen tekstin kenttään, kun lisäät kuvia. Jos kyseessä on koristekuva, jätä vaihtoehtoisen tekstin kenttä tyhjäksi. Tässä tapauksessa näytönlukija jättää kuvan huomiotta. Kuva on koristeellinen silloin, kun se ei tarjoa mitään lisää sivun tiedoille.

Lisätietoja koristeellisista kuvista Web Accessibility Initiativen verkkosivustossa

Esimerkki: jos sinulla on kuva, joka esittää käyttöliittymän työkaluja, kerro, miten sinne pääsee ja mitä sivulla on. Katso esimerkki sivun kuvan kuvaamisesta.

Jos et halua näytönlukijan ohittavan kuvaa, lisää kuvalle vaihtoehtoinen teksti. Sinun ei tarvitse kertoa vaihtoehtoisessa kuvauksessa, että kyseessä on kuva, koska aputyökalut tietävät jo, että kyseessä on kuva. Ole ytimekäs, selkeä ja kuvaava.

Älä käytä samaa vaihtoehtoista tekstiä kaikissa kuvissa (esimerkiksi Tekstiin liittyvä kuva). Tämä on täysin merkityksetön vaihtoehtoinen teksti.

Jos kyseessä on monimutkainen kuva, pidä vaihtoehtoinen teksti lyhyenä ja lisää kuvan alle kaikille näkyvä kuvateksti, joka sisältää selkeän kuvauksen kuvasta.

Tietokaaviot (infograafit)

Tietokaaviot (tai infograafit) edellyttävät tekstimuotoista vaihtoehtoa. Siinä sinun täytyy kertoa sanoin sama asia, minkä käyttäjät näkevät visuaalisesti. Tekstimuotoisen vaihtoehdon tulisi olla heti tietokaavion jälkeisellä sivulla. Sisällytä sivun alkuun ankkurilinkki, jonka avulla tekstimuotoisen vaihtoehdon voi lukea.

Katso esimerkki tietokaaviosta, jolla on tekstimuotoinen vaihtoehto.

Teksti kuvissa

WCAG-ohjeiden mukaan kuvien ei tulisi sisältää tekstiä. Selitä kuva tekstimuodossa sen sijaan itse sivulla.

Linkit

On erittäin tärkeää, että linkit ovat kuvaavia. Jokaisen linkin tulisi kuvata, mitä käyttäjä voi odottaa linkkiä napsauttaessaan. Tämä on erityisen tärkeää näytönlukijoiden linkkiluettelotyökalulle. Se luettelee vain sivun linkit, ei mitään muuta. Linkeille ei anneta lisäkontekstia.

Esimerkki: Tältä sivulta linkkiluettelo lukisi ääneen seuraavasti: Katso esimerkki sivun kuvan kuvaamisesta, esimerkki tietokaaviosta, jolla on tekstimuotoinen vaihtoehto ja niin edelleen. Kukin linkki kuvaa selkeästi sitä, mitä on luvassa linkkiin siirryttäessä.

  • Vältä liian yleisiä fraaseja (kuten Napsauta tätä tai Lue lisätietoja). Linkkiluettelotyökalut lukevat linkin tekstin täysin annetussa muodossa. Jos sama linkki toistuu koko ajan, tämä hämmentää käyttäjiä: kuvittele, jos kuulisit koko ajan Napsauta tätä, Napsauta tätä, Napsauta tätä jne. Käyttäjien täytyy ymmärtää, minne linkki vie ja miksi linkkiä kannattaa napsauttaa. Kuvaavat linkit antavat kontekstia.
  • Verkko- ja URL-osoitteet eivät anna tällaisia tietoja, joten niitä ei tulisi käyttää. Näytönlukija lukee osoitteen jokaisen kirjaimen erikseen. Tee tekstistä sen sijaan kuvaava.
  • Linkkien avaaminen uudessa ikkunassa voi olla sekavaa. Käytä mahdollisimman vähän uusiin ikkunoihin avautuvia linkkejä. Kun käytät uutta ikkunaa, ilmoita tämä käyttäjillesi.

Luettelot ja taulukot

Anna käyttämiesi työkalujen tehdä osa työstä puolestasi Käytä työkalun luettelomerkkiluetteloita, numeroituja luetteloita ja taulukkotyökaluja. Voit myös hyödyntää lähdekoodia ja käyttää oikeita HTML-tunnisteita.

Luettelot

Oikein luodut luettelomerkilliset luettelot (

    ) kertovat näytönlukijoille, montako kohdetta luettelomerkkiluettelossa on.

    Oikein luodut numeroidut luettelot (

      ) kertovat näytönlukijoille, montako kohdetta luettelomerkkiluettelossa on, ja mahdollistavat kunkin kohteen numeron lukemisen ääneen.

      Taulukot

      Käytä luetteloita taulukoiden asemesta aina, kun se on mahdollista! Taulukoita voi muokata apuvälineitä varten, mutta näytönlukijoiden käyttäjien täytyy muistaa monimutkaisia näppäinkomentoja niissä siirtymiseksi ja niiden ymmärtämiseksi.

      Käytä sarakeotsikoita (). Niiden avulla näytönlukija lukee sarakeotsikon kaikista soluista, joiden läpi käyttäjä kulkee. Tämä antaa kontekstia solun sisällöstä. Kun nimeät sarakkeita ja lisäät tietoja soluihin, huomioi se, miten näytönlukija solun lukisi.

      Älä koskaan luo sisällön visuaalista asettelua taulukoiden avulla.

      Esimerkki esteettömästä taulukosta

      Näppäinkomennot

      Verkkosisällössä käytetään tiettyjä yleisiä näppäinkomentoja. Voit esimerkiksi siirtää kohdistuksen seuraavaan painikkeeseen painamalla Sarkain-näppäintä. Näitä ei tarvitse kuvata. Jos haluat tarkistaa yleiset näppäinkomennot, tutustu JAWS:in näppäinkomentojen pikaoppaaseen.

      Joskus kehittäjät tarvitsevat tiettyjä näppäinkomentoja omien tuotteidensa tarpeisiin. Esimerkiksi Blackboard Collaborate käyttää tiettyjä näppäinkomentoja mikrofonin käyttöön ottamiseen ja käytöstä poistamiseen. Kirjaa tällaiset näppäinkomennot ohjeisiisi.

      Napsautustoimintoja ja näppäinkomentoja ei tulisi käsitellä samassa kappaleessa, sillä ne ovat erillisiä. Jos Macin ja PC:n komennot eroavat toisistaan, anna ne omissa lauseissaan.

      Esimerkki 1

      Kun määritys on valmis, äänesi on oletusarvoisesti vaimennettu ja kuvayhteytesi on piilotettu muilta. Napsauta mikrofonin ja kameran kuvakkeita, kun haluat aloittaa kokoukseen osallistumisen.

      Voit ottaa mikrofonin käyttöön ja poistaa sen käytöstä näppäinyhdistelmällä Alt + M. Voit ottaa kameran käyttöön tai poistaa sen käytöstä näppäinyhdistelmällä Alt + C.

      Esimerkki 2

      Selainpainikkeet tulevat näkyviin, kun jaat esityksen, jotta voit siirtyä diasta diaan.

      Voit siirtyä seuraavaan diaan myös näppäinyhdistelmällä Alt + Page Up. Voit siirtyä takaisin painamalla Alt + Page Down. Jos käytät Macia, paina Alt + Fn + ylänuoli tai Alt + Fn + alanuoli.

      Kuvayhteys

      Videot täytyy tekstittää. Lue lisätietoja videoiden tekstityksestä.