Saa­vu­tet­ta­vuus ja ha­ku­ko­neop­ti­moin­ti – 6 helppoa vinkkiä

Inspiraatio tähän kirjoitukseen tuli artikkelista Web Accessibility and SEO: A Perfect Fit, jonka innoittamana kokosin tähän helposti toteutettavia vinkkejä saavutettavuuden ja hakukoneoptimoinnin parantamiseksi.

1. Selainotsikko palvelee kävijän lisäksi ruudunlukijaa ja hakukonetta 

Selainotsikko näkyy nimensä mukaisesti selaimen välilehdellä. Lisäksi se näkyy hakutulossivulla hakutuloksen otsikkona. Saavutettavuuden kannalta selainotsikko on usein ensimmäinen asia, jonka ruudunlukija sivulla kohtaa ja lukee. Kun kävijä selailee sivustoa ja etsii haluamaansa sivua, on tärkeää, että selainotsikko kuvaa tarkasti sivun sisältöä. 

Myös hakukonenäkyvyyden kannalta selainotsikko on tärkeä. Se on hyvä pitää napakkana, ja siihen on hyvä sisällyttää sivun avainsana. Monet julkaisujärjestelmät, kuten Drupal, luovat selainotsikon automaattisesti sivun pääotsikosta. On kuitenkin hyvä huomioida, että niiden ei ole pakko olla samanlaiset. Pääotsikko voi hyvin olla pidempi ja kuvailevampi ja selainotsikko napakampi. Esimerkiksi artikkelissamme Internetin ilmastouhkat on käytetty tällaista taktiikkaa. 

2. Otsikkotunnisteet auttavat sisältöhierarkian määrittämisessä 

Otsikkotunnisteet eli otsikkotagit määrittelevät verkkosivun hierarkkisen rakenteen. Tasoja on kuusi pääotsikon H1:stä viimeisen väliotsikkotason H6-tagiin.  

Hyvä otsikointi 

• etenee loogisessa järjestyksessä,
• ei hyppää tasojen yli (esim. H2-tagin jälkeen seuraava ei ole H4) ja
• kuvaa selkeästi sen alla olevaa sisältöä.

Kaikki sivulla kävijät hyötyvät selkeästä otsikoinnista sivua silmäillessään ja arvioidessaan, mihin sisältöön haluavat tutustua tarkemmin. Myös ruudunlukijan avulla otsikoita voi selata eli otsikkotunnisteet luovat osaltaan paremman käyttäjäkokemuksen. 

Hakukoneet puolestaan arvostavat sisältöä, joka vastaa mahdollisimman hyvin kävijän tekemään hakuun ja otsikot ovat tässä hakukoneiden apuna.  

Lisää tageista, rakenteesta ja sisällöstä artikkelissamme Hakukoneoptimointiin vaikuttavia tekijöitä.

Saavutettavuus palvelee kaikkia riippumatta siitä, onko sivusto saavutettavuusvaatimusten piirissä vai ei.

3. Kuvien vaihtoehtoinen teksti eli Alt Text 

Alt-tekstin tarkoitus on kertoa sanallisesti, mitä sivulla oleva visuaalinen elementti esittää. Vaihtoehtoinen teksti näkyy sivun koodissa ja on siten hakukoneiden ja ruudunlukijoiden käytettävissä, mutta muuten se ei kävijälle näy. 

Hyvä vaihtoehtoinen teksti on lyhyt ja selkeä ja kertoo kuvasta oleellisen tiedon. Sen tulee olla erilainen kuin kuvateksti, koska ruudunlukija lukee ääneen sekä vaihtoehtoisen tekstin että kuvatekstin. 

Joissain tapauksissa alt-teksti voi olla myös tyhjä. Esimerkiksi silloin, kun on kyse koristekuvista, jotka eivät sisällä mitään informaatiota. Tyhjän alt-tekstin kohdatessaan ruudunlukija ohittaa kuvan kokonaan.   

