Verkkosivujen saavutettavuus: käytännön opas
Saavutettavuus on ero sivuston jota kaikki voivat käyttää, ja sivuston joka sulkee osan kävijöistä ulos kenenkään huomaamatta. Useimmat vaatimukset ovat yksinkertaisia ja halpoja, jos ne hoidetaan rakentamisen aikana.
Tämä opas kattaa mitä tarkistat, miten testaat ilman kalliita työkaluja, ja mikä on lakisääteistä eikä vain hyvää käytäntöä.
Perusta vaikutuksen mukaan#
Näiden kohtien täyttäminen poistaa suurimman osan todellisista esteistä, eikä yksikään ole kallis rakentamisen aikana.
- Semanttinen HTML. Otsikot, listat, painikkeet ja linkit oikeilla elementeillä — se on kaiken perusta.
- Näppäimistökäyttö. Kaiken minkä voi tehdä hiirellä, pitää onnistua Tab- ja Enter-näppäimillä.
- Näkyvä kohdistusmerkintä. Älä koskaan poista ääriviivaa laittamatta parempaa tilalle.
- Riittävä kontrasti. 4,5:1 tavalliselle tekstille, 3:1 suurelle tekstille.
- Kuvien vaihtoehtoinen teksti. Kuvaileva informatiivisissa, tyhjä koristeellisissa.
- Nimikkeet lomakekentissä. Kenttään sidottuina, ei pelkkänä paikkamerkkitekstinä.
- Selkeät virheet. Kentän kohdalla, kertoen mitä korjata, ei vain punaisella.
- Älä välitä tietoa pelkällä värillä.
- Tekstitykset videoissa, ja litterointi äänessä.
Semanttinen HTML ratkaisee yksinään valtavan osan ongelmista. Painike joka on <div>, pettää välittömästi näppäimistöllä ja ruudunlukijoilla.
Testaus ilman kalliita työkaluja#
Viisi testiä jotka kuka tahansa voi tehdä ja jotka nappaavat suurimman osan ongelmista.
| Testi | Näin teet | Mitä paljastaa |
|---|---|---|
| Pelkkä näppäimistö | Laita hiiri sivuun ja navigoi Tabilla | Kohdistusansat, saavuttamattomat elementit |
| Zoomaus 200 prosenttiin | Suurenna selaimessa | Hajoava asettelu, katkennut teksti |
| Automaattinen tarkistin | Ilmainen saavutettavuuslaajennus | Kontrasti, nimikkeet, rakenne |
| Ruudunlukija | Käyttöjärjestelmän sisäänrakennettu | Onko sivu ymmärrettävä luettuna |
| Harmaasävy | Järjestelmäsuodatin | Pelkällä värillä välitetty tieto |
Automaattiset työkalut nappaavat noin kolmanneksen ongelmista. Näppäimistötesti nappaa monet lopuista ja kestää kaksi minuuttia.
Yleiset virheet#
Malleja jotka toistuvat kerta toisensa jälkeen ja jotka on helppo välttää.
- Kohdistuksen ääriviivan poistaminen esteettisistä syistä — tekee sivustosta käyttökelvottoman näppäimistöllä.
- <div>-elementin käyttö klikkauskäsittelijällä <button>-elementin sijaan, jolloin näppäimistö ja semantiikka menetetään.
- Paikkamerkkiteksti nimikkeen sijaan: se katoaa kun alat kirjoittaa.
- Matala kontrasti toissijaisessa tekstissä, hyvin yleistä vaaleilla harmaasävyillä.
- Kuvat joissa on poltettu teksti, lukukelvottomia ruudunlukijoille ja käännökselle.
- Automaattiset karusellit ilman keskeytysmahdollisuutta.
- Modaalit jotka eivät palauta kohdistusta ne avanneeseen elementtiin.
- Kuvakkeet ilman saavutettavaa nimikettä, erityisesti valikoissa ja sulkupainikkeissa.
Lakisääteisyys ja laajuus#
Sääntely vaihtelee maittain ja organisaatiotyypeittäin, mutta suunta on kaikkialla sama.
| Konteksti | Tilanne |
|---|---|
| Julkinen sektori Euroopan unionissa | Pakollista, saavutettavuusselosteineen |
| Digitaaliset palvelut ja kauppa | Yhä laajemmin EU-lainsäädännön piirissä |
| Julkisen sektorin toimittajat | Usein vaadittu kilpailutuksissa |
| Viitestandardi | WCAG 2.1 taso AA |
| Yksityiset sivustot ilman julkisia sopimuksia | Hyvä käytäntö, kasvavalla oikeudellisella riskillä |
| Mobiilisovellukset | Samojen ohjeiden piirissä |
Lakisääteisyydestä riippumatta käytännön perustelu on yksinkertainen: merkittävällä osalla väestöstä on jokin rajoite, ja tilapäiset rajoitteet kohtaavat kaikkia jossain vaiheessa.
Usein kysytyt kysymykset
Kallistuuko projekti saavutettavuuden takia?
Rakentamisen aikana vain vähän — suurin osa on oikean HTML:n kirjoittamista ja riittävän kontrastin värien valintaa. Korjaaminen valmiiseen sivustoon maksaa selvästi enemmän, koska se tarkoittaa puuttumista jo rakennettuun rakenteeseen. Siksi sen pitäisi olla vaatimuksissa, ei jälkikäteisessä auditoinnissa.
Riittävätkö automaattiset työkalut?
Eivät. Ne nappaavat noin kolmanneksen ongelmista: kontrastin, puuttuvat nimikkeet, otsikkorakenteen. Ne eivät osaa arvioida onko vaihtoehtoinen teksti hyödyllinen, onko sarkainjärjestys mielekäs, tai onko sivu ymmärrettävä luettuna. Yhdistä automaatti näppäimistötestiin ja ruudunlukijaan.
Auttaako saavutettavuus hakukonenäkyvyyttä?
Auttaa, todellisen päällekkäisyyden kautta: semanttinen HTML, hyvin rakennetut otsikot, vaihtoehtoinen teksti ja tekstitetty video palvelevat molempia tavoitteita. Se ei ole hakukonetaktiikka, mutta molemmat vetävät samaan suuntaan, koska kumpikin nojaa siihen että sisältö on ymmärrettävää visuaalisesta esityksestä riippumatta.
Tarvitsenko täyden vaatimustenmukaisuuden?
Jos olet lakisääteisesti velvoitettu — kyllä, vaaditulla tasolla. Muutoin etene prioriteetin mukaan: korjaa ensin se mikä estää käytön — näppäimistö, kontrasti, nimikkeet, lomakkeet — ja hienommat kohdat sitten. Sivusto jossa perusteet ovat kunnossa, on käyttökelpoinen; täysi muodollinen vaatimustenmukaisuus on seuraava askel.
verkkosivujen saavutettavuuswcagsaavutettava sivustonäppäimistönavigointikontrasti saavutettavuusruudunlukija
