Opas verkkosivuston web-saavutettavuuteen osa #1: HTML
Saavutettavien 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. Doctype
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 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 virheille 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.
2. Lang-attribuutti
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 saavutettavuus
Sivujen kielen määrittäminen lähdekoodissa on tärkeää niin saavutettavuuden kuin hakukoneoptimoinninkin kannalta. Sillä voit:
1. Tehdä sivusta paremmin indeksoitavan hakukoneille.
2. 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.
3. Auttaa käyttäjää tarkistamaan kirjoitusvirheitään sivun kielellä. Esimerkiksi Firefox vaihtaa sanakirjaansa <textarea>:ssa, korostaen kirjoitusvirheet.
4. Kertoa ruudunlukijalle, mitä synteettistä ääniprofiilia sen kannattaa käyttää.
5. 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 niissä child-elementeissä, jotka käyttävät eri kieltä kuin <html>.
<Title>-elementti
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.
Mitä hyötyä tästä on?
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.