Sigilan sääntökirja

Mikä on vialla

Kuvalta puuttuu alt-teksti eli koodiin kirjoitettu kuvaus. Ruudunlukija lukee silloin kuvan tiedostonimen, esimerkiksi ”IMG_4032.jpg”, tai ohittaa kuvan kokonaan.

Missä tätä tavallisesti näkee

Tuote- ja artikkelikuvat, bannerit, logot, kuvakkeilla tehdyt painikkeet ja linkit sekä kaaviot.

Korjaus

Lisää kuvaan alt-määrite: <img src="koira.jpg" alt="Ruskea koira noutaa oranssia palloa">. Kerro kuvauksessa se, mikä kuvassa on tärkeää juuri tällä sivulla, ei kaikkea mitä näkyy. Koristekuvalle annetaan tyhjä kuvaus alt="", jolloin ruudunlukija ohittaa sen. Kuvakepainikkeen kuvaus kertoo toiminnon: <button><img src="luuppi.svg" alt="Hae"></button>. Kaaviolle kirjoitetaan lyhyt kuvaus alt-tekstiin ja luvut tekstinä tai taulukkona kaavion viereen. Logon kuvaukseen kirjoitetaan logon teksti. Jos linkissä tai painikkeessa on jo teksti, sen vieressä oleva kuvake on koriste ja saa tyhjän kuvauksen alt="".

Sigilan automaattiset mittarit tälle kriteerille

• Mittarilta puuttuu nimi aria-meter-name

  Mittarilta (<meter> tai role="meter") puuttuu nimi, joten ruudunlukija ei kerro, mitä se mittaa.

  Missä tavallisesti: Kiintiön käytön, varastotilanteen ja salasanan vahvuuden näytöt.

  Korjaus: Nimeä mittari: <label for="kiintio">Tallennustilaa käytetty</label><meter id="kiintio" min="0" max="100" value="40"></meter>.

• Edistymispalkilta puuttuu nimi aria-progressbar-name

  Edistymispalkilta (<progress> tai role="progressbar") puuttuu nimi, joten ruudunlukija ei kerro, minkä etenemistä se näyttää.

  Missä tavallisesti: Latauspalkit ja monivaiheisten lomakkeiden vaihenäytöt.

  Korjaus: Nimeä palkki: <progress aria-label="Tiedoston lataus" value="70" max="100"></progress>.

• Kuvalta puuttuu alt-teksti image-alt

  Kuvalla (<img>) ei ole alt-määritettä lainkaan, joten ruudunlukija lukee tiedostonimen tai ohittaa kuvan.

  Missä tavallisesti: Tuote- ja artikkelikuvat, bannerit ja logot.

  Korjaus: Lisää kuvaus: <img src="koira.jpg" alt="Ruskea koira noutaa oranssia palloa">. Pelkälle koristekuvalle annetaan tyhjä alt="", jolloin ruudunlukija ohittaa sen.

• Kuvapainikkeelta puuttuu teksti input-image-alt

  Lomakkeen kuvana tehdyllä painikkeella (<input type="image">) ei ole alt-tekstiä, joten ruudunlukijan käyttäjä ei tiedä, mitä painike tekee.

  Missä tavallisesti: Kuvina tehdyt haku- ja lähetyspainikkeet.

  Korjaus: Kirjoita painikkeen toiminto alt-tekstiin: <input type="image" src="haku.png" alt="Hae">. Vielä parempi on tavallinen painike, jossa on teksti: <button>Hae</button>.

• Upotetulta sisällöltä puuttuu tekstivastine object-alt

  <object>-elementillä upotetulla sisällöllä ei ole tekstivastinetta.

  Missä tavallisesti: PDF-katselimet, kartat ja vanhojen järjestelmien upotukset.

  Korjaus: Kirjoita kuvaus elementin sisään: <object data="kartta.pdf" type="application/pdf">Toimipisteen kartta: sisäänkäynti on Asemakadun puolella.</object>, tai anna elementille aria-label.

• Kuvaksi merkityltä elementiltä puuttuu nimi role-img-alt

  Elementti on merkitty kuvaksi (role="img"), mutta sillä ei ole nimeä, jonka ruudunlukija voisi lukea.

  Missä tavallisesti: Taustakuvina tehdyt kuvakkeet ja kuvitukset.

  Korjaus: Anna elementille nimi: <div role="img" aria-label="Sademäärä tänään 12 mm"></div>. Pelkkä koriste merkitään aria-hidden="true".

• SVG-kuvalta puuttuu nimi svg-img-alt

  Kuvaksi merkitty SVG-kuva ei kerro ruudunlukijalle, mitä se esittää.

  Missä tavallisesti: SVG-muotoiset logot, kuvakkeet ja kaaviot.

  Korjaus: Anna kuvalle nimi: <svg role="img" aria-label="Yritys Oy:n logo">…</svg>, tai kirjoita nimi SVG:n sisään: <svg role="img"><title>Yritys Oy:n logo</title>…</svg>. Pelkkä koriste merkitään aria-hidden="true".

Mikä on vialla

Pelkkää ääntä sisältävältä tallenteelta, kuten podcastilta, puuttuu tekstiversio, tai äänettömältä videolta puuttuu sekä tekstiversio että ääniraita, joka kertoo kuvan tapahtumat.

Missä tätä tavallisesti näkee

Podcastit, haastattelutallenteet, äänikirjojen näytteet sekä äänettömät tuote- ja palveluesittelyt.

Korjaus

Kirjoita tallenteesta tekstiversio ja sijoita se tai linkki siihen soittimen viereen: <audio controls src="jakso12.mp3"></audio> <a href="/podcast/jakso12-teksti">Jakson 12 tekstiversio</a>. Tekstiversion voi myös avata samalle sivulle <details>-elementillä, jolloin käyttäjän ei tarvitse siirtyä. Äänettömälle videolle riittää tekstikuvaus samaan tapaan tai ääniraita, joka kertoo kuvan tapahtumat.

Mikä on vialla

Tallennetulta videolta, jossa puhutaan, puuttuu tekstitys, tai tekstitys on olemassa mutta ei käytettävissä.

Missä tätä tavallisesti näkee

Omat HTML5-videot, YouTube- ja Vimeo-upotukset sekä esittely-, koulutus- ja kokousvideot.

Korjaus

Omalle videolle liitetään tekstitystiedosto (WebVTT): <video controls src="esittely.mp4"><track kind="captions" srclang="fi" label="Suomi" src="esittely.vtt" default></video>. Merkintä default kytkee tekstityksen päälle oletuksena. YouTubessa ja Vimeossa tekstitys lisätään palvelun omissa asetuksissa. YouTube-upotuksen osoitteeseen voi lisätä ?cc_load_policy=1, jolloin tekstitys näkyy heti. Automaattisesti luotu tekstitys pitää tarkistaa ja korjata ennen julkaisua.

Sigilan automaattiset mittarit tälle kriteerille

• Videolta puuttuu tekstitys video-caption

  Sivun omalta videolta (<video>) puuttuu tekstitystiedosto.

  Missä tavallisesti: Omalle palvelimelle ladatut videot.

  Korjaus: Liitä videoon tekstitys: <track kind="captions" srclang="fi" label="Suomi" src="video.vtt" default>. Merkintä default kytkee tekstityksen päälle oletuksena.

Mikä on vialla

Videolla näkyy tärkeää tietoa vain kuvana, kuten nimiä, osoitteita, hintoja tai tapahtumia, eikä puhe tai mikään tekstiversio kerro niitä.

Missä tätä tavallisesti näkee

Esittelyvideot, joissa yhteystiedot tai hinnat näkyvät vain ruudulla, ohjevideot, joissa tehdään asioita puhumatta, ja uutiskoosteet.

Korjaus

Vaihtoehtoja on kaksi. Kuvailutulkattu versio on erillinen video tai lisä-ääniraita, jossa puhuttu kuvaus kertoo kuvan olennaiset tapahtumat. Tekstiversio kertoo videon koko sisällön, myös kuvassa näkyvät asiat, ja se sijoitetaan videon viereen tai <details>-elementtiin videon alle. Helpoin ennaltaehkäisy on kertoa tärkeät tiedot jo kuvausvaiheessa myös puheessa.

Mikä on vialla

Suorassa lähetyksessä, jossa puhutaan, ei ole samanaikaista tekstitystä.

Missä tätä tavallisesti näkee

Webinaarit, valtuuston ja hallituksen kokousten suorat lähetykset, tapahtumien suoratoistot ja suorat uutislähetykset.

Korjaus

Paras laatu syntyy pikakirjoittajan avulla: ihminen kirjoittaa puheen tekstiksi samalla kun sitä puhutaan, ja teksti syötetään lähetykseen palvelun tekstitysrajapinnan kautta. Lähetyspalveluiden automaattinen tekstitys on suomeksi vielä virhealtis, joten se sopii korkeintaan väliaikaiseksi avuksi. Tallenteeseen tehdään lähetyksen jälkeen tarkistettu tekstitys, jolloin se täyttää myös vaatimuksen 1.2.2.

Mikä on vialla

Tallennetulla videolla on kuvassa tietoa, jota ääniraita ei kerro, eikä videosta ole kuvailutulkattua versiota.

Missä tätä tavallisesti näkee

Esittelyvideot, joissa kamera näyttää reitin, tuotteen yksityiskohdat tai tekstiä puhumatta, sekä ohjevideot ilman selostusta.

Korjaus

Tee videosta kuvailutulkattu versio: puhuttu kuvaus sijoitetaan puheen taukoihin, ja se julkaistaan erillisenä videona tai lisä-ääniraitana. YouTube tukee useampaa ääniraitaa. Jos taukoja ei ole tarpeeksi, tee pidempi versio, jossa kuva pysähtyy kuvauksen ajaksi. Uusia videoita tehdessä kannattaa käsikirjoittaa puhe niin, että se kertoo kuvan olennaiset asiat itse.

Mikä on vialla

Sivun rakenne on tehty pelkällä ulkoasulla: otsikot ovat lihavoitua tekstiä, luettelot viivoilla erotettuja rivejä ja taulukot asettelua, jota ruudunlukija ei tunnista taulukoksi.

Missä tätä tavallisesti näkee

Sisällönhallintajärjestelmän tekstit, joissa otsikko on tehty lihavoinnilla, taulukoiksi asetellut sivupohjat ja lomakkeet, joiden kentät on nimetty pelkällä tekstillä kentän vieressä.

