Nguyen Nguyen, 02/10/2020
Web-saavutettavuudessa verkkosivujen konepellin alla on kosolti käyttäjälle näkymättömiä HTML-elementtejä. Kolmen kärjessä ovat Doctype, lang ja title-elementit.
1. Mitä on saavutettavuus?
Aloitetaanpa muutamalla määrittelyllä. Saavutettavuus meidän aineellisessa maailmassa on ympäristön käyttökelpoisuutta mahdollisimman monelle henkilölle. Ottakaamme ovenkahva esimerkiksi: Muutamia kymmeniä vuosia sitten, pyöreät nupit olivat hyvin suosittuja. Ne säästävät tilaa ja näyttävät söpöiltä, mutta ovat painajainen henkilöille, jotka kärsivät väliaikaisesti tai pysyvästi rajoitetuista käden tai kämmenen liikkeistä. Tästä syystä ne korvattiin kääntyvällä ovenkahvalla, joka tuo mukanaan helpomman ovenavauksen varsinkin hätätapauksissa, kuten tulipaloissa.
Näin ollen, web-saavutettavuus on nettisivujen käyttökelpoisuutta niin monelle henkilölle kuin mahdollista. Web-saavutettavuudessa verkkosivujen konepellin alla on kosolti käyttäjälle näkymättömiä HTML-elementtejä, jotta käyttäjät, jotka eivät tukeudu näkökykyyn, voisivat yhä käsittää sivun sisällön. Kolmen kärjessä ovat Doctype, lang ja title-elementit.
2. Doctype
Mistä on kyse?
Oli verkkosovelluksesi miten monimutkainen ja dynaaminen hyvänsä, on tärkeää muistaa että sen perustoiminto on edelleen yksinkertaisesti luoda sisältöä selaimen ikkunaan. Tämä pätee niin staattisille sivuille kuin vaikkapa yhden sivun applikaatioille; sivujen rakenne on pohjimmiltaan tekstidokumentti. Siksipä <!DOCTYPE html>:n pitäisi olla merkkiyhdistelmä, joka ilmestyy ensimmäiselle riville koodiasi.
Doctype ja web-saavutettavuus
Doctypen jättäminen pois voi aiheuttaa sivujen hajoamisen käyttäjille, sillä selain ei tiedä miten tulkita sisältöä ja voi alkaa käyttämään sivuille sopimattomia käytänteitä. Tämä on usein tunnettu ns. quirks modena. Sivujen rakenne ja toiminnot voivat muuttua virheillä alttiiksi ja ennalta-arvaamattomiksi.
“Quirks mode -tilassa sivujen rakenne emuloi ei-standardia käytöstä Navigator 4:ssä ja Internet Explorer 5:ssä. Tämä on elintärkeää, jotta voidaan tukea verkkosivuja, jotka olivat rakennettu ennen web-standardien laajaa yleistymistä. Full standards -tilassa sivut toimivat (toivottavasti) HTML:n ja CSS:n määritysten mukaisesti.”
– Quirks Mode and Standards Mode – Mozilla Web Docs
Tee se näin
Oiva nyrkkisääntö on lisätä <!DOCTYPE html> aina HTML-dokumentaation alkuun.
3. Lang-attribuutti
Mistä on kyse?
Lang kertoo <html>-elementissä, millä kielelle sisältö on kirjoitettu: esimerkiksi suomeksi tai englanniksi. Voit vaihtaa kieltä sivun sisällä käyttämällä langin child-elementtejä <body>:ssä. Yksi vaihtoehto tähän on <blockquote>:
<blockquote lang=”en”>
<p>English content goes here.</p>
</blockquote>lang-attribuutti ja web-saavutettavuus
Sivujen kielen määrittäminen lähdekoodissa on tärkeää niin saavutettavuuden kuin hakukoneoptimoinninkin kannalta. Sillä voit:
- Tehdä sivusta paremmin indeksoitavan hakukoneille
- Saada sivusta helpommin käännettävän käyttäjille, jotka käyttävät kolmannen osapuolen käännöstyökaluja, kuten Google Translate API:a
- Auttaa käyttäjää tarkistamaan kirjoitusvirheitään sivun kielellä. Firefox, esimerkiksi, vaihtaa sanakirjaansa
<textarea>:ssa, korostaen kirjoitusvirheet. - Kertoa ruudunlukijalle, mitä synteettistä ääniprofiilia sen kannattaa käyttää
- Auttaa selaimia valitsemaan ja renderöimään järjestelmän fontit oikeilla merkkijonoilla. Esimerkiksi
lang-attribuutin asettaminen zh-Hans:iin saa selaimet käyttämään yksinkertaistettua kiinafonttia.
Tee se näin
Määrittele aina lang-attribuutti <html>:ssäsi ja kaikissa child-elementeissä, jotka käyttävät eri kieltä kuin <html>.,
4. <title>-elementti
Mistä on kyse?
Selaimet kiinnittävät huomionsa <head>:issa sijaitsevaan <title>-elementtiin kun ne nimeävät välilehden käyttäjälle. Samalla perusteella hakukoneet nimeävät linkin sivujesi hakutulokseen.
<title>-elementti ja web-saavutettavuus
Elementin perusteella monet saavutettavuudessa auttavat teknologiat nimeävät verkkosivujesi elementtejä. Esimerkiksi dokumentin, <iframe>:n tai upotetun SVG:n nimet tulevat suoraan <title>:stä. Otsikkoelementti kerrotaan heti sivujen lataamisen alussa, joten se on oiva tilaisuus kertoa sivujesi sisältö tiivistelmänä.
Tee se näin
Älä ikinä jätä <title>:ä tyhjäksi sivujesi lähdekoodissa. Yleinen tapa on kuvata sekä sivua että sen omistajaa. Esimerkiksi “Työntekijät | Punos Mobile Oy”. Jos kyseessä on hakutulossivu, pitäisi otsikossa olla mukana käytetty hakutermi: “Punos Mobile | Search results for “Työntekijät”
Loppukaneetti
Koska HTML:llä koodatut verkkosivut vaihtelevat rajusti koossa ja muodossa, on suunnittelijalla tärkeää olla hyvät periaatteet, joiden perusteella toimia. Tämän artikkelin ohjeet ovat vahva aloitus, josta jatkamme myöhemmissä osissa.