EN
Snoobin saavutettavuustarkistuksen avulla voit tarkistaa verkkosivujen saavutettavuuden virheet. Verkkosivujesi tekninen tarkistus ei kuitenkaan voi havaita kaikkia ongelmia.
Jos Snoobin raportti listaa paljon virheitä tai varoituksia, se voi vaikuttaa ensisilmäyksellä ylivoimaiselta.
Saavutettavuutta voi parantaa nopeasti muutamilla selkeillä ohjeilla. Helpottaaksemme asiakkaidemme työtä olemme koonneet keskeiset ohjeet alla olevaan listaan.
Navigaatio
- Voiko sivustolla navigoida näppäimistön tab-näppäimellä?
- Onko näkyvää kohdistusmerkkiä (ääriviivat tai alleviivaus, väri)?
- Tekstikappaleiden otsikoiden tulisi noudattaa loogista järjestystä aina kun mahdollista (H1 → H2 → H3).
Kuvat ja grafiikka
- Onko kaikilla sisällön kannalta merkityksellisillä kuvilla kuvaava vaihtoehtoinen teksti?
- Koristeelliset kuvat (nämä ovat kuvia, joita ei käytetä sisältöön, vaan ne on merkitty koristeellisiksi.
Tämä tarkoittaa tyhjää alt-tilaa: alt=""). - Mainos- tai muissa bannereissa tulisi olla vaihtoehtoinen teksti, joka kuvaa viestin sisältöä, ei vain sana ”banneri”. Erityisesti silloin, kun banneri on kuva.
Värit ja kontrastit
- Tarkista värien ja tekstin kontrasti: käytä vähintään 4.5:1 normaalille tekstille ja 3:1 suurelle tekstille.
- Älä käytä pelkästään väriä osoittamaan toimintoa. Esimerkiksi virheilmoitukset tulisi esittää punaisen värin lisäksi myös selkeällä kuvakkeella tai merkinnällä sekä ymmärrettävällä vaihtoehtoisella tekstillä.
- Painikkeiden tulee erottua selvästi taustasta.
Lomakkeet ja kassalle siirtyminen, ostoskorin tuotteet
- Varmista, että jokaisella lomakekentällä on otsikko, joka on linkitetty pyydettyyn tietoon.
- Virheet tulee selittää selkeästi tekstissä ja riittävän suurella fontilla – pelkkä pieni fontti tai punainen korostus ei riitä.
- Varmista, että välilehtien järjestys etenee kenttien välillä loogisessa järjestyksessä. Pakolliset kentät on merkittävä selkeästi – ei pelkästään värin avulla.
- Varmista, että painikkeissa (esim. Lähetä, Kassalle, Tee tilaus) on selkeät tekstimerkinnät.
Painikkeet ja linkit
- Painikkeissa tai nimetyissä linkeissä tulisi käyttää merkityksellistä tekstiä (esim. ”Lisää ostoskoriin” eikä ”Klikkaa tästä”).
- Napautuskohteet ovat riittävän suuria (esimerkiksi 45×45 pikselin neliö olisi sopiva).
- Saman linkkitekstin tulisi viitata samaan kohteeseen. Esimerkiksi useita ”Lue lisää” -linkkejä ei tulisi ohjata eri kohteisiin. Käytä lisätekstiä mahdollisuuksien mukaan.
Media
- Videoissa tulisi olla tekstitys aina kun mahdollista – vähintään automaattisesti luotu, mutta mieluiten myös tarkistettu ja muokattu.
- Ääni- tai videotallenteella tulisi olla saatavilla tekstivastine, joko samalla sivulla tai linkitettynä siihen.
- Käyttäjien pitäisi pystyä hidastamaan videon nopeutta, eikä automaattista, pysäyttämätöntä ääntä tulisi käyttää.
Mobiili- ja responsiivinen suunnittelu
- Varmista, että sisältö näkyy näytöllä ilman vaakasuuntaista vieritystä.
- Pop-up -ikkunoiden ja modaalien sulkeminen näppäimistöllä on oltava mahdollista. (Paras vaihtoehto Esc).
- Painikkeiden ja linkkien on oltava riittävän suuria, jotta niitä olisi helppo napauttaa kosketusnäytöillä.
Lopuksi, mutta yhtä tärkeänä: suorituskyky ja käytettävyys
- Sivuston nopea latautuminen on tärkeää, koska hitaat sivut vaikeuttavat myös aputeknologioiden toimintaa (esim. näytönlukija) ja turhauttaa käyttäjiä.
- Ohita-linkit (kuten ”Siirry pääsisältöön” tai ”Tee yhteenveto”) ovat käytettävissä.
- Vältä laitteessa vilkkuvia tai välkkyviä elementtejä, jotka voivat aiheuttaa kohtauksia.
Kuten huomaat, suurin osa näistä ohjeista on täysin järkeviä ja melko helposti toteutettavissa.
Saavutettavuus ei ole vain lakisääteinen vaatimus. Täysin esteettömillä verkkosivustoilla ja verkkokaupoilla on selkeät liiketoiminnalliset edut.
Tässä linkki mielenkiintoiseen raporttiin World Wide Web Consortiumilta (W3C) nimeltä "The Business Case for Digital Accessibility": Klikkaa tästä raporttiin