Ohjeita suunnittelun tueksi

Olemme tuottaneet yksinkertaisia infograafeja saavutettavampien verkkopalvelujen suunnittelun tueksi.

Infograafeja on kuusi erilaista, ja ne esittelevät saavutettavuuden huomiointia erilaisten käyttäjien näkökulmasta. Sivulla on infograafien sisältö myös tekstimuodossa.

Ohjeet on käännetty mukaillen Ison-Britannian julkishallinnon gov.uk:n Home Office Digital -yksikön saavutettavuusprojektin julisteista. Tietoa projektista ja linkit alkuperäisiin julisteisiin englanniksi Home Office Digitalin sivuilla

Ohjeet infograafeina

Avaa infograafit pikkukuvakkeista suuremmiksi.

Suunnittelu autismikirjon ihmisille

suunnitteluohjeita autismikirjon ihmisiä varten. Ohjeet löytyvät tekstinä verkkosivulta.

Suunnittelu ruudunlukijoiden käyttäjille

ohjeet ruudunlukijoiden käyttäjille suunnitteluun. Tiedot löytyvät myös tekstinä verkkosivulta.

Suunnittelu heikkonäköisille käyttäjille

suunnitteluohjeita heikkonäköisiä käyttäjiä varten. Ohjeet löytyvät myös tekstinä verkkosivulta.

Suunnittelu ihmisille, joilla on motorisia rajoitteita

suunnitteluohjeita ihmisiä varten, joilla on motorisia rajoitteita. Ohjeet löytyvät myös tekstinä verkkosivulta.

Suunnittelu kuuroille ja kuulovammaisille ihmisille

ohjeita suunnitteluun kuuroille ja kuulovammaisille henkilöille. Ohjeet löytyvät myös tekstinä verkkosivulta.

Suunnittelu ihmisille, joilla on lukivaikeuksia

suunnitteluohjeita ihmisille, joilla on lukivaikeuksia. Ohjeet löytyvät myös tekstinä verkkosivulta.

Ohjeet tekstinä

Suunnittelu autismikirjon ihmisille

Käytä

  • selkeitä, rauhallisia värejä
  • selkokieltä ja selkeää yleiskieltä
  • luetteloita ja kuvaavia väliotsikoita
  • kuvaavia linkkejä ja painikkeita, esim. Liitä tiedostot
  • yksinkertaista ja johdonmukaista asettelua

Vältä

  • liian räikeää värimaailmaa
  • kielikuvia ja sanontoja
  • pitkiä, yhtenäisiä tekstimassoja
  • epämääräisiä linkkejä ja painikkeita, kuten Klikkaa tästä tai Lue lisää
  • monimutkaista ja sekavaa asettelua

Suunnittelu ruudunlukijoiden käyttäjille

Käytä

  • kuvien vaihtoehtoisia kuvauksia ja videoiden tekstivastineita
  • johdonmukaista asettelua, joka takaa myös lähdekoodiin pohjautuvan oikean lukujärjestyksen
  • HTML:n semantiikkaa sisältöjen ja rakenteen merkitsemiseen
  • toteutuksia, joita voi käyttää myös pelkällä näppäimistöllä ilman hiirtä
  • kuvaavia linkkejä ja otsikoita, kuten Ota meihin yhteyttä

Vältä

  • pelkkiä kuvia ja videoita tiedon esittämiseen
  • sekavasti ryhmiteltyä sisältöä
  • rakenteen merkitsemistä pelkällä tekstin sijainnilla tai koon muuttamisella
  • toimintoja, joita voi käyttää pelkästään hiirellä tai kosketusnäytöllä
  • epämääräisiä linkkejä ja otsikoita, kuten Klikkaa tästä tai Lue lisää

Suunnittelu heikkonäköisille käyttäjille

Käytä

  • suurta kontrastia ja kirjasinkokoa (esim. 14 pt)
  • verkkosivuja (HTML) tiedon esittämiseen ladattavien tiedostojen sijaan
  • värin, muodon ja tekstin yhdistelmää merkityksen ilmaisemiseen
  • skaalautuvaa asettelua, jossa tekstin voi suurentaa 200 %:iin ilman että sivua tarvitsee vierittää sivusuunnassa
  • ohjeiden ja tietojen sijoittamista niitä koskevien toimintojen lähelle

Vältä

  • liian pientä kontrastia ja kirjasinkokoa
  • pelkkiä ladattavia tiedostoja, kuten pdf-tiedostoja, tiedon esittämiseen
  • pelkkää väriä merkityksen ilmaisemiseen
  • skaalautumatonta asettelua, jossa sivua joutuu vierittämään sivusuunnassa, kun teksti suurennetaan 200 %:iin
  • ohjeiden ja tietojen sijoittamista kauas niitä koskevista toiminnoista

Suunnittelu ihmisille, joilla on motorisia rajoitteita

Käytä

  • riittävän isoja klikattavia tai napsautettavia toimintoalueita
  • väljyyttä asettelussa ja lomakkeissa
  • toteutuksia, joita voi käyttää myös pelkällä näppäimistöllä tai puheohjauksella
  • mobiili- ja kosketusnäytöille sopivaa ja laitteen asennon mukaan skaalautuvaa asettelua
  • toimintoja, jotka auttavat käyttäjää täyttämään lomakkeita automaattisesti

Vältä

  • hienomotoriikkaa vaativia ratkaisuja
  • toimintojen sijoittelua tiiviisiin rykelmiin
  • hiiren liikuttelua vaativaa dynaamista sisältöä
  • aikakatkaisuikkunoita
  • pitkän tekstin tuottamista ja vierittämistä vaativia toimintoja

Suunnittelu kuuroille ja kuulovammaisille ihmisille

Käytä

  • videoiden tekstityksiä ja äänilähetysten tekstivastineita
  • viittomakielisiä videoita
  • selkeää yleiskieltä
  • väliotsikoita, kuvia ja videoita tekstin lomassa
  • useita viestintä- ja kommunikaatiokanavia yhteydenottoa varten

Vältä

  • tiedon esittämistä pelkkänä ääni- tai videosisältönä
  • pelkkään ääneen perustuvia toimintoja
  • monimutkaisia asetteluja ja valikoita
  • pitkiä, yhtenäisiä tekstimassoja
  • puhelinta ainoana tapana ottaa yhteyttä

Suunnittelu ihmisille, joilla on lukivaikeuksia

Käytä

  • selkeää, yksinkertaista ja ytimekästä sisältöä
  • tekstiä tukevia kuvia ja kaavioita
  • vasemmalle tasattua tekstiä ja johdonmukaista asettelua
  • erilaisia tapoja esittää sisältöä, kuten videoita ja äänitiedostoja tekstin lisäksi
  • toteutusta, jossa käyttäjä voi itse säätää tekstin ja taustan välistä kontrastia

Vältä

  • pitkiä, yhtenäisiä tekstimassoja
  • pitkiä alleviivauksia, kursivointeja tai kirjoittamista pelkillä isoilla kirjaimilla
  • liikaa tietoa ja sisältöä yhdellä sivulla
  • hyvää lähimuistia vaativia toimintoja tai sisältöjä
  • lomakekenttiä, joissa ei hyödynnetä tarkistustyökaluja tai ennakoivaa tekstinsyöttöä