Korjaus

Käytä merkintöjä niiden merkityksen mukaan: otsikot <h1>–<h6> sisällön hierarkian mukaan, luettelot <ul> tai <ol> ja <li>, taulukot <table>, jonka otsikkosolut ovat <th scope="col"> tai <th scope="row">, ja kentän nimi <label for="sahkoposti">Sähköposti</label><input id="sahkoposti">. Ulkoasu tehdään tyyleillä (CSS), ei rakennemerkinnöillä. Sisällönhallinnassa tämä tarkoittaa, että otsikko valitaan otsikkotyylistä eikä tehdä lihavoimalla.

Sigilan automaattiset mittarit tälle kriteerille

• Koko sivu on piilotettu apuvälineiltä aria-hidden-body

  Sivun runko (<body>) on merkitty piilotetuksi (aria-hidden="true"), joten ruudunlukija ei löydä sivulta mitään.

  Missä tavallisesti: Harvinainen mutta vakava vika. Yleensä syynä on ponnahdusikkuna- tai animaatiokirjasto, joka jättää merkinnän päälle.

  Korjaus: Poista aria-hidden body-elementistä heti. Jos merkinnän lisää kirjasto, tarkista kirjaston asetukset tai vaihda kirjastoa. Tämä vika tekee koko sivusta ruudunlukijan käyttäjälle tyhjän.

• Elementiltä puuttuvat sen vaatimat osat aria-required-children

  Elementti on merkitty roolilla, joka vaatii sisäänsä tietynlaiset osat, mutta niitä ei ole. Esimerkiksi valikoksi (role="menu") merkityn elementin sisällä pitää olla valikon kohtia.

  Missä tavallisesti: Itse rakennetut valikot, välilehdet ja luettelot.

  Korjaus: Lisää vaaditut osat oikeine rooleineen. Helpompi tapa on käyttää selaimen valmiita elementtejä, kuten <ul> ja <li> tai <select>, joissa rakenne on valmiiksi oikein.

• Elementiltä puuttuu sen vaatima ympäröivä elementti aria-required-parent

  Elementti on merkitty roolilla, jonka pitää olla tietyn toisen elementin sisällä. Esimerkiksi välilehden (role="tab") pitää olla välilehtiluettelon (role="tablist") sisällä.

  Missä tavallisesti: Itse rakennetut välilehdet ja valikot.

  Korjaus: Siirrä elementti oikean ympäröivän elementin sisään tai korvaa koko rakenne selaimen valmiilla elementeillä.

• Määritelmäluettelon rakenne on virheellinen definition-list

  Määritelmäluettelon (<dl>) sisällä on muuta kuin termejä (<dt>) ja niiden selityksiä (<dd>).

  Missä tavallisesti: Sanastot ja tuotetietojen termi- ja arvoluettelot.

  Korjaus: Pidä rakenne puhtaana: <dl><dt>Paino</dt><dd>2 kg</dd></dl>. Termin ja selityksen parin saa kääriä <div>-elementtiin, mutta muut elementit eivät kuulu luettelon sisään.

• Määritelmäluettelon kohta on luettelon ulkopuolella dlitem

  Termi (<dt>) tai selitys (<dd>) on ilman ympäröivää määritelmäluetteloa (<dl>).

  Missä tavallisesti: Tekstit, joita on kopioitu sivulle paloina.

  Korjaus: Siirrä termit ja selitykset <dl>-elementin sisään. Termin ja selityksen parin saa kääriä <div>-elementtiin.

• Luettelon sisällä on muutakin kuin luettelon kohtia list

  Luettelon (<ul> tai <ol>) sisällä on suoraan muita elementtejä kuin luettelon kohtia (<li>), joten ruudunlukija ei tunnista luetteloa oikein.

  Missä tavallisesti: Valikot ja luettelot, joiden kohtien väliin on lisätty erottimia tai kääreitä.

  Korjaus: Pidä luettelon sisällä vain kohtia: <ul><li>Suomi</li><li>Ruotsi</li></ul>. Erottimet ja koristeet tehdään tyyleillä tai kohtien sisällä.

• Luettelon kohta ei ole luettelon sisällä listitem

  Luettelon kohta (<li>) on ilman ympäröivää luetteloa (<ul> tai <ol>).

  Missä tavallisesti: Ohjelmallisesti tuotetut luettelot, joista ympäröivä elementti on jäänyt pois.

  Korjaus: Kääri kohdat luetteloon: <ul><li>…</li></ul> järjestämättömälle ja <ol><li>…</li></ol> numeroidulle luettelolle.

• Taulukon solu viittaa otsikkoon, jota ei ole td-headers-attr

  Taulukon solun headers-määrite viittaa otsikkosoluun, jota ei ole samassa taulukossa, joten ruudunlukija ei osaa kertoa, mihin sarakkeeseen solu kuuluu.

  Missä tavallisesti: Monimutkaiset taulukot, joita on muokattu käsin.

  Korjaus: Korjaa viittaukset olemassa oleviin otsikkosoluihin. Yksinkertaisempi tapa on merkitä otsikkosolut <th scope="col"> ja <th scope="row">, jolloin headers-määritettä ei tarvita.

• Taulukon otsikkosolun alla ei ole tietoja th-has-data-cells

  Taulukon otsikkosolu (<th>) ei liity yhteenkään tietosoluun.

  Missä tavallisesti: Taulukot, joista on poistettu sarake tai rivi mutta otsikko on jäänyt.

  Korjaus: Poista tarpeeton otsikkosolu tai lisää sen alle kuuluvat tiedot.

Mikä on vialla

Sivun koodin järjestys poikkeaa siitä järjestyksestä, jossa sisältö luetaan näytöltä, joten ruudunlukija lukee osat väärässä järjestyksessä.

Missä tätä tavallisesti näkee

Absoluuttisesti sijoitetut elementit, kuten sivun reunaan nostetut laatikot, ruudukot, joiden järjestys on vaihdettu tyyleillä (order, grid-area), sekä kelluvat palstat.

Korjaus

Kirjoita koodi siinä järjestyksessä, jossa sisältö on tarkoitus lukea, ja sijoittele se tyyleillä. Vältä elementtien järjestyksen vaihtamista CSS:n order-ominaisuudella tai grid-sijoittelulla silloin, kun järjestyksellä on merkitystä. Jos elementti on pakko nostaa toiseen kohtaan absoluuttisella sijoittelulla, siirrä se myös koodissa lähelle sitä sisältöä, johon se liittyy. Testaa lukemalla sivu ruudunlukijalla tai selaimen lukutilassa.

Mikä on vialla

Ohje kertoo vain, missä jokin on tai miltä se näyttää tai kuulostaa, eikä nimeä asiaa: ”paina oikealla olevaa pyöreää painiketta”.

Missä tätä tavallisesti näkee

Lomakkeiden ohjetekstit, käyttöohjeet ja tukisivut, kuvatekstit sekä ponnahdusikkunoiden ohjeet.

Korjaus

Kirjoita ohjeeseen kohdan nimi, joka näkyy myös ruudulla: ”paina Lähetä-painiketta”. Paikka tai väri saa olla mukana lisätietona: ”paina sivun alalaidassa olevaa Lähetä-painiketta”. Jos ohje viittaa ääneen, kerro sama asia myös tekstinä.

Mikä on vialla

Sivu toimii vain toisessa asennossa: se lukitsee näytön asennon tai pyytää kääntämään laitteen.

Missä tätä tavallisesti näkee

Sivut ja sovellukset, jotka käyttävät näytön lukitusta (screen.orientation.lock), sekä asettelut, jotka on tehty vain pystyasentoon.

Korjaus

Älä lukitse näytön asentoa, ellei se ole toiminnolle välttämätöntä. Tee asettelusta joustava: suhteelliset leveydet, flex-wrap tai CSS Grid ja kuville max-width: 100%. Jos sivu näyttää toisessa asennossa ohjeen ”käännä laite”, poista ohje ja korjaa asettelu.

Mikä on vialla

Kentistä, joihin käyttäjä kirjoittaa omia tietojaan, puuttuu tarkoituksen kertova autocomplete-merkintä, tai merkintä on kirjoitettu väärin.

Missä tätä tavallisesti näkee

Yhteydenotto-, tilaus-, rekisteröitymis- ja maksulomakkeet.

Korjaus

Lisää jokaiseen henkilötietokenttään autocomplete-määrite standardin mukaisella arvolla: <input type="email" autocomplete="email">. Nimelle arvo on name, etunimelle given-name, sukunimelle family-name, puhelinnumerolle tel, katuosoitteelle street-address, postinumerolle postal-code ja postitoimipaikalle address-level2. Merkintä ei muuta kentän ulkoasua. Kaikki arvot on lueteltu HTML-standardissa kohdassa ”autofill field names”.

Sigilan automaattiset mittarit tälle kriteerille

• Kentän autocomplete-arvo on virheellinen autocomplete-valid

  Kentän autocomplete-määritteessä on arvo, jota selaimet eivät tunne, joten automaattinen täyttö ei toimi.

  Missä tavallisesti: Käsin kirjoitetut lomakkeet.

  Korjaus: Käytä standardin arvoja, kuten name, email, tel, street-address, postal-code ja address-level2. Esimerkiksi <input type="email" autocomplete="email">.

Mikä on vialla

Jokin tieto erottuu pelkän värin perusteella: linkki tekstin seassa, pakollinen kenttä, virhe tai kaavion sarja.

Missä tätä tavallisesti näkee

Tekstin sisällä olevat linkit ilman alleviivausta, pakolliset kentät pelkällä punaisella, virheet pelkällä punaisella reunalla ja kaaviot, joiden selite perustuu väreihin.

Korjaus

Lisää värin rinnalle toinen merkki. Linkkiin alleviivaus: a { text-decoration: underline; }. Pakolliseen kenttään tähti tai sana ”pakollinen” kentän nimeen. Virheeseen virheteksti tai kuvake kentän viereen. Kaavioon sarjoille kuviot tai nimet suoraan viivojen viereen. Väri saa jäädä, kunhan se ei ole ainoa ero.

Sigilan automaattiset mittarit tälle kriteerille

