Pitkän ja tiheän tekstin lukeminen voi olla vaikeaa, jos tekstissä ei ole selkeää jäsennystä tai rakennetta. Otsikot voivat helpottaa sisällön lukemista ja ymmärtämistä tarjoamalla tekstille rakenteen.

Otsikot erottuvat usein visuaalisesti muusta sisällöstä. Tämä ulkoasun vaihtelu ei ole vain tärkeä visuaalinen katko: lisäksi se auttaa lukijoita löytämään sivulta etsimänsä silmäilemällä.

Esimerkiksi tämän ohjesivun otsikot kertovat yhdellä vilkaisulla, mistä löydät ohjeet otsikkotasojen käyttämiseen ja parhaan otsikkorakenteen valitsemiseen.

Kun otsikot on luotu oikein, sivun selaaminen on helpompaa. Otsikoiden avulla selaimet, lisäosat ja näytönlukijat voivat siirtyä suoraan tiettyyn aiheeseen. Esimerkiksi näytönlukijoiden käyttäjät voivat kuunnella otsikkoluettelon, siirtyä suoraan haluamaansa otsikkoon ja aloittaa lukemisen sieltä.

Otsikkorakenne

Otsikoiden tulee noudattaa peräkkäistä laskevaa järjestystä, eikä yhtään tasoa saa ohittaa. Otsikkotaso ilmaistaan numeroilla niin, että 1 on ylin ja 6 alin taso.

Useimmat teknologiat, kuten näytönlukijat, on rajoitettu kuuteen otsikkotasoon. Yli kuuden tason otsikoita ei välttämättä voida lukea, joten niitä tulee välttää.

Otsikkotaso 1 edustaa usein verkkosivun tai asiakirjan otsikkoa. Sitä voi ajatella myös kuin kirjan otsikkona. Jos kirjassa on kolme näytöstä, näytösten otsikoihin käytettäisiin otsikkotasoa 2. Otsikkotasoa 3 käytettäisiin sitten kunkin näytöksen lukujen otsikoihin ja niin edelleen.

Otsikoiden epälooginen järjestys on pieni ongelma. Pienetkin ongelmat kannattaa silti korjata lukukokemuksen parantamiseksi. 

Ally auttaa tunnistamaan epäloogiset otsikot ja kertoo, miten ne korjataan. Ally tekee seuraavat tarkistukset:

  • Onko verkkosivulla tai asiakirjassa otsikoita?
  • Alkavatko otsikkotasot 1:stä?
  • Onko tekstillä looginen ja johdonmukainen järjestys ja hierarkia? 
  • Ylittävätkö otsikkotasot tason 6?

Jos sisältö ei läpäise jotain tarkistusta, Ally merkitsee otsikon ongelmaksi.

Allyn avulla voit etsiä otsikoita, jotka eivät ole loogisessa järjestyksessä.

Allyn helppokäyttöisyysraportti auttaa löytämään ja korjaamaan sivuston helppokäyttöisyysongelmia. Napsauta raportin linkkiä ja kirjaudu sisään. Avaa raportti ja katso Helppokäyttöisyysongelmat-taulukon ongelmaluetteloa.

Helppokäyttöisyysongelmat-taulukko näkyy sekä Yleiskatsaus- että Ala-välilehdissä. Aloita Ala-välilehdestä ja katso, onko siinä mitään alakohtaisia ongelmia.

Otsikoiden epälooginen järjestys on pieni ongelma. Helppokäyttöisyysongelmat -taulukon Pieni-välilehdessä on luettelo pienistä ongelmista. Valitse epäloogisessa järjestyksessä olevien otsikoiden aiheuttamat ongelmat.

Jos aloitat Yleiskatsaus-välilehdestä, valitse ensin ongelma ja sitten ala, jolla ongelma ilmenee. Otsikoihin liittyvät ongelmat voivat alkaa luettelossa sanalla Asiakirja tai HTML.

Valitse alan otsikoihin liittyvien ongelmien luettelosta ongelmallisen kohteen vieressä oleva helppokäyttöisyysarvon ilmaisin. Sisältöeditorin palautepaneeli avautuu.

Esikatsele epäloogisessa järjestyksessä olevia otsikoita

Allyn palautepaneelissa voit esikatsella sisältöä sekä saada yksityiskohtaista palautetta ja ohjeita helppokäyttöisyysongelmien korjaamiseen. Esikatselun avulla voit tarkastella otsikoita, jotka eivät ole loogisessa järjestyksessä.

Asiakirjassa voi olla esikatselukorostuksia, jotka osoittavat, missä tietyt helppokäyttöisyysongelmat esiintyvät. Korostukset näyttävät kerrallaan yhden ongelmatyypin kaikki esiintymät. Esimerkiksi epäloogisessa järjestyksessä olevien otsikoiden kohdalla esikatselu korostaa jokaisen otsikon, jossa tämä ongelma esiintyy.

