Saavutettavuuden checklist

Kaikkien reunojen kontrastisuhteen on oltava vähintään 3,0:1 taustaansa nähden. Tämä koskee myös toiminnallisten elementtien, kuten tekstinsyöttöjen, valintanappien ja valintaruutujen reunoja.

Kuvakkeiden kontrastisuhteen on oltava vähintään 3,0:1 taustaväreihin nähden.

Tekstin ja taustan välillä on oltava riittävä kontrasti, jotta teksti on luettavissa.

Kuvien tai videoiden päällä olevan tekstin on erotuttava taustastaan riittävästi, jotta se on helposti luettavissa. Värikkäät taustat voivat tehdä tekstistä vaikeammin hahmotettavaa.

Sisällön ymmärtämiseen ja tehtävien suorittamiseen liittyvien ohjeiden ei tulisi perustua pelkästään visuaalisiin tai kuuloon liittyviin ominaisuuksiin, kuten muotoon, väriin, kokoon, sijaintiin, suuntaan tai ääneen.

Näkövammaiset käyttäjät voivat suurentaa sisältöä jopa 400 %. Tällöin sisällön on järjestyttävä pystysuunnassa (yhtenä palstana) ja pysyttävä täysin luettavana ja loogisena ilman vaakasuuntaista vieritystä.

Jotkut käyttäjät kiinnittävät laitteensa pysyvästi tiettyyn asentoon (esimerkiksi pyörätuolin käsinojaan). Varmista, että sisältösi toimii sekä pysty- että vaakasuunnassa, eikä rajoitu vain yhteen näyttöasentoon – ellei tietty suunta ole ehdottoman välttämätön.”

Näkevälle käyttäjälle sivun rakenne ja sisältösuhteet näkyvät visuaalisina vihjeinä, kuten otsikoina, välilyönteinä ja väreinä. Kun nämä rakenteet ja suhteet ovat myös tekstimuodossa, kaikkien on helpompi ymmärtää sivustoasi.

Varmista, että kosketusohjaimet, kuten valikkopainike, somekuvakkeet ja gallerian katseluohjaimet, ovat käytettävissä eri kokoisilla käsillä ja kosketuskynillä. Tähän eivät kuulu alaviitteet tai lauseen lopussa olevat pienet kuvakkeet.

Henkilöt, joilla on heikko näkö, saattavat suurentaa tekstiä suuremmaksi kuin oletus 16 px. Jos fonttikoko on määritetty absoluuttisissa yksiköissä (px, pt), selain ei aina kunnioita käyttäjän asetuksia, vaan näyttää tekstin kirjoittajan määrittämällä koolla.

Verkkosivuston sisällön tulisi olla helposti luettavaa ja ymmärrettävää. Sivun asettelun tulisi olla sellainen, että kävijöiden on helppo löytää etsimänsä ja tehdä tarvittavat toimet. On myös tärkeää rakentaa sisältö niin, että avustavat teknologiat voivat käyttää sisältöä samassa järjestyksessä kuin se visuaalisesti esitetty.

Pelkkään väriin perustuvat vihjeet tekevät sisällöstä mahdotonta hahmottaa henkilöille, jotka ovat sokeita, näkövammaisia tai joilla on vaikeuksia erottaa värejä.

Tekstin luettavuus ja selkeys ovat keskeisiä onnistuneen käyttökokemuksen kannalta. Sopiva fonttikoko ja riviväli auttavat näkörajoitteisia lukemaan tärkeän tekstin ja tukevat kognitiivisista rajoitteista kärsiviä keskittymään tekstiblokkeihin.

Jäsentämätön verkkosisältö on vaikeasti hahmotettavaa kaikille – erityisesti henkilöille, joilla on kognitiivisia rajoitteita, sekä näytönlukuohjelmia käyttäville. Otsikot auttavat järjestämään sisältöä ja ohjaavat lukijoita sivustollasi.

Otsikot auttavat käyttäjiä hahmottamaan sivun rakennetta ja sisällön jäsentelyä, vähän kuin sisällysluettelo. Ne jakavat sisältöä niin, että sen voi helposti silmäillä visuaalisesti tai näytönlukuohjelmilla. Puutteellinen tai epäselvä otsikkorakenne vaikeuttaa vierailijoiden työskentelyä ja tiedon löytämistä.

Sanat välittävät merkityksiä ja voivat myös loukata, vaikka se ei olisi tarkoituksena. Pystymme vaikuttamaan teoillamme, ei pelkillä ajatuksilla.

Selkeä ja yksinkertainen kieli hyödyttää kaikkia sivustollasi. Erityisesti siitä hyötyvät henkilöt, joilla on kognitiivisia rajoitteita, sekä vieraskieliset käyttäjät. Selkeä kieli nopeuttaa ymmärtämistä ja auttaa löytämään etsimänsä sekä tekemään tarvitsemansa toimet.

Vältä yleisiä linkkitekstejä kuten “klikkaa tästä” tai “lue lisää”. Näyttöruudun lukijat voivat antaa käyttäjälle yleiskuvan kaikista sivun linkeistä.

Tämä tarkoittaa, että kaikki tärkeä tieto tulisi esittää oikeana tekstinä, ei osana kuvaa, jotta sen voi lukea näytönlukuohjelmilla, suurentaa ja käyttää eri laitteilla.

Alt-teksti kuvailee kuvia käyttäjille, jotka eivät pysty näkemään niitä. Tämä koskee näytönlukuohjelmia, selaimia, jotka estävät kuvien näyttämisen, sekä henkilöitä, joilla on näkövamma tai jotka muuten eivät pysty tunnistamaan kuvaa visuaalisesti.

Kun liikettä käytetään staattisen tekstin taustalla, syntyy niin sanottu syvyysristiriita, joka voi laukaista oireita joillekin käyttäjille. Myös hienovaraiset animaatiot voivat haitata, jos ne sijoitetaan suoraan tekstin taakse. Se, mikä lasketaan liialliseksi liikkeeksi, on osittain subjektiivista. Hyvä nyrkkisääntö on kuitenkin välttää liikettä, joka vie yli 10 % keskeisestä näkökentästä.

Liiallinen liike voi laukaista tasapainohäiriöitä tai epileptisiä kohtauksia. Vahinkojen vähentämiseksi on tärkeää lisätä varoitus liikkuvasta sisällöstä, jos sivustollasi on liiallista liikettä tai jos linkität sivulle, jossa on liiallista liikettä.

Voimakkaat välkkyvät kuvat voivat laukaista epileptisiä kohtauksia. Animaatiot ja taustavideot voivat myös olla häiritseviä ja vaikeuttaa keskittymistä henkilöillä, joilla on kognitiivisia rajoitteita, kuten ADHD.

Osittain näkevät ja heikosti näkevät henkilöt suurentavat tekstiä parantaakseen luettavuutta.

Koristeelliset elementit tulisi piilottaa ARIA-attribuutilla, jotta apuvälineet voivat ohittaa ne.

Näppäimistön käyttäjät liikkuvat sivulla ‘Tab’-näppäimellä linkistä toiseen. Ilman ‘Siirry pääsisältöön’ -linkkiä (tai ‘skip navigation’ -linkkiä) käyttäjät joutuvat näpyttämään ´Tab´ näppäintä kaikkien navigointilinkkien läpi ennen kuin pääsevät varsinaiseen sisältöön.

Ensimmäinen tieto, jonka apuvälineet usein lukevat käyttäjälle on <title>-elementti, joka sijaitsee dokumentin <head>-osassa. Tämä auttaa kertomaan, mille sivulle tai näkymään käyttäjä on siirtymässä.

Sivuston kielen määrittäminen auttaa useampia pääsemään sisältöösi käsiksi. Tämä hyödyttää esimerkiksi apuvälineitä käyttävää väkeä, kuten tekstistä puheeksi -ohjelmien käyttäjiä, tekstityksiä tarvitsevia, sekä ihmisiä, joille kirjoitetun materiaalin lukeminen on vaikeaa.

Landmark-alueet auttavat viestimään sivun tai näkymän rakenteen ja tärkeät osiot apuvälineille, ja ne mahdollistavat nopean pääsyn näihin alueisiin.

Voit viestiä käyttäjälle, että elementtiin voi olla vuorovaikutuksessa, muuttamalla sen ulkoasua ja käyttäytymistä eri tiloissa.

Tyhjät linkit ovat linkkejä, joilla ei ole kohdetta tai sisältöä. Ne voivat hämmentää käyttäjiä ja vaikeuttaa navigointia, erityisesti näytönlukuohjelmien käyttäjille.

Autofocus voi hämmentää käyttäjiä, erityisesti näytönlukuohjelmien käyttäjiä, koska fokus siirtyy automaattisesti lomakekenttään ilman heidän valintaansa. Jos sivulla on muuta sisältöä tai lomake ei ole sivun pääasiallinen tarkoitus, anna käyttäjän itse päättää, milloin hän täyttää lomakkeen.

Jos ylläpidät verkkosivustoja, jotka keräävät henkilötietoja EU:n asukkailta — esimerkiksi lomakkeiden kautta — olet vastuussa rekisterinpitäjänä. Selvitä vastuusi rekisterinpitäjänä ja varmista, että noudatat GDPR:ää. Tietosuojan itsearviointilista voi olla hyödyllinen apuväline.