• Linkki erottuu tekstistä vain värillä link-in-text-block

  Tekstin sisällä oleva linkki erottuu ympäröivästä tekstistä pelkän värin perusteella, ilman alleviivausta tai muuta merkkiä.

  Missä tavallisesti: Artikkelit ja blogit, joissa linkkien alleviivaus on poistettu.

  Korjaus: Palauta alleviivaus: a { text-decoration: underline; }. Väri saa jäädä lisäksi.

Mikä on vialla

Sivu alkaa soittaa ääntä itsestään yli kolmen sekunnin ajan, eikä äänen pysäyttämiseen tai hiljentämiseen ole helposti löytyvää keinoa.

Missä tätä tavallisesti näkee

Taustamusiikki, itsestään käynnistyvät videot äänellä ja mainokset.

Korjaus

Paras korjaus on poistaa automaattinen käynnistys: <video controls src="video.mp4"></video> ilman autoplay-määritettä, jolloin käyttäjä käynnistää videon itse. Jos video pyörii taustalla, se mykistetään: <video autoplay muted loop>. Taustamusiikille tarvitaan helposti löytyvä pysäytyspainike, mieluiten sivun alkuun, tai musiikki poistetaan. Upotetuissa soittimissa automaattinen toisto kytketään pois soittimen omista asetuksista.

Sigilan automaattiset mittarit tälle kriteerille

• Ääni alkaa soida itsestään ilman pysäytystä no-autoplay-audio

  Sivun video- tai äänielementti soittaa ääntä itsestään yli kolmen sekunnin ajan, eikä sitä voi pysäyttää.

  Missä tavallisesti: Taustamusiikki ja itsestään käynnistyvät videot.

  Korjaus: Poista autoplay-määrite tai mykistä video: <video autoplay muted>. Muussa tapauksessa lisää sivun alkuun näkyvä pysäytyspainike.

Mikä on vialla

Tekstin ja taustan välinen kontrasti on alle vaaditun: tavallisella tekstillä alle 4,5:1 ja suurella tekstillä alle 3:1.

Missä tätä tavallisesti näkee

Vaaleanharmaa teksti valkoisella, valkoinen teksti kirkkailla painikkeilla, tekstit kuvien ja liukuvärien päällä sekä lomakkeiden vihjetekstit.

Korjaus

Tummenna tekstiä tai vaalenna taustaa, kunnes suhde on vähintään 4,5:1, suurella tekstillä 3:1. Esimerkiksi harmaa #767676 valkoisella on noin 4,5:1, kun taas #999999 on vain noin 2,8:1. Sigila kertoo jokaisen kohdan mitatun suhdeluvun ja värit. Kuvan päällä olevan tekstin alle auttaa tumma, osittain läpinäkyvä tausta. Alla on esimerkkejä yleisistä väreistä.

Sigilan automaattiset mittarit tälle kriteerille

• Tekstin kontrasti taustaan on liian pieni color-contrast

  Tekstin ja taustan kirkkausero on alle vaaditun: tavallisella tekstillä alle 4,5:1 ja suurella tekstillä alle 3:1.

  Missä tavallisesti: Vaaleanharmaa teksti, valkoinen teksti kirkkailla painikkeilla ja lomakkeiden vihjetekstit.

  Korjaus: Tummenna tekstiä tai vaalenna taustaa, kunnes suhde täyttyy. Sigila kertoo jokaisen kohdan mitatun suhdeluvun ja värit.

Mikä on vialla

Kun sivua suurennetaan 200 prosenttiin, tekstiä leikkautuu, katoaa tai menee päällekkäin, tai jokin toiminto lakkaa toimimasta.

Missä tätä tavallisesti näkee

Laatikot, joiden korkeus on lukittu (height ja overflow: hidden), kiinteäkokoiset painikkeet ja puhelimen suurennuksen estävä viewport-asetus.

Korjaus

Korvaa lukittu korkeus vähimmäiskorkeudella, esimerkiksi height: 180px muotoon min-height: 180px, ja poista tekstiä sisältäviltä laatikoilta overflow: hidden. Älä estä suurentamista puhelimessa: <meta name="viewport" content="width=device-width, initial-scale=1"> ilman rajoituksia maximum-scale ja user-scalable=no. Pikseleinä annetut fonttikoot eivät sinänsä ole vika, koska selaimen zoom suurentaa myös ne.

Sigilan automaattiset mittarit tälle kriteerille

• Sivu estää suurentamisen puhelimella meta-viewport

  Sivun viewport-asetus estää käyttäjää suurentamasta sivua puhelimella.

  Missä tavallisesti: Vanhat mobiilioptimoinnit, joissa on user-scalable=no tai maximum-scale=1.

  Korjaus: Käytä asetusta <meta name="viewport" content="width=device-width, initial-scale=1"> ilman suurennuksen rajoituksia. Suurentamisen salliminen ei riko asettelua.

Mikä on vialla

Teksti on osa kuvatiedostoa: bannerin otsikko, mainoslause tai painikkeen teksti on tehty kuvaksi.

Missä tätä tavallisesti näkee

Etusivun bannerit, kampanjakuvat, sivulle tuodut somekuvat ja kuvina tehdyt otsikot.

Korjaus

Kirjoita teksti HTML-tekstinä ja aseta kuva taustaksi: <section class="banneri"><h1>Kevään mallisto</h1></section> ja tyyleihin .banneri { background-image: url(kevat.jpg); }. Tekstin luettavuus kuvan päällä varmistetaan tummalla, osittain läpinäkyvällä taustalla. Logot ja tuotekuvat, joissa teksti on osa tuotetta, ovat poikkeus.

Mikä on vialla

Sivu ei mahdu 320 pikselin levyiseen näkymään, vaan vaatii vaakavieritystä. 320 pikseliä on se leveys, joka tavalliselle 1280 pikselin näytölle jää 400 prosentin suurennuksessa.

Missä tätä tavallisesti näkee

Sivun kehykselle asetettu kiinteä leveys (width: 1100px), leveät taulukot ja upotukset, kuvat ilman enimmäisleveyttä sekä rinnakkaiset palstat, jotka eivät taitu allekkain.

Korjaus

Anna sivun kehykselle enimmäisleveys kiinteän leveyden sijaan: .wrapper { max-width: 1100px; width: 100%; }. Kuville img { max-width: 100%; height: auto; }. Rinnakkaiset palstat saa taittumaan allekkain esimerkiksi määritteellä flex-wrap: wrap tai CSS Gridin minmax()-funktiolla. Leveä taulukko saa vieriä omassa laatikossaan (overflow-x: auto), kunhan muu sivu ei vieri. Sigila kertoo ylityksen pikseleinä ja näyttää kohdan kuvassa.

Mikä on vialla

Lomakkeen kentän reuna, painikkeen raja, valintaruutu, kohdistuksen merkki tai tietoa välittävä kuvake erottuu ympäristöstään alle 3:1 kontrastilla.

Missä tätä tavallisesti näkee

Haaleat harmaat kenttien reunat vaalealla taustalla, tummien teemojen himmeät reunat, ohuet kuvakkeet ja kaavioiden vaaleat viivat.

Korjaus

Anna kentälle reuna tai taustaväri, jonka kontrasti ympäröivään taustaan on vähintään 3:1. Vaalealla taustalla sopii esimerkiksi reuna #767676, tummalla taustalla vaalea reuna, kuten #e8e8e8 taustalla #1a1a1a. Tarkista samalla kohdistuksen merkin ja kuvakkeiden kontrasti. Sigila mittaa kenttien reunat ja taustat sivun tyyleistä ja kertoo suhdeluvut.

Mikä on vialla

Kun tekstin rivi-, kappale-, kirjain- ja sanavälejä kasvatetaan, tekstiä leikkautuu, katoaa tai menee päällekkäin.

Missä tätä tavallisesti näkee

Laatikot ja painikkeet, joiden korkeus on lukittu, pikseleinä annettu riviväli (line-height: 20px) ja style-määritteeseen lukitut välit.

Korjaus

Anna riviväli suhteellisena: line-height: 1.5. Korvaa lukitut korkeudet vähimmäiskorkeudella (height muotoon min-height) ja poista tekstiä sisältäviltä laatikoilta overflow: hidden. Älä lukitse välejä elementin style-määritteellä. Testaa WCAG:n arvoilla: riviväli 1,5 kertaa fonttikoko, kappaleväli 2 kertaa, kirjainväli 0,12 kertaa ja sanaväli 0,16 kertaa fonttikoko.

Sigilan automaattiset mittarit tälle kriteerille

• Tekstin välit on lukittu niin, ettei lukija voi muuttaa niitä avoid-inline-spacing

  Rivi-, kirjain- tai sanaväli on lukittu elementin style-määritteeseen merkinnällä !important, joten lukijan omat asetukset eivät muuta sitä.

  Missä tavallisesti: Tekstinkäsittelyohjelmista kopioidut tekstit ja upotukset.

  Korjaus: Poista välit style-määritteestä ja anna ne tyylitiedostossa ilman !important-merkintää.

Mikä on vialla

Hiiren alle tai kohdistukseen avautuva lisäsisältö, kuten alavalikko tai ohjeteksti, katoaa, kun hiirtä liikuttaa sen päälle, katoaa itsestään, tai muuta sivua peittävää sisältöä ei saa suljettua siirtämättä hiirtä.

Missä tätä tavallisesti näkee

Valikoiden alavalikot, kuvakkeiden ohjetekstit ja tuotekorttien pikatoiminnot.

Korjaus

Laita avaava kohta ja avautuva sisältö saman elementin sisään ja avaa sisältö sekä hiirellä että kohdistuksella: .valikko:hover .alavalikko, .valikko:focus-within .alavalikko { display: block; }. Silloin hiiren voi viedä avautuneen sisällön päälle ilman, että se katoaa. Sulje sisältö Esc-näppäimellä: document.addEventListener("keydown", e => { if (e.key === "Escape") sulje(); }). Älä sulje sisältöä ajastimella.

Mikä on vialla

Jokin toiminto toimii hiirellä mutta ei näppäimistöllä, tai näppäimistö ei pääse johonkin sivun osaan lainkaan.

Missä tätä tavallisesti näkee

div- ja span-elementeistä tehdyt painikkeet, itse rakennetut valikot ja liukusäätimet, vieritettävät alueet ja kehysten (iframe) sisältö.

Korjaus