Esikatselutyökalut

Esikatselutyökalujen avulla voit selata asiakirjassa olevia ongelmia.

  • Käy esikatselu läpi sivu kerrallaan.
  • Selvitä, montako kertaa tietty ongelma ilmenee.
  • Voit siirtyä korostetusta ongelmasta suoraan seuraavaan.
  • Voit piilottaa tai näyttää korostukset.
  • Voit suurentaa tai pienentää esikatselun sisältöä.
  • Jos ongelma on liitetiedostossa, lataa alkuperäinen tiedosto.

Otsikkotasojen korjaaminen Allyn ohjeiden avulla

Ally olettaa, että tunnet HTML-koodauksen perusteet ja osaat käyttää tarvittavaa sisällönhallintajärjestelmää (CMS). Ohjeiden seuraaminen edellyttää, että osaat muokata verkkosivuja HTML-muodossa tai muokata lähdekoodia käyttämässäsi sisällönhallintajärjestelmässä.

Esikatselun lisäksi Ally antaa vaiheittaiset ohjeet ongelman korjaamiseen. Ally järjestää tämän palautteen päätöspuuksi. Sinun tarvitsee vain lukea ohjeet ja reagoida kehotteisiin. Lue, mikä ongelma on, miksi se on merkityksellinen ja miten asian voi korjata.

Saat vaiheittaiset ohjeet valitsemalla Otsikkojärjestyksen korjaaminen.

Otsikkotasojen käyttäminen verkkosivuilla

Voit lisätä otsikkotasoja verkkosivuillesi useilla eri tavoilla.

  • HTML: Allyn ohjeet opastavat sinua HTML-muotoisten otsikkotasojen etsimisessä ja muokkaamisessa. Aloita etsimällä otsikon sisältävä verkkosivu. Muokkaa sivua. Päivitä HTML-koodin otsikkotunniste oikealle tasolle. Tallenna sivu.
  • RTE: Joissakin sisällönhallintajärjestelmissä on tekstimuotoilueditori (Rich Text Editor, RTE) , jonka työkalut voivat helpottaa otsikoiden lisäämistä. Etsi otsikko verkkosivulta. Valitse otsikko ja ota uusi otsikkotaso käyttöön sisällönhallintajärjestelmän työkaluilla. Tallenna sivu.

w3schools-sivustolla voit perehtyä tarkemmin HTML-koodiin ja CSS-tyyleihin.

Miksen näe vaihtoehdoissa otsikkotasoa, jonka haluan valita?

Ally ei voi hallita sisällönhallintajärjestelmäsi otsikkotasoja. Ally tarkistaa loogisen otsikkojärjestyksen käytettyjen otsikkotasojen perusteella.

On suositeltavaa rajoittaa otsikkotasojen määrä kuuteen. Kaikki kuusi tasoa eivät kuitenkaan välttämättä näy sisältöeditorissa.

Otsikkotasojen määrä voidaan määrittää sivuston tyylioppaassa ja se voi olla osa mallia. Tutustu sivuston tyylioppaaseen ennen kuin teet mitään muutoksia.

Joissakin tapauksissa ylätason otsikoita käytetään jo osana sisällönhallintajärjestelmää. Esimerkiksi tämän ohjesivun otsikko on otsikkotasolla 1. Koska otsikko käyttää otsikkotasoa 1, editorin otsikkotasot alkavat tasolta 2.

Luo sivulle looginen otsikkojärjestys käytössäsi olevien otsikkotasojen avulla.

Suosituksia otsikkorakenteesta

Älä erota otsikoita sisällöstä visuaalisesti fonttikoon ja värin avulla. Käytä editorityökalun otsikkotasovaihtoehtoja.

Valitse ylimmän tason otsikoksi aina "Otsikko 1". Valitse "Otsikko 2" osien otsikoille, "Otsikko 3" alaotsikoille jne. Kappaleissa käytetään Normaali-tyyliä.

Jos olet päivittämässä asiakirjaa, käytä tekstinkäsittelyohjelman valmiita otsikkotyylejä.

Otsikkotyylit

Älä erota otsikoita sisällöstä visuaalisesti fonttikoon ja värin avulla. On tärkeää käyttää sisältöeditorityökalun otsikkotasoja tai asianmukaisia otsikkotunnisteita <h1>. Annetut otsikkotasot ja tunnisteet ovat tärkeitä, jotta näytönlukijoiden käyttäjä voi siirtyä sivulla.

Jos et pidä otsikon tyylistä, voit päivittää mallin.

Otsikkotyylit on usein määritelty sivuston tyylioppaassa, ja ne voivat liittyä brändäykseen. Tutustu sivuston tyylioppaaseen ennen kuin teet mitään muutoksia.