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>:

<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.