Käytä selaimen valmiita elementtejä: <button> painikkeille ja <a href> linkeille, jolloin ne toimivat näppäimistöllä itsestään. Esimerkiksi <div onclick="avaa()">Avaa valikko</div> korjataan muotoon <button onclick="avaa()">Avaa valikko</button>. Sivun päälle avautuvaan ikkunaan sopii <dialog>-elementti ja showModal(), jotka hoitavat näppäimistön toiminnan itse. Vieritettävälle alueelle lisätään tabindex="0" ja nimi, jotta sitä voi vierittää näppäimistöllä. Monimutkaisille itse tehdyille toiminnoille, kuten välilehdille ja yhdistelmäkentille, on valmiit mallit W3C:n ARIA Authoring Practices -oppaassa.

Sigilan automaattiset mittarit tälle kriteerille

• Kehyksen sisältöön ei pääse näppäimistöllä frame-focusable-content

  Kehys (<iframe>) on poistettu näppäimistön ulottuvilta (tabindex="-1"), vaikka sen sisällä on linkkejä tai painikkeita.

  Missä tavallisesti: Upotetut kartat, lomakkeet ja pienoissovellukset.

  Korjaus: Poista kehyksestä tabindex="-1", jos sen sisältöä käytetään, tai varmista, ettei kehyksen sisällä ole käytettäviä kohtia.

• Vieritettävää aluetta ei voi vierittää näppäimistöllä scrollable-region-focusable

  Sivulla on oma vieritettävä alue, johon näppäimistö ei pääse, joten sen sisältöä ei voi lukea ilman hiirtä.

  Missä tavallisesti: Vieritettävät tekstilaatikot, taulukot ja koodiesimerkit.

  Korjaus: Lisää alueelle tabindex="0" ja nimi: <div class="vieritys" tabindex="0" role="region" aria-label="Hinnasto">…</div>.

• Sivulla on vanhentunut palvelinpuolen kuvakartta server-side-image-map

  Kuva käyttää palvelinpuolen kuvakarttaa (ismap), jonka linkkejä ei voi käyttää näppäimistöllä eikä ruudunlukijalla.

  Missä tavallisesti: Hyvin vanhat sivustot.

  Korjaus: Korvaa kuvakartta tavallisilla linkeillä tai selaimessa toimivalla kuvakartalla (<map> ja <area>), jonka alueilla on alt-tekstit.

Mikä on vialla

Kohdistus jää jumiin johonkin sivun osaan, eikä sieltä pääse pois Tab-näppäimellä, Esc-näppäimellä tai muulla tavallisella näppäimellä.

Missä tätä tavallisesti näkee

Itse tehdyt ponnahdusikkunat, upotetut kartat, videosoittimet, chat-ikkunat ja muut kolmansien osapuolten upotukset.

Korjaus

Sivun päälle avautuvaan ikkunaan sopii <dialog>-elementti: <dialog id="ikkuna">…</dialog> ja avaavaan painikkeeseen ikkuna.showModal(). Selain hoitaa silloin loput: kohdistus siirtyy ikkunaan, Esc sulkee sen ja kohdistus palaa avanneeseen painikkeeseen. Itse tehdyssä ikkunassa sama pitää ohjelmoida: Esc kutsuu sulkevaa funktiota, joka palauttaa kohdistuksen avanneeseen painikkeeseen. Jos upotus vangitsee kohdistuksen eikä sitä voi korjata, lisää ennen upotusta linkki, jolla sen ohi pääsee.

Mikä on vialla

Sivu reagoi yksittäiseen kirjain-, numero- tai välimerkkinäppäimeen, vaikka mikään kenttä ei ole valittuna.

Missä tätä tavallisesti näkee

Sähköposti- ja chat-sovellusten pikanäppäimet (D poistaa, R vastaa), sivustojen omat pikanäppäimet ja upotetut soittimet.

Korjaus

Vaadi pikanäppäimeen Ctrl- tai Cmd-näppäin, jolloin pelkkä kirjain ei tee mitään: if (e.key === "d" && (e.ctrlKey || e.metaKey)) poista(); Vaihtonäppäin (Shift) ei riitä, koska iso kirjain on yhä merkki. Toinen tapa on antaa käyttäjän kytkeä pikanäppäimet pois tai vaihtaa ne asetuksista. Kolmas tapa on kuunnella näppäimiä vain silloin, kun kyseinen osa sivua on valittuna.

Mikä on vialla

Sivulla on aikaraja, joka katkaisee käyttäjän tekemisen, kuten tyhjentää lomakkeen tai päättää istunnon, eikä aikaa voi säätää tai jatkaa.

Missä tätä tavallisesti näkee

Hakemus- ja tilauslomakkeet, verkkopankkien ja verkkokauppojen istunnot, varausjärjestelmät ja sivut, jotka päivittävät itsensä ajastimella (meta refresh).

Korjaus

Paras ratkaisu on välttää katkaisu tai tallentaa käyttäjän kirjoittamat tiedot, jotta mitään ei menetetä. Jos aikaraja on pakollinen, varoita ennen sen umpeutumista ja tarjoa lisäaikaa yhdellä painalluksella. Varoitusikkunaksi sopii <dialog>, jossa lukee ”Istuntosi päättyy minuutin kuluttua. Haluatko jatkaa?” ja painikkeet ”Jatka istuntoa” ja ”Kirjaudu ulos”. Ajastus: setTimeout(() => varoitus.showModal(), 14 * 60 * 1000), kun raja on 15 minuuttia, ja Jatka-painike nollaa ajastimen. WCAG vaatii, että varoitus tulee vähintään 20 sekuntia ennen katkaisua ja lisäaikaa voi pyytää vähintään kymmenen kertaa. Poista myös sivun automaattinen päivitys <meta http-equiv="refresh">.

Sigilan automaattiset mittarit tälle kriteerille

• Sivu päivittää itsensä ajastimella meta-refresh

  Sivu latautuu uudelleen tai siirtyy toiselle sivulle ajastimella (meta refresh), mikä keskeyttää lukemisen ja voi tyhjentää lomakkeen.

  Missä tavallisesti: Automaattiset uudelleenohjaukset ja itsestään päivittyvät sivut.

  Korjaus: Poista <meta http-equiv="refresh">. Uudelleenohjaus tehdään palvelimella (HTTP 301 tai 302), ja päivittämisestä annetaan käyttäjän päättää.

Mikä on vialla

Sivulla on sisältöä, joka liikkuu, vilkkuu tai vierii yli viiden sekunnin ajan tai vaihtuu itsestään, eikä sitä voi pysäyttää.

Missä tätä tavallisesti näkee

Kuvakarusellit, uutisnauhat, jatkuvat animaatiot, itsestään vaihtuvat mainokset sekä vanhat <marquee>- ja <blink>-elementit.

Korjaus

Lisää näkyvä pysäytyspainike (<button>), joka toimii myös näppäimistöllä. Pelkkä pysähtyminen hiiren alla ei riitä. Animaatiolle: tauko.onclick = () => mainos.classList.toggle("pysaytetty"); ja tyyleihin .pysaytetty { animation-play-state: paused; }. Karusellin vaihtuminen pysäytetään painikkeesta clearInterval-kutsulla, ja se pysähtyy myös silloin, kun karuselli saa kohdistuksen. Videolle controls-määrite. Kunnioita myös käyttäjän asetusta: @media (prefers-reduced-motion: reduce) { .mainos { animation: none; } }.

Sigilan automaattiset mittarit tälle kriteerille

• Sivulla on vilkkuva blink-elementti blink

  Sivulla on vanhentunut <blink>-elementti, joka saa tekstin vilkkumaan.

  Missä tavallisesti: Hyvin vanhat sivustot.

  Korjaus: Poista elementti. Jos huomiota tarvitaan, käytä paikallaan pysyvää korostusta.

• Sivulla on liikkuva marquee-elementti marquee

  Sivulla on vanhentunut <marquee>-elementti, joka saa tekstin liikkumaan.

  Missä tavallisesti: Vanhat uutisnauhat.

  Korjaus: Korvaa liikkuva teksti paikallaan pysyvällä tekstillä tai luettelolla.

Mikä on vialla

Sivulla jokin välähtää useammin kuin kolme kertaa sekunnissa, ja välkkyvä alue on suuri.

Missä tätä tavallisesti näkee

Mainosbannerit, huomiota hakevat animaatiot, videot ja pelit.

Korjaus

Hidasta animaatio niin, että välähdyksiä on enintään kolme sekunnissa. Turvallisinta on paljon hitaampi tahti. Vältä kirkkaan punaisen välkkymistä kokonaan. Kunnioita käyttäjän asetusta: @media (prefers-reduced-motion: reduce) { .mainos { animation: none; } }. Hyvin pieni välkkyvä alue on poikkeus. Videot tarkistetaan välähdysten mittaamiseen tehdyllä työkalulla ennen julkaisua.

Mikä on vialla

Sivulla ei ole keinoa ohittaa toistuvaa sisältöä, kuten ylävalikkoa, vaan näppäimistön käyttäjän pitää käydä se läpi joka sivulla.

Missä tätä tavallisesti näkee

Sivut, joilla on pitkä ylävalikko mutta ei ohituslinkkiä, pääsisällön merkintää (<main>) eikä otsikoita.

Korjaus

Lisää sivun alkuun ohituslinkki <a class="ohitus" href="#sisalto">Siirry sisältöön</a> ja pääsisältöön <main id="sisalto">. Linkin voi piilottaa näkyvistä, kunhan se tulee esiin saadessaan kohdistuksen: .ohitus { position: absolute; left: -9999px; } .ohitus:focus { left: 1rem; top: 1rem; }. Merkitse lisäksi sivun osat <header>-, <nav>-, <main>- ja <footer>-elementeillä, joiden avulla ruudunlukijan käyttäjä hyppää suoraan oikeaan kohtaan.

Sigilan automaattiset mittarit tälle kriteerille

• Toistuvan sisällön ohi ei pääse bypass

  Sivulla ei ole ohituslinkkiä, pääsisällön merkintää eikä otsikoita, joten näppäimistön käyttäjä joutuu kulkemaan valikon läpi jokaisella sivulla.

  Missä tavallisesti: Sivupohjat ilman <main>-elementtiä ja ohituslinkkiä.

  Korjaus: Lisää sivun alkuun <a href="#sisalto">Siirry sisältöön</a> ja pääsisältöön <main id="sisalto">.

Mikä on vialla

Sivulta puuttuu otsikko (<title>), tai kaikilla sivuilla on sama tai epämääräinen otsikko, kuten ”Etusivu” tai ”Tervetuloa”.

Missä tätä tavallisesti näkee

Sivupohjat, joissa otsikko ei vaihdu sivun mukaan, ja sovellukset, joissa otsikko ei päivity näkymän vaihtuessa.

Korjaus

Anna jokaiselle sivulle oma otsikko, jossa ensin sivun aihe ja sitten sivuston nimi: <title>Yhteystiedot – Yritys Oy</title>. Etusivulla sivuston nimi voi olla ensin. Next.js-sovelluksessa otsikko määritellään sivukohtaisesti metadata-objektilla tai generateMetadata-funktiolla. Yhden sivun sovelluksessa päivitä document.title aina, kun näkymä vaihtuu.

Sigilan automaattiset mittarit tälle kriteerille

• Sivulta puuttuu otsikko document-title

  Sivulta puuttuu otsikko (<title>), joten selaimen välilehti ja ruudunlukija kertovat vain sivun osoitteen.

  Missä tavallisesti: Sivupohjat ja sovellukset, joissa otsikko on unohtunut.

  Korjaus: Anna sivulle kuvaava otsikko: <title>Tuotteet – Yritys Oy</title>.

Mikä on vialla

Kohdistus etenee Tab-näppäimellä eri järjestyksessä kuin sivu luetaan, tai se katoaa ja ilmestyy yllättäviin paikkoihin.

Missä tätä tavallisesti näkee

Koodiin lisätyt positiiviset tabindex-arvot (tabindex="1" ja suuremmat), tyyleillä vaihdettu järjestys (order, float) ja sivun päälle avautuvat ikkunat, jotka eivät saa kohdistusta.

Korjaus

Kirjoita koodi samassa järjestyksessä kuin sivu luetaan, jolloin kohdistus kulkee oikein itsestään. Poista positiiviset tabindex-arvot ja käytä vain arvoja 0 (valittavissa normaalisti) ja -1 (valittavissa vain ohjelmallisesti). Kun avaat ikkunan tai valikon, siirrä kohdistus sen sisään, ja kun suljet sen, palauta kohdistus avanneeseen painikkeeseen.

Mikä on vialla

Linkin tekstistä tai sen ympäriltä ei selviä, minne se vie: esimerkiksi ”Lue lisää” ilman otsikkoa tai selittävää lausetta, tai tyhjä kuvalinkki ilman nimeä.

Missä tätä tavallisesti näkee

Uutislistat, tuotekortit, ”Lue lisää” -linkit ja kuvakkeina tehdyt linkit, kuten somekuvakkeet.

Korjaus

Kirjoita linkin tekstiksi kohde: <a href="/vuokraehdot">Vuokraehdot</a>. Jos ulkoasu vaatii lyhyen tekstin, lisää tarkennus näkymättömänä tekstinä: <a href="/uutiset/42">Lue lisää<span class="visually-hidden"> uutisesta Kevätmarkkinat</span></a>. Kuvalinkin nimi kirjoitetaan kuvan alt-tekstiin: <a href="/"><img src="logo.svg" alt="Yritys Oy, etusivu"></a>. Kuvakelinkille annetaan aria-label: <a href="https://facebook.com/yritys" aria-label="Yritys Oy Facebookissa">…</a>.

Sigilan automaattiset mittarit tälle kriteerille

• Kuvakartan alueelta puuttuu teksti area-alt

  Kuvakartan alueelta (<area>) puuttuu alt-teksti, joten linkin kohde jää arvoitukseksi.

  Missä tavallisesti: Karttakuvat ja vanhat kuvana tehdyt valikot.

  Korjaus: Lisää jokaiselle alueelle alt-teksti: <area shape="rect" coords="…" href="/tuotteet" alt="Tuotteet">.

• Linkiltä puuttuu teksti tai nimi link-name

  Linkki on tyhjä tai sisältää pelkän kuvan tai kuvakkeen ilman nimeä, joten ruudunlukija sanoo vain ”linkki”.

  Missä tavallisesti: Kuvakelinkit, kuten somekuvakkeet, ja kuvalinkit ilman alt-tekstiä.

  Korjaus: Lisää linkkiin teksti tai kuvalle alt-teksti: <a href="/"><img src="logo.svg" alt="Yritys Oy, etusivu"></a>. Kuvakelinkille annetaan aria-label: <a href="…" aria-label="Yritys Oy Facebookissa">…</a>.

Mikä on vialla

Sivuston sivut löytyvät vain yhtä reittiä, yleensä valikon kautta, eikä sivustolla ole hakua eikä sivukarttaa.

Missä tätä tavallisesti näkee

Pienet sivustot ilman hakua, suuret sivustot ilman sivukarttaa ja kampanjasivut, joille pääsee vain yhdestä linkistä.

Korjaus

Tarjoa vähintään kaksi tapaa: valikko ja sivuston haku tai valikko ja sivukartta. Haku: <form role="search" action="/haku"><label for="q">Haku</label><input id="q" type="search" name="q"></form>. Sivukartta voi olla yksinkertainen sivu, jolla on luettelo kaikista sivuista, ja linkki siihen sivun alatunnisteessa.

Mikä on vialla

Otsikot tai kenttien ja painikkeiden nimet eivät kerro, mistä on kyse: ”Lisää”, ”Lähetä”, ”Tiedot”.

Missä tätä tavallisesti näkee

Lomakkeiden lähetyspainikkeet, korttien toimintopainikkeet ja yleisluontoiset väliotsikot.

Korjaus

Kirjoita nimet niin, että ne ymmärtää ilman ympäröivää tekstiä: <button>Lähetä tilaus</button> eikä pelkkä ”Lähetä”, ja <h2>Aukioloajat</h2> eikä ”Tiedot”. Jos ulkoasu vaatii lyhyen näkyvän tekstin, aloita koodissa oleva nimi samalla tekstillä: <button aria-label="Tilaa uutiskirje">Tilaa</button>, jotta puheohjaus löytää painikkeen (vaatimus 2.5.3).

Mikä on vialla

Kohdistuksen merkki ei näy: selaimen oma kehys on poistettu tyyleillä, eikä tilalle ole tehty mitään.

Missä tätä tavallisesti näkee

Sivupohjat ja tyylitiedostot, joissa on :focus { outline: none; } tai outline: 0 ilman korvaavaa tyyliä.

Korjaus