Tarkemmin kuvien vaihtoehtoisista teksteistä on kerrottu Saavutettavasti.fi-sivustolla.

Hakukoneet eivät näe kuvia, joten vaihtoehtoinen teksti auttaa niitä ymmärtämään kuvan sisällön. Ja jos kuvan haluaa näkyvän hyvillä sijoituksilla Googlen kuvahaussa, kannattaa vaihtoehtoiseen tekstiin paneutua huolella. Lisää kuvahausta aiemmassa artikkelissamme.

4. Linkkitekstit kertovat, minkälaista sisältöä on odotettavissa 

Jokaisella sivulla on linkkejä muille sivuille ja useimmat niistä ovat tekstilinkkejä. Linkkitekstin avulla kävijälle voi viestiä siitä, minkälaista sisältöä linkin takaa löytyy. Tämä on optimoinnin ja saavutettavuuden kannalta win-win-tilanne. 

Linkkiteksti auttaa hakukonetta hahmottamaan linkitettävän sivun kontekstia. Samalla tavalla linkkiteksti palvelee kävijää: kukaan ei halua klikata linkkiä, josta ei tiedä, mihin se johtaa. 

5. Videoiden tekstivastine  

Niiden organisaatioiden, joita saavutettavuusdirektiivi koskee, on tehtävä sivustoillaan julkaistavat videot (ja podcastit) saavutettaviksi viimeistään 23.9.2020 alkaen. Kun videot jäävät tallenteeksi sivustolle, niiden on oltava saavutettavia viimeistään 14 vuorokautta ensilähetyksen jälkeen.  

Videoiden saavutettavuutta voi parantaa tekstityksen lisäksi myös tekstivastineen avulla. Käytännössä siis lisätään sivulle videon sisältö tekstimuodossa. Usein näkee, että tekstivastine on kirjoitettu sivulle heti videon alle. Sen voi julkaista myös erillisessä tiedostossa, jolloin tiedoston tulee täyttää saavutettavuuden vaatimukset. 

Lisää videoiden ja äänilähetysten saavutettavuudesta Saavutettavuusvaatimukset.fi-sivustolla.

Hakukoneille tekstivastineet ovat hyödyllisiä, koska ne eivät katsele tai kuuntele videoita. Videon kanssa samalla sivulla oleva tekstivastine auttaa hakukonetta ymmärtämään videon kontekstin ja on apuna sivun indeksoinnissa. Tekstivastine on luonnollisesti hyödyllinen kaikille kävijöille riippumatta siitä, käyttääkö ruudunlukijaa vai ei. Molemmissa tapauksissa tekstin avulla voi arvioida, onko videon katsominen hyödyllistä.  

6. HTML-sivukartta 

Yksi lempiaiheistani, HTML-sivukartta, tekee paluun. Monet pitävät sivukarttaa 90-luvulta peräisin olevana jäänteenä, mutta sille löytyy edelleen tarkoitus. Kun sivukartta päivittyy dynaamisesti, siihen ei sen käyttöönoton jälkeen tarvitse juurikaan kiinnittää huomiota. 

Sivukartta esittää sivuston sisällön yhdellä sivulla ilman kuvia tai muita kävijää mahdollisesti häiritseviä ärsykkeitä. Sieltä on helppo löytää myös ne syvemmällä sivustorakenteessa olevat sivut, joihin ei esimerkiksi päävalikossa ole suoraa linkkiä. Myös hakukoneet saavat sivukartan linkkien kautta käsityksen sivuston tärkeistä sivuista ja pääsevät indeksoimaan ne. Linkki sivukarttaan sijoitetaan yleensä sivun alaosaan ns. footeriin.

Vinkit 1-5 on sivuston päivittäjän helppo toteuttaa itse ilman varsinaista teknistä osaamista tai apua. Vinkin 6 sivukartan luominen onnistuu yleisimmillä julkaisujärjestelmillä sivuston tekniseltä ylläpitäjältä varsin helposti.