# Testaamamme saavutettavuusongelmat Jokainen sivu selittää yhden automaattisten testiemme löytämän ongelman: mitä se tarkoittaa, mihin WCAG-kriteeriin se liittyy, miten se korjataan millä tahansa sivustolla, Shopifyssa ja WooCommercessa ja miten korjaus tarkistetaan. ## Saavutettavuusongelmat - [ARIA-piilotettu elementti ei saa olla fokusoitava eikä sisältää fokusoitavia elementtejä](https://www.fixreports.com/fi/issues/aria-hidden-focus): WCAG 4.1.2 · Taso A. Fokusoitavat elementit on piilotettu ruudunlukijoilta, mutta niihin pääsee silti näppäimistöllä. (ARIA-attribuutit ja -roolit) - [autocomplete-attribuuttia on käytettävä oikein](https://www.fixreports.com/fi/issues/autocomplete-valid): WCAG 1.3.5 · Taso AA. Lomakekenttä käyttää autocomplete-arvoa, jota selaimet eivät tunnista. (Lomakekentät ilman nimiöitä) - [Painikkeilla on oltava tunnistettava teksti](https://www.fixreports.com/fi/issues/button-name): WCAG 4.1.2 · Taso A. Joillakin painikkeilla ei ole saavutettavaa nimeä, joten ruudunlukijan käyttäjät kuulevat vain ”painike”. (Linkit ja painikkeet ilman nimeä) - [Elementtien on täytettävä värikontrastisuhteen vähimmäisraja-arvot](https://www.fixreports.com/fi/issues/color-contrast): WCAG 1.4.3 · Taso AA. Osa tekstistä ei erotu taustastaan tarpeeksi, jotta heikkonäköiset voisivat lukea sen. (Heikko värikontrasti) - [Dokumenteilla on oltava -elementti navigoinnin tueksi](https://www.fixreports.com/fi/issues/document-title): WCAG 2.4.2 · Taso A. Sivulla ei ole otsikkoa, joten käyttäjät eivät tiedä, millä sivulla he ovat. (Sivujen otsikot) - [ARIAssa ja nimiöissä käytettyjen id-arvojen on oltava yksilöllisiä](https://www.fixreports.com/fi/issues/duplicate-id-aria): WCAG 4.1.2 · Taso A. Useilla elementeillä on sama id, jota käytetään nimeämään tai kuvaamaan jotain, joten avustava teknologia voi lukea väärän nimiön. (ARIA-attribuutit ja -roolit) - [Kehyksillä on oltava saavutettava nimi](https://www.fixreports.com/fi/issues/frame-title): WCAG 4.1.2 · Taso A. Upotetulla kehyksellä (usein kartta, video tai sovelluswidget) ei ole otsikkoa, joten ruudunlukijan käyttäjät eivät tiedä, mitä se sisältää. (Sivun rakenne, otsikot ja maamerkit) - [Otsikkotasojen pitäisi kasvaa vain yhdellä kerrallaan](https://www.fixreports.com/fi/issues/heading-order): Saavutettavuuden hyvä käytäntö. Otsikkotasoja hypätään yli (esimerkiksi H2:sta H4:ään), mikä tekee sivun rakenteesta sekavan ruudunlukijan käyttäjille. (Sivun rakenne, otsikot ja maamerkit) - [<html>-elementillä on oltava lang-attribuutti](https://www.fixreports.com/fi/issues/html-has-lang): WCAG 3.1.1 · Taso A. Sivu ei ilmoita kieltään, joten ruudunlukijat voivat lukea sen väärällä ääntämyksellä. (Sivun kieli) - [<html>-elementin lang-attribuutilla on oltava kelvollinen arvo](https://www.fixreports.com/fi/issues/html-lang-valid): WCAG 3.1.1 · Taso A. Sivun kielikoodi ei ole kelvollinen, joten ruudunlukijat eivät pysty valitsemaan oikeaa puheääntä. (Sivun kieli) - [Kuvilla on oltava vaihtoehtoinen teksti](https://www.fixreports.com/fi/issues/image-alt): WCAG 1.1.1 · Taso A. Kuvista puuttuu tekstivastine, joten ruudunlukijan käyttäjät eivät tiedä, mitä ne esittävät. (Kuvat ilman tekstivastinetta) - [Input-painikkeilla on oltava tunnistettava teksti](https://www.fixreports.com/fi/issues/input-button-name): WCAG 4.1.2 · Taso A. Input-painikkeella ei ole tekstiä, joten ruudunlukijat eivät pysty kertomaan, mitä se tekee. (Lomakekentät ilman nimiöitä) - [Kuvapainikkeilla on oltava vaihtoehtoinen teksti](https://www.fixreports.com/fi/issues/input-image-alt): WCAG 1.1.1, 4.1.2 · Taso A. Kuvapainikkeella ei ole alt-tekstiä, joten ruudunlukijat eivät pysty kertomaan, mitä se tekee. (Kuvat ilman tekstivastinetta) - [Lomake-elementeillä on oltava nimiöt](https://www.fixreports.com/fi/issues/label): WCAG 4.1.2 · Taso A. Joillakin lomakekentillä ei ole nimiötä, joten ruudunlukijan käyttäjät eivät tiedä, mitä niihin kirjoitetaan. (Lomakekentät ilman nimiöitä) - [Dokumentissa pitäisi olla yksi main-maamerkki](https://www.fixreports.com/fi/issues/landmark-one-main): Saavutettavuuden hyvä käytäntö. Sivulla ei ole main-maamerkkiä, joten ruudunlukijan käyttäjät eivät voi hypätä suoraan sisältöön. (Sivun rakenne, otsikot ja maamerkit) - [Linkkien on erotuttava ilman värin varaan jättämistä](https://www.fixreports.com/fi/issues/link-in-text-block): WCAG 1.4.1 · Taso A. Kappaleiden sisällä olevat linkit erottuvat vain värin perusteella, joten ihmiset, jotka eivät erota värieroa, eivät huomaa niitä. (Heikko värikontrasti) - [Linkeillä on oltava tunnistettava teksti](https://www.fixreports.com/fi/issues/link-name): WCAG 2.4.4, 4.1.2 · Taso A. Joissakin linkeissä ei ole tekstiä, jonka ruudunlukija voisi lukea. Usein kyse on pelkistä kuvakelinkeistä, kuten somekuvakkeista tai ostoskorin kuvakkeesta. (Linkit ja painikkeet ilman nimeä) - [Zoomausta ja skaalausta ei saa estää](https://www.fixreports.com/fi/issues/meta-viewport): WCAG 1.4.4 · Taso AA. Sivu estää nipistyszoomauksen mobiililaitteilla. (Zoomaus ja responsiivisuus) - [Sivulla pitäisi olla ensimmäisen tason otsikko](https://www.fixreports.com/fi/issues/page-has-heading-one): Saavutettavuuden hyvä käytäntö. Sivulla ei ole ylimmän tason otsikkoa. (Sivun rakenne, otsikot ja maamerkit) - [Kaiken sivun sisällön pitäisi olla maamerkkien sisällä](https://www.fixreports.com/fi/issues/region): Saavutettavuuden hyvä käytäntö. Osa sisällöstä ei ole sivun maamerkin (header, nav, main tai footer) sisällä. (Sivun rakenne, otsikot ja maamerkit) - [[role="img"]- ja [role="image"]-elementeillä on oltava vaihtoehtoinen teksti](https://www.fixreports.com/fi/issues/role-img-alt): WCAG 1.1.1 · Taso A. Kuvana esitetyllä elementillä ei ole tekstivastinetta. (Kuvat ilman tekstivastinetta) - [Vieritettävään alueeseen on päästävä näppäimistöllä](https://www.fixreports.com/fi/issues/scrollable-region-focusable): WCAG 2.1.1 · Taso A. Vieritettävään alueeseen ei pääse näppäimistöllä, joten näppäimistön käyttäjät eivät voi vierittää sitä. (Näppäimistökäyttö ja fokus) - [Select-elementillä on oltava saavutettava nimi](https://www.fixreports.com/fi/issues/select-name): WCAG 4.1.2 · Taso A. Pudotusvalikolta (usein lajittelu- tai muunnelmavalitsin) puuttuu nimiö. (Lomakekentät ilman nimiöitä) - [<svg>-elementeillä, joiden rooli on img tai image, on oltava vaihtoehtoinen teksti](https://www.fixreports.com/fi/issues/svg-img-alt): WCAG 1.1.1 · Taso A. Tietoa välittävällä SVG-kuvalla ei ole tekstivastinetta. (Kuvat ilman tekstivastinetta) - [Kaikkien kosketuskohteiden on oltava 24px:n kokoisia tai niiden ympärillä on oltava riittävästi tilaa](https://www.fixreports.com/fi/issues/target-size): WCAG 2.5.8 · Taso AA. Jotkin kosketuskohteet ovat pienempiä kuin 24 × 24 pikseliä ja liian lähellä toisiaan, joten niihin on vaikea osua puhelimella. (Näppäimistökäyttö ja fokus)