Tietyt animaatiot voivat olla häiritseviä ja jopa haitallisia. Ne voivat aiheuttaa huimausta, pahoinvointia, päänsärkyä tai kohtauksia, erityisesti ihmisille, joilla on tasapaino- tai valoherkkyyshäiriöitä.

Parallax on suunnittelutrendi, jossa taustaelementit liikkuvat eri nopeudella kuin etualalla olevat elementit scrollattaessa. Tämä liike voi olla haitallista ihmisille, joilla on vestibulaarisia häiriöitä, ja sitä tulisi välttää tai käyttää erittäin varovaisesti ja säästeliäästi.

Scrolljacking tarkoittaa, että sivusto ottaa hallinnan käyttäjän scrollauksesta ja muuttaa sen odottamattomalla tavalla. Tämä voi aiheuttaa sekavuutta, huimausta ja heikentää saavutettavuutta, erityisesti käyttäjillä, jotka käyttävät apuvälineitä tai näppäimistönavigointia.

Yleinen verkkokäytäntö on animoida siirtymä ankkurilinkkiin sivun sisällä. Tämä animaatio voi olla haitallinen henkilöille, jotka ovat herkkiä liikkeelle.

Näppäimistön käyttäjät liikkuvat sivustolla Tab-näppäimellä, siirtyen vuorotellen kaikkiin toiminnallisiin elementteihin. Fokustilat näyttävät, mikä elementti on aktiivinen.

Accordion-elementtien tulisi käyttää ARIA-attribuuttia ilmoittamaan, onko osio avoinna vai suljettu, jotta ruudunlukijat ja muut apuvälineet voivat tulkita tilan oikein.

Monet käyttäjät navigoivat verkkosivustolla pelkästään näppäimistöllä. Tab-navigoinnin järjestyksen tulee olla looginen, jotta käyttäjät voivat siirtyä sivun kaikkien toiminnallisten elementtien läpi järjestyksessä.

Kun näppäimistön käyttäjä siirtyy modaali-ikkunaan (esim. popup tai dialogi) Tab-näppäimellä, fokus tulisi pysyä vain kyseisessä ikkunassa. Tämä estää käyttäjää siirtymästä vahingossa modaalin ulkopuolelle ennen sulkemista. Käyttäjän tulisi myös pystyä sulkemaan modaali painamalla ESC-näppäintä.

Kun elementti on piilotettu (esim. modaalin sulkemisen jälkeen), sen ei pitäisi olla fokusoitavissa Tab-näppäimellä tai muilla näppäimistön komentoilla. Tämä estää käyttäjiä pääsemästä vahingossa piilotettuihin elementteihin ja parantaa sivuston näppäimistönavigoinnin loogisuutta

Kun sinulla on lista useista samankaltaisista elementeistä, kuten kortteja tai luettelomerkkejä, varmista, että ne sijoitetaan aina listaan: joko epäjärjestettyyn listaan <ul> tai järjestettyyn listaan <ol>. Ruudunlukijat ilmoittavat käyttäjälle, että kyseessä on lista ja kuinka monta kohdetta siinä on, kun ne kohtaavat semanttisen listan.

Tekstitykset tekevät videon sisällöstä saavutettavaa kuuroille, huonokuuloisille sekä niille, jotka katsovat videoita ilman ääntä.

Käyttäjien tulisi pystyä keskeyttämään, mykistämään tai pysäyttämään kaiken automaattisen ääni- ja videomateriaalin. Tämä on tärkeää erityisesti liian pitkäkestoisessa tai automaattisesti toistuvassa mediassa.

Automaattisesti toistuva ääni tai video voi häiritä käyttäjiä, erityisesti henkilöitä, joilla on kognitiivisia tai kuuloon liittyviä haasteita. Automaattinen media vaikeuttaa myös ruudunlukijoiden käyttäjien mahdollisuutta kuulla sivun sisältöä. Anna käyttäjän itse päättää, milloin media toistetaan. Varmista, että toiston voi keskeyttää tai mykistää helposti.

Äänikuvaukset kuvaavat videossa tai muussa mediassa esitettävää visuaalista sisältöä. Ne auttavat sokeita, heikkonäköisiä sekä henkilöitä, joilla on kognitiivisia haasteita, ymmärtämään visuaalisia vihjeitä.

Käytä ARIA-tunnisteita (esim. role, aria-label, aria-labelledby) selittämään, mitä kukin sarake, rivi ja solu sisältää. Tämä auttaa näkörajoitteisia käyttäjiä ja niitä, jotka käyttävät ruudunlukijoita, ymmärtämään taulukon rakennetta ja sisältöä.