Älä poista kohdistuksen kehystä korvaamatta sitä. Hyvä korvaaja on :focus-visible { outline: 3px solid #1c6fd1; outline-offset: 2px; }. Valitsin :focus-visible näyttää kehyksen näppäimistön käyttäjälle mutta ei hiirellä klikattaessa. Kehyksen kontrastin taustaan pitää olla vähintään 3:1 (vaatimus 1.4.11).

Mikä on vialla

Paikallaan pysyvä tai leijuva osa, kuten yläpalkki, evästeilmoitus tai chat-painike, peittää kokonaan kohdan, johon näppäimistöllä siirryttiin.

Missä tätä tavallisesti näkee

Sivupohjat, joissa yläpalkilla on position: sticky tai position: fixed, sekä alareunan evästeilmoitukset ja chat-painikkeet.

Korjaus

Kerro selaimelle palkin korkeus, niin se vierittää valitun kohdan palkin alta näkyviin: html { scroll-padding-top: 80px; }, kun yläpalkki on 80 pikseliä korkea. Alareunan palkille sama onnistuu scroll-padding-bottom-määritteellä. Evästeilmoituksen voi tehdä niin, ettei se peitä sisältöä, tai sen pitää sulkeutua, ennen kuin käyttäjä jatkaa sivulla. Tarkista lopuksi Tab-näppäimellä myös 200 prosentin suurennuksella.

Mikä on vialla

Toiminto vaatii monisormisen eleen tai pyyhkäisyn, eikä samaa voi tehdä yksinkertaisella napautuksella tai klikkauksella.

Missä tätä tavallisesti näkee

Karusellit, joita voi vaihtaa vain pyyhkäisemällä ja kartat, joita voi suurentaa vain nipistämällä.

Korjaus

Lisää eleen rinnalle painikkeet: karuselliin edellinen- ja seuraava-painikkeet (<button aria-label="Seuraava kuva">›</button>) ja karttaan plus- ja miinuspainikkeet. Ele saa jäädä käyttöön.

Mikä on vialla

Toiminto käynnistyy heti, kun painike painetaan alas, eikä sitä voi perua liu'uttamalla pois ennen nostamista.

Missä tätä tavallisesti näkee

Itse ohjelmoidut painikkeet, jotka kuuntelevat mousedown-, pointerdown- tai touchstart-tapahtumaa, sekä raahattavat käyttöliittymät.

Korjaus

Käynnistä toiminto click-tapahtumasta, joka laukeaa vasta nostettaessa ja vain, jos osoitin on yhä painikkeen päällä. Selaimen <button> ja <a> toimivat näin itsestään. Jos alas painamiseen on pakko reagoida, tee peruminen mahdolliseksi: toiminto viimeistellään vasta nostettaessa, ja liu'uttaminen pois peruu sen.

Mikä on vialla

Painikkeen tai linkin koodissa oleva nimi ei sisällä tekstiä, joka näkyy ruudulla.

Missä tätä tavallisesti näkee

Painikkeet, joille on annettu aria-label eri sanoin kuin näkyvä teksti, sekä kampanjapainikkeet ja tekstilliset kuvakkeet.

Korjaus

Aloita koodissa oleva nimi näkyvällä tekstillä. Jos painikkeessa lukee ”Tilaa nyt”, nimi aria-label="Tilaa nyt, 30 päivää maksutta" on kunnossa, mutta aria-label="Kokeile" ei ole. Yksinkertaisin ratkaisu on jättää aria-label pois, jolloin näkyvä teksti on nimi.

Mikä on vialla

Toiminto käynnistyy vain laitteen liikkeestä, kuten ravistuksesta tai kallistuksesta, eikä liikeohjausta voi kytkeä pois.

Missä tätä tavallisesti näkee

Ravista ja kumoa -toiminnot, kallistamalla ohjattavat näkymät ja liikettä käyttävät pelit.

Korjaus

Tee sama toiminto myös painikkeella: <button>Kumoa</button>. Lisää asetuksiin kytkin, jolla liikeohjauksen saa pois, ja kuuntele devicemotion- ja deviceorientation-tapahtumia vain, kun kytkin on päällä.

Mikä on vialla

Toiminto onnistuu vain raahaamalla, eli painamalla, liikuttamalla ja päästämällä irti, eikä samaa voi tehdä napautuksilla tai klikkauksilla.

Missä tätä tavallisesti näkee

Liukusäätimet, järjestettävät listat ja taulut, kartat, kuvien rajaustyökalut ja tiedostojen pudotusalueet.

Korjaus

Lisää raahaamisen rinnalle tapa, joka onnistuu yksittäisillä klikkauksilla. Liukusäätimeksi käy selaimen oma <input type="range">, joka liikkuu myös uraa klikkaamalla, tai plus- ja miinuspainikkeet. Listaan sopivat ”Siirrä ylös”- ja ”Siirrä alas” -painikkeet, karttaan nuolipainikkeet. Tiedostojen pudotusalueeseen riittää ”Valitse tiedosto” -painike (<input type="file">). Raahaus saa jäädä käyttöön.

Mikä on vialla

Painettava kohta on alle 24 × 24 pikseliä, ja toinen painettava kohta on niin lähellä, että väärään on helppo osua.

Missä tätä tavallisesti näkee

Sulkemisruksit, sivunumerot, somekuvakkeet, kuvakepainikkeet, karusellin pisteet ja alatunnisteen tiheät linkkilistat.

Korjaus

Kasvata painettavaa aluetta, ei välttämättä näkyvää kuvaketta: .icon-button { min-width: 24px; min-height: 24px; } tai padding: 4px 16 pikselin kuvakkeen ympärille. Toinen tapa on väli: vaatimus täyttyy, kun jokaisen pienen kohdan keskelle piirretty 24 pikselin ympyrä ei osu toiseen kohtaan eikä sen ympyrään. AAA-tason kohta 2.5.5 suosittaa vielä suurempaa kokoa, 44 × 44 pikseliä.

Mikä on vialla

Sivun kieltä ei ole merkitty koodiin, tai merkintä on väärä tai virheellinen kielikoodi.

Missä tätä tavallisesti näkee

Sivupohjat, joissa <html>-elementiltä puuttuu lang-määrite, ja kieliversiot, joissa merkintä on jäänyt alkuperäiseen kieleen.

Korjaus

Merkitse kieli sivun juurielementtiin: <html lang="fi">. Ruotsinkieliselle sivulle lang="sv" ja englanninkieliselle lang="en". Käytä standardin mukaisia kielikoodeja (BCP 47), esimerkiksi fi tai fi-FI, ei ”finnish”. Next.js-sovelluksessa lang lisätään juuritason layout-tiedoston <html>-elementtiin.

Sigilan automaattiset mittarit tälle kriteerille

• Sivun kieli puuttuu html-has-lang

  Sivun <html>-elementiltä puuttuu lang-määrite, joten ruudunlukija ei tiedä, millä kielellä sivu pitää lukea.

  Missä tavallisesti: Sivupohjat.

  Korjaus: Lisää kieli: <html lang="fi">, ruotsinkieliselle sivulle lang="sv".

• Sivun kielikoodi on virheellinen html-lang-valid

  Sivun lang-määritteessä on kelvoton kielikoodi, esimerkiksi ”finnish”.

  Missä tavallisesti: Käsin kirjoitetut sivupohjat.

  Korjaus: Käytä standardin mukaista koodia, kuten fi, sv, en tai fi-FI.

• Sivun kaksi kielimerkintää ovat ristiriidassa html-xml-lang-mismatch

  Sivun lang- ja xml:lang-määritteet kertovat eri kielen.

  Missä tavallisesti: Vanhat XHTML-sivut.

  Korjaus: Merkitse molempiin sama kieli: <html lang="fi" xml:lang="fi">, tai poista xml:lang.

Mikä on vialla

Sivulla on eri kielellä kirjoitettu kohta, jonka kieltä ei ole merkitty, tai merkitty kielikoodi on virheellinen.

Missä tätä tavallisesti näkee

Englanninkieliset lainaukset ja iskulauseet suomenkielisellä sivulla, toisen kielen tiivistelmät ja kieliversioiden linkit.

Korjaus

Merkitse kieli kohtaan, jossa se vaihtuu: <p lang="en">Read our story</p> tai <blockquote lang="sv">…</blockquote>. Kieliversioiden linkkeihin: <a href="/sv" lang="sv" hreflang="sv">Svenska</a>. Yksittäisiin suomeen vakiintuneisiin sanoihin ja nimiin merkintää ei tarvita.

Sigilan automaattiset mittarit tälle kriteerille

• Tekstin osan kielikoodi on virheellinen valid-lang

  Sivun osaan merkitty kielikoodi ei ole kelvollinen.

  Missä tavallisesti: Käsin merkityt lainaukset ja kieliversiot.

  Korjaus: Korjaa koodi standardin mukaiseksi: <p lang="en">The quick brown fox</p>.

Mikä on vialla

Kun kohdistus siirtyy kenttään, painikkeeseen tai valikkoon, sivu tekee jotain isoa, kuten siirtyy toiselle sivulle, lähettää lomakkeen tai avaa ikkunan.

Missä tätä tavallisesti näkee

Valikot, jotka vaihtavat sivua jo kohdistuksen osuessa niihin, kentät, jotka lähettävät lomakkeen focus-tapahtumasta, ja ponnahdusikkunat.

Korjaus

Älä käynnistä isoja muutoksia focus-tapahtumasta. Kohdistus saa korostaa kohdan tai näyttää ohjeen, mutta siirtyminen, lähettäminen ja ikkunan avaaminen tehdään vasta, kun käyttäjä painaa painiketta tai Enteriä.

Mikä on vialla

Kun käyttäjä vaihtaa valintaa tai kirjoittaa kenttään, sivu siirtyy toiselle sivulle tai lähettää lomakkeen kertomatta siitä etukäteen.

Missä tätä tavallisesti näkee

Kieli-, maa- ja kaupunkivalitsimet, jotka vaihtavat sivua heti, ja suodattimet, jotka lataavat sivun uudelleen jokaisesta valinnasta.

Korjaus

Tee valinnan käyttöönotosta erillinen painike: <select id="kieli">…</select><button>Vaihda kieli</button>. Jos muutoksen on pakko tapahtua heti, kerro siitä ennen valintaa, esimerkiksi ”Sivu päivittyy valinnan mukaan”, ja palauta kohdistus samaan kohtaan päivityksen jälkeen.

Mikä on vialla

Toistuva valikko tai muu navigointi on eri sivuilla eri järjestyksessä tai eri paikassa.

Missä tätä tavallisesti näkee

Kampanja- ja laskeutumissivut, joilla on oma valikko, ja käsin kopioidut valikot.

Korjaus

Toteuta valikko yhtenä yhteisenä osana, jota kaikki sivut käyttävät, äläkä kopioi sitä sivuille käsin. Pidä kohdat samassa järjestyksessä kaikilla sivuilla. Kohtia saa lisätä tai poistaa, kunhan muiden järjestys säilyy.

Mikä on vialla

Sama toiminto on eri sivuilla eri nimellä tai eri kuvakkeella: ”Haku”, ”Etsi” ja ”Hae”.

Missä tätä tavallisesti näkee

Hakukentät, ostoskorit (”Kori”, ”Ostoskori”), kirjautumislinkit ja yhteydenottopainikkeet.

Korjaus

Päätä jokaiselle toistuvalle toiminnolle yksi nimi ja yksi kuvake ja käytä niitä kaikkialla: valikossa, painikkeissa ja otsikoissa. Kirjaa nimet sivuston tyyliohjeeseen. Maksullisessa skannauksessa Sigila vertaa toimintojen nimiä sivujen välillä ja kertoo erot.

Mikä on vialla

Ohjeet tai yhteystiedot, kuten puhelinnumero, yhteydenottolinkki tai chat, ovat eri sivuilla eri kohdassa.

Missä tätä tavallisesti näkee

Sivustot, joilla yhteystiedot ovat etusivulla yläpalkissa mutta alasivuilla vain alatunnisteessa, sekä eri sivupohjalla tehdyt kampanja- ja lomakesivut.

Korjaus

Sijoita apu sivupohjaan, ei yksittäisille sivuille: esimerkiksi yhteystiedot aina alatunnisteeseen ja chat aina oikeaan alakulmaan. Kun apu on sivupohjassa, se pysyy kaikilla sivuilla samassa kohdassa itsestään.

Mikä on vialla

Lomake hylkää syötteen kertomatta tekstillä, mikä kenttä on virheellinen ja miksi.

Missä tätä tavallisesti näkee

Kirjautumis-, yhteydenotto- ja tilauslomakkeet sekä lomakkeet, jotka näyttävät virheen vain punaisella reunalla tai sivun yläosassa.

Korjaus

Näytä virhe tekstinä kentän vieressä ja kytke se kenttään: <input id="email" aria-invalid="true" aria-describedby="email-virhe"> <p id="email-virhe">Sähköpostiosoitteesta puuttuu @-merkki.</p>. Määrite aria-invalid kertoo apuvälineelle, että kentässä on virhe, ja aria-describedby kytkee viestin kenttään, jolloin ruudunlukija lukee sen. Jos virheitä on monta, näytä lomakkeen alussa luettelo virheistä linkkeineen kenttiin ja siirrä kohdistus luetteloon.

Mikä on vialla

Lomakkeen kentältä puuttuu näkyvä nimi tai tarvittava ohje.

Missä tätä tavallisesti näkee

Kentät, joissa on vain harmaa vihjeteksti (placeholder), pakolliset kentät pelkällä tähdellä ja ryhmittelemättömät valintapainikkeet.

Korjaus

Anna jokaiselle kentälle näkyvä nimi ja kytke se kenttään: <label for="pvm">Päivämäärä (pp.kk.vvvv)</label><input id="pvm">. Vihjeteksti ei korvaa nimeä, koska se katoaa kirjoitettaessa. Pakollisuus kerrotaan sanalla, kuten ”Sähköposti (pakollinen)”, tai tähdellä, jonka merkitys kerrotaan lomakkeen alussa. Valintapainikkeiden ryhmä nimetään <fieldset>- ja <legend>-elementeillä: <fieldset><legend>Toimitustapa</legend>…</fieldset>.

Sigilan automaattiset mittarit tälle kriteerille

• Kentällä on useita nimiä form-field-multiple-labels

  Lomakkeen kenttään on kytketty useampi nimi (<label>), jolloin ruudunlukija voi lukea ne sekavasti.

  Missä tavallisesti: Lomakkeet, joihin nimi on lisätty kahteen kertaan.

  Korjaus: Kytke kenttään yksi nimi: <label for="email">Sähköposti</label>. Lisäohje kytketään aria-describedby-määritteellä.

Mikä on vialla

Virheilmoitus kertoo, että jotain on vialla, mutta ei kerro, miten se korjataan, vaikka korjaus olisi tiedossa.

Missä tätä tavallisesti näkee

Sähköposti-, päivämäärä-, puhelinnumero- ja henkilötunnuskentät.

Korjaus

Kerro ilmoituksessa, mitä pitää muuttaa, ja anna esimerkki: ”Sähköpostiosoitteesta puuttuu @-merkki, esimerkiksi maija@yritys.fi”. Hyväksy sama tieto mahdollisuuksien mukaan monessa muodossa, esimerkiksi päivämäärä sekä muodossa 5.10.2026 että 05.10.2026. Älä toista salasanaa tai muuta arkaluonteista tietoa virheilmoituksessa.

Mikä on vialla

Käyttäjä voi lähettää tilauksen, maksun, sopimuksen, tietojen muutoksen tai poiston ilman mahdollisuutta tarkistaa, korjata tai perua sitä.

Missä tätä tavallisesti näkee

Verkkokauppojen kassat, varaus- ja hakemuslomakkeet, sopimusten hyväksynnät ja tietojen poistotoiminnot.

Korjaus

Toteuta ainakin yksi kolmesta. Peruttavuus: lähetyksen voi perua tietyn ajan, esimerkiksi 15 minuutin, kuluessa. Tarkistus: lomake tarkistaa tiedot ja antaa korjata virheet ennen lähettämistä. Vahvistus: ennen lopullista lähettämistä käyttäjä näkee yhteenvedon ja voi palata muokkaamaan, esimerkiksi painikkeilla ”Palaa muokkaamaan” ja ”Vahvista tilaus”. Kassalle suositus on yhteenvetovaihe ja painike, jonka teksti kertoo, mitä tapahtuu, kuten ”Vahvista ja maksa”.

Mikä on vialla

Monivaiheinen lomake pyytää kirjoittamaan uudelleen tiedon, jonka käyttäjä antoi jo aiemmassa vaiheessa.

Missä tätä tavallisesti näkee

Verkkokauppojen kassat (toimitus- ja laskutusosoite), hakemukset ja ajanvaraukset, joissa yhteystiedot kysytään useaan kertaan.

Korjaus

Täytä aiemmin annettu tieto valmiiksi tai tarjoa se valittavaksi: <label><input type="checkbox" checked> Laskutusosoite on sama kuin toimitusosoite</label>. Selaimen automaattisesta täytöstä (autocomplete) on apua, mutta älä luota pelkästään siihen: lomakkeen pitää itse muistaa, mitä samassa asioinnissa on jo kerrottu.

Mikä on vialla

Kirjautuminen vaatii muistamista, käsin kopioimista tai tehtävän ratkaisemista, eikä helpompaa tapaa ole: liittäminen on estetty, salasanan hallintaohjelma ei osaa täyttää kenttiä tai varmistustehtävällä ei ole vaihtoehtoa.

Missä tätä tavallisesti näkee

Kirjautumis- ja rekisteröitymislomakkeet, yhden merkin ruutuihin jaetut kertakoodikentät ja varmistustehtävät (CAPTCHA).

Korjaus

Älä estä liittämistä: poista esimerkiksi onpaste="return false". Merkitse kentät, jotta salasanan hallintaohjelma tunnistaa ne: <input type="email" autocomplete="username"> ja <input type="password" autocomplete="current-password">, kertakoodille autocomplete="one-time-code". Jos koodi on jaettu ruutuihin, liittämisen pitää täyttää kaikki ruudut kerralla. Tarjoa varmistustehtävälle vaihtoehto tai käytä tapaa, joka ei vaadi käyttäjältä mitään.

Mikä on vialla

Koodissa on rakennevirheitä, kuten sama id-tunniste kahdesti tai sulkematta jääneitä elementtejä.

Missä tätä tavallisesti näkee

Käsin kopioidut HTML-palat, sisällönhallinnan lisäosat ja vanhat sivupohjat.

Korjaus

Nykyiset selaimet korjaavat rakennevirheet itse, joten W3C katsoo vaatimuksen HTML-sivuilla täytetyksi. Merkitystä on yhä niillä id-tunnisteilla, joihin viitataan: jos esimerkiksi aria-labelledby tai label for osoittaa id:hen, joka on sivulla kahdesti, apuväline voi lukea väärän tekstin. Pidä id-tunnisteet yksilöllisinä. Koodin voi tarkistaa W3C:n validaattorilla.

Mikä on vialla

Painikkeelta, linkiltä tai kentältä puuttuu nimi, tai itse rakennettu toiminto ei kerro tyyppiään tai tilaansa. Ruudunlukija sanoo silloin pelkän ”painike” tai ei mitään.

Missä tätä tavallisesti näkee

Kuvakepainikkeet ilman tekstiä (sulje, hae, valikko), div- ja span-elementeistä rakennetut kytkimet ja valikot sekä haitarit ja välilehdet, joiden auki- tai kiinni-tila ei päivity koodiin.

Korjaus

Käytä ensisijaisesti selaimen valmiita elementtejä: <button>, <a href>, <input type="checkbox"> ja <select>. Ne kertovat nimen, tyypin ja tilan itse. Kuvakepainike tarvitsee nimen: <button aria-label="Sulje">✕</button>. Jos toiminto on pakko rakentaa itse, kerro tyyppi ja tila ARIA-määritteillä eli lisätiedoilla, joilla koodi kertoo apuvälineille, mikä elementti on, ja päivitä tila aina, kun se muuttuu: <button role="switch" aria-checked="true">Muistutukset</button>. Haitarin avaavalle painikkeelle aria-expanded="true" tai "false" sen mukaan, onko osio auki.

Sigilan automaattiset mittarit tälle kriteerille

• Kuvakartan alueelta puuttuu teksti area-alt

  Kuvakartan alueelta (<area>) puuttuu alt-teksti, joten linkin kohde jää arvoitukseksi.

  Missä tavallisesti: Karttakuvat ja vanhat kuvana tehdyt valikot.

  Korjaus: Lisää jokaiselle alueelle alt-teksti: <area shape="rect" coords="…" href="/tuotteet" alt="Tuotteet">.

• Elementillä on ARIA-määrite, joka ei kuulu sille aria-allowed-attr

  Elementillä on ARIA-määrite, jota sen rooli ei salli, joten apuväline ohittaa sen tai tulkitsee sen väärin.

  Missä tavallisesti: Itse rakennetut toiminnot ja kopioidut koodiesimerkit.

  Korjaus: Poista ylimääräinen määrite tai korjaa elementin rooli. Sallitut määritteet on lueteltu WAI-ARIA-määrityksessä.

• Pistekirjoitusta varten annettu teksti on puutteellinen aria-braille-equivalent

  Elementillä on pistekirjoitusnäytölle tarkoitettu teksti (aria-braillelabel), mutta siltä puuttuu tavallinen nimi.

  Missä tavallisesti: Harvinaiset erikoistoteutukset.

  Korjaus: Anna elementille aina myös tavallinen nimi, esimerkiksi aria-label, tai poista pistekirjoitusmerkinnät.

• Painikkeelta tai linkiltä puuttuu nimi aria-command-name

  Painikkeeksi, linkiksi tai valikon kohdaksi merkityllä elementillä (role="button", "link" tai "menuitem") ei ole nimeä.

  Missä tavallisesti: Kuvakkeilla tehdyt itse rakennetut painikkeet.

  Korjaus: Anna nimi: <div role="button" tabindex="0" aria-label="Sulje">✕</div>. Parempi ratkaisu on selaimen oma painike: <button aria-label="Sulje">✕</button>.

• ARIA-määritettä käytetään väärässä yhteydessä aria-conditional-attr

  Elementillä on ARIA-määrite, jonka sen rooli sallii vain tietyissä tilanteissa, eikä tilanne täyty. Esimerkiksi selaimen omalle valintaruudulle lisätty aria-checked voi olla ristiriidassa sen todellisen tilan kanssa.

  Missä tavallisesti: Selaimen valmiit elementit, joihin on lisätty ARIA-tila, sekä taulukot ja puurakenteet.

  Korjaus: Poista määrite, jos selain hoitaa tilan itse, kuten <input type="checkbox">. Muissa tapauksissa käytä määritettä vain siinä roolissa, jossa se on sallittu.

• Elementti käyttää vanhentunutta ARIA-roolia aria-deprecated-role

  Elementillä on rooli, joka on poistettu ARIA-määrityksestä, joten apuvälineet eivät välttämättä tunnista sitä.

  Missä tavallisesti: Vanhat käyttöliittymäkirjastot.

  Korjaus: Vaihda rooli nykyiseen tai korvaa elementti selaimen valmiilla elementillä.

• Koko sivu on piilotettu apuvälineiltä aria-hidden-body

  Sivun runko (<body>) on merkitty piilotetuksi (aria-hidden="true"), joten ruudunlukija ei löydä sivulta mitään.

  Missä tavallisesti: Harvinainen mutta vakava vika. Yleensä syynä on ponnahdusikkuna- tai animaatiokirjasto, joka jättää merkinnän päälle.

  Korjaus: Poista aria-hidden body-elementistä heti. Jos merkinnän lisää kirjasto, tarkista kirjaston asetukset tai vaihda kirjastoa. Tämä vika tekee koko sivusta ruudunlukijan käyttäjälle tyhjän.

• Piilotetun osan sisällä on valittavia kohtia aria-hidden-focus

  Sivun osa on piilotettu apuvälineiltä (aria-hidden="true"), mutta sen sisällä on linkkejä tai painikkeita, joihin näppäimistö pääsee. Ruudunlukija on silloin hiljaa, vaikka kohdistus on piilotetussa osassa.

  Missä tavallisesti: Suljetut valikot ja paneelit sekä ponnahdusikkunan taakse jäävä sivu.

  Korjaus: Piilota suljettu osa kokonaan määritteellä display: none tai inert-määritteellä, jolloin näppäimistö ei pääse sinne. inert sopii myös ponnahdusikkunan taustalle.

• Itse rakennetulta kentältä puuttuu nimi aria-input-field-name

  Kentäksi merkityllä elementillä, esimerkiksi role="combobox" tai role="textbox", ei ole nimeä.

  Missä tavallisesti: Itse rakennetut hakukentät ja valitsimet.

  Korjaus: Anna nimi: <div role="combobox" aria-label="Valitse kunta">…</div>, tai käytä selaimen valmista kenttää ja <label>-elementtiä.

• Elementillä on ARIA-määrite, jota sen rooli ei salli aria-prohibited-attr

  Elementillä on määrite, jota sen rooli ei salli, esimerkiksi aria-label tavallisessa tekstikappaleessa tai <span>-elementissä. Apuvälineet jättävät sen huomiotta.

  Missä tavallisesti: Koodi, jossa aria-label on lisätty elementteihin, joilla ei ole roolia.

  Korjaus: Poista määrite ja kirjoita teksti näkyviin, tai anna elementille rooli, jolle nimi kuuluu.

• Elementiltä puuttuu sen roolin vaatima ARIA-määrite aria-required-attr

  Elementin rooli vaatii määritteen, jota ei ole. Esimerkiksi liukusäätimeltä (role="slider") puuttuu aria-valuenow, joten ruudunlukija ei kerro sen arvoa.

  Missä tavallisesti: Itse rakennetut liukusäätimet, valintaruudut ja kytkimet.

  Korjaus: Lisää vaaditut määritteet, liukusäätimelle aria-valuenow, aria-valuemin ja aria-valuemax. Usein helpompaa on käyttää selaimen valmista elementtiä: <input type="range">.

• ARIA-rooli on tuntematon tai kirjoitettu väärin aria-roles

  Elementin role-määritteessä on rooli, jota ei ole olemassa, esimerkiksi kirjoitusvirhe role="buton".

  Missä tavallisesti: Käsin kirjoitettu koodi.

  Korjaus: Korjaa roolin nimi tai poista rooli, jos selaimen valmis elementti, kuten <button> tai <nav>, riittää.

• Välilehdeltä puuttuu nimi aria-tab-name

  Välilehdeksi merkityllä elementillä (role="tab") ei ole nimeä.

  Missä tavallisesti: Itse rakennetut välilehdet.

  Korjaus: Kirjoita välilehden nimi sen sisään tai anna sille aria-label: <button role="tab">Aukioloajat</button>.

• Kytkimeltä tai valintaruudulta puuttuu nimi aria-toggle-field-name

  Kytkimeksi tai valintaruuduksi merkityllä elementillä (role="switch", "checkbox" tai "radio") ei ole nimeä.

  Missä tavallisesti: Kuvakkeilla tehdyt itse rakennetut kytkimet.

  Korjaus: Anna nimi: <button role="switch" aria-checked="true">Sähköpostimuistutukset</button>, tai käytä selaimen valmista elementtiä <input type="checkbox"> ja <label>-elementtiä.

• Ohjetekstiltä puuttuu sisältö aria-tooltip-name

  Ohjetekstiksi merkityllä elementillä (role="tooltip") ei ole tekstiä tai nimeä.

  Missä tavallisesti: Itse tehdyt ohjetekstit.

  Korjaus: Kirjoita ohjeteksti elementin sisään.

• ARIA-määritteen nimi on kirjoitettu väärin aria-valid-attr

  ARIA-määritteen nimessä on kirjoitusvirhe, esimerkiksi aria-labeledby, kun oikea muoto on aria-labelledby, joten selain jättää sen huomiotta.

  Missä tavallisesti: Käsin kirjoitettu koodi.

  Korjaus: Korjaa nimi oikeaksi, kuten aria-label, aria-labelledby tai aria-describedby.

• ARIA-määritteen arvo on virheellinen aria-valid-attr-value

  ARIA-määritteen arvo on kelvoton. Esimerkiksi aria-labelledby viittaa id:hen, jota sivulla ei ole, tai aria-expanded on muuta kuin true tai false.

  Missä tavallisesti: Koodi, josta on poistettu elementtejä, joihin viitattiin.

  Korjaus: Korjaa viittaukset olemassa oleviin id-tunnisteisiin ja käytä määritteen sallittuja arvoja.

• Painikkeelta puuttuu teksti tai nimi button-name

  Painike on tyhjä tai sisältää pelkän kuvakkeen ilman nimeä, joten ruudunlukija sanoo vain ”painike”.

  Missä tavallisesti: Sulje-, haku-, valikko- ja jakopainikkeet, joissa on pelkkä kuvake.

  Korjaus: Anna painikkeelle nimi: <button aria-label="Sulje ikkuna">✕</button>. Näkyvä teksti on aina paras nimi.

• Sama id-tunniste on sivulla useaan kertaan duplicate-id-aria

  Id-tunniste, johon ARIA-määrite tai kentän nimi viittaa, on sivulla useammin kuin kerran, joten apuväline voi lukea väärän tekstin.

  Missä tavallisesti: Toistuvat osat, kuten korttien ja lomakkeiden kopiot.

  Korjaus: Tee id-tunnisteista yksilöllisiä, esimerkiksi haku-1 ja haku-2.

• Kehykseltä puuttuu nimi frame-title

  Kehyksellä (<iframe>) ei ole title-määritettä, joten ruudunlukija ei kerro, mitä kehyksessä on.

  Missä tavallisesti: Upotetut kartat, videot ja lomakkeet.

  Korjaus: Lisää kuvaava nimi: <iframe src="…" title="Toimipisteen sijainti kartalla"></iframe>.

• Kehyksillä on sama nimi frame-title-unique

  Useammalla kehyksellä on sama title-määrite, joten ruudunlukijan käyttäjä ei erota niitä toisistaan.

  Missä tavallisesti: Sivut, joilla on useampi samanlainen upotus, kuten kaksi karttaa.

  Korjaus: Anna jokaiselle kehykselle oma nimi, esimerkiksi ”Helsingin toimipiste kartalla” ja ”Tampereen toimipiste kartalla”.

• Painikekentältä puuttuu teksti input-button-name

  Painikkeeksi tehdyllä kentällä (<input type="submit">, "button" tai "reset") ei ole tekstiä.

  Missä tavallisesti: Vanhat lomakkeet.

  Korjaus: Lisää painikkeen teksti value-määritteeseen: <input type="submit" value="Lähetä tilaus">.

• Kuvapainikkeelta puuttuu teksti input-image-alt

  Lomakkeen kuvana tehdyllä painikkeella (<input type="image">) ei ole alt-tekstiä, joten ruudunlukijan käyttäjä ei tiedä, mitä painike tekee.

  Missä tavallisesti: Kuvina tehdyt haku- ja lähetyspainikkeet.

  Korjaus: Kirjoita painikkeen toiminto alt-tekstiin: <input type="image" src="haku.png" alt="Hae">. Vielä parempi on tavallinen painike, jossa on teksti: <button>Hae</button>.

• Lomakkeen kentältä puuttuu nimi label

  Lomakkeen kentällä ei ole nimeä, joten ruudunlukija ei kerro, mitä kenttään kirjoitetaan.

  Missä tavallisesti: Hakukentät, uutiskirjeen tilauskentät ja nopeasti lisätyt kentät.

  Korjaus: Kytke kenttään nimi: <label for="email">Sähköposti</label><input id="email" type="email">. Jos nimeä ei haluta näkyviin, käytä aria-label-määritettä tai piilota nimi vain näkyvistä tyyleillä.

• Linkiltä puuttuu teksti tai nimi link-name

  Linkki on tyhjä tai sisältää pelkän kuvan tai kuvakkeen ilman nimeä, joten ruudunlukija sanoo vain ”linkki”.

  Missä tavallisesti: Kuvakelinkit, kuten somekuvakkeet, ja kuvalinkit ilman alt-tekstiä.

  Korjaus: Lisää linkkiin teksti tai kuvalle alt-teksti: <a href="/"><img src="logo.svg" alt="Yritys Oy, etusivu"></a>. Kuvakelinkille annetaan aria-label: <a href="…" aria-label="Yritys Oy Facebookissa">…</a>.

• Painike tai linkki on toisen painikkeen tai linkin sisällä nested-interactive

  Painike tai linkki on toisen painikkeen tai linkin sisällä, joten näppäimistö ja ruudunlukija eivät käsittele niitä oikein.

  Missä tavallisesti: Klikattavat kortit, joiden sisällä on erillinen painike tai linkki.

  Korjaus: Siirrä sisäkkäiset kohdat vierekkäin, tai tee kortista yksi linkki, jonka sisällä ei ole muita käytettäviä kohtia.

• Pudotusvalikolta puuttuu nimi select-name

  Pudotusvalikolla (<select>) ei ole nimeä, joten ruudunlukija ei kerro, mitä valitaan.

  Missä tavallisesti: Suodattimet ja tilauslomakkeet.

  Korjaus: Kytke valikkoon nimi: <label for="maa">Maa</label><select id="maa">…</select>.

• Avattavan osion otsikko puuttuu summary-name

  Avattavan osion (<details>) otsikko (<summary>) on tyhjä, joten käyttäjä ei tiedä, mitä osio sisältää.

  Missä tavallisesti: Itse tehdyt avattavat osiot, joiden otsikkona on pelkkä kuvake.

  Korjaus: Kirjoita otsikkoon osion sisältö: <summary>Toimitusehdot</summary>.

Mikä on vialla

Sivu näyttää tilaviestin, kuten ”Tuote lisätty koriin” tai hakutulosten määrän, mutta ruudunlukija ei lue sitä, koska viestiä ei ole merkitty koodiin.

Missä tätä tavallisesti näkee

Hakutulosten määrä, ostoskorin ilmoitukset, tallennusilmoitukset ja samalla sivulla näkyvä lomakkeen lähetyksen vahvistus.

Korjaus

Lisää sivulle valmiiksi tyhjä viestialue, jonka ruudunlukija lukee aina, kun sen sisältö muuttuu: <div role="status" id="ilmoitus"></div>, ja kirjoita viesti siihen: ilmoitus.textContent = "Tuote lisätty koriin". Alue voi olla näkymätön, jos viesti näkyy muualla. Kiireellisille virheille sopii role="alert", joka keskeyttää ruudunlukijan heti. Alueen pitää olla sivulla jo ennen viestiä, muuten osa ruudunlukijoista ei huomaa sitä.