Teksti, taulukko ja lainaus

Teksti

Ohjeita tekstin muotoiluun

Teksti-elementillä pystyy muotoilemaan tekstisisältöä, sekä määrittelemään esimerkiksi tekstisisällön otsikkoja.

• Käytä korostusta vain tilanteissa, kun haluat oikeasti kiinnittää lukijan huomion. 
• Älä käytä kursivointia. Se on vaikealukuista huononäköisille. 
• Tekstin tasaus on aina vasempaan reunaan.
• Tee linkit erillisellä linkki-elementillä. Voit lisätä tekstikappaleen alle linkin tai tiedostolinkin editorissa. 

Listoilla pystyy helpottamaan tekstin luettavuutta. Ison tekstikappaleen sijaan asiat ovat helpommin omaksuttavissa listamuodossa. Listan voit tehdä numeroimattomana (pallot) tai numeroilla. Numeroitua listaa voit käyttää tilanteissa, joissa asiat etenevät järjestyksessä tai vaiheittain. 

1. Tämä on numeroidun listan kohta yksi
2. Tämä on numeroidun listan kohta kaksi

Kiinnitä huomiota siihen, että pidät listan eri kohdat samantyyppisinä. Pyri aloittamaan listan kohdat niin, että tärkein asia on aina ensimmäisenä. Pidä listan kohdat lyhyinä, maksimissaan 1-2 virkkeen pituisina. 

Erikielisen tekstin merkitseminen

Jos tekstissä on erikielisiä sanoja kuin sivun pääkieli on, ne tulee merkitä manuaalisesti tekstieditorin kieli-toiminnolla. Tämä tehdään sitä varten, että ruudunlukija osaa lukea sanat oikein. Esimerkiksi englanninkieliset sanat suomenkielisessä tekstissä. Huomioithan myös käännökset. 

Otsikot tekstissä

Huolehdi siitä, että sivun otsikot noudattavat hierarkiaa ylhäältä alaspäin. Sivun pääotsikko on tasolla H1, joten kaikki sen alla olevat otsikot ovat aina tasoa H2 (Otsikko 2). Näiden otsikoiden alla olevat otsikot taas ovat tasoa H3 (Otsikko 3) ja niin edelleen. Et voi siis laittaa H2-tason otsikon alle suoraan H4-tason otsikkoa. 

Älä käytä otsikoita tekstin visuaaliseen muotoiluun. Otsikot näkyvät aina sivun sivurakenteessa, jolloin esimerkiksi ruudunlukijakäyttäjä liikkuu sisältöjen välissä puhtaasti niiden avulla. 

Taulukko

Taulukko lisätään sivuille tekstielementin kautta, ja sitä voidaan käyttää osana tekstisisältöä. Taulukko tukee käyttäjän tiedon hahmottamista nopeasti, kunhan sen rakenne on yksinkertainen, selkeä ja saavutettava kaikilla päätelaitteilla.  

Taulukolla voi olla sekä sarake- että riviotsikot, jotka näkyvät sinisellä pohjavärillä. Koko taulukolle lisätään myös oma otsikkonsa. Jos taulukko ylittää näytettävän alueen leveyden, esimerkiksi pienillä näytöillä, näytetään vaakasuuntainen skrollaus taulukon ylä- ja alapuolella. 

Taulukon sisällössä ei käytetä tekstimuotoiluja, kuten otsikoita tai lihavointeja. Taulukon kaikki tekstit merkitään kappale-tyylillä. 

Esimerkki taulukosta

Mihin taulukko sopii?

• Käytä taulukkoa, kun tieto on luonteeltaan taulukkomuotoista. Erityisesti numeerinen tieto voidaan jäsentää taulukossa ymmärrettävästi. 
• Taulukko sopii myös keskenään vertailtavien tietojen esittämiseen. 
• Saavutettavuuden takia taulukoille tulee aina luoda otsikko. 
• Aseta numerot solujen oikeaan reunaan ja tekstit vasempaan reunaan.
• Pidä taulukon rakenne yksinkertaisena ja helposti hahmotettavana. Vältä monimutkaisia rakenteita ja laajoja taulukoita verkkosisällöissä.

Mihin taulukko ei sovi?

• Älä käytä taulukkoa, jos siinä esitettävä tieto ei ole soveliasta taulukkoon. Jos tietoa ei ole välttämätöntä vertailla rinnakkain, listat tai otsikoidut osiot toimivat taulukkoa paremmin.
• Vältä käyttämästä taulukkoa vain ulkoasun vuoksi. Jos tavoitteena on vain tietty visuaalinen asettelu, kannattaa hyödyntää muita tarjolla olevia elementtejä. 
• Pilko sisältö useammaksi taulukoksi, jos rakenne käy monimutkaiseksi tai sisältöä on paljon. Tämä helpottaa lukemista ja tekee taulukosta mobiiliystävällisemmän.
• Käytä taulukon otsikkotyylejä sarake- ja riviotsikoille - pelkkä lihavointi ei riitä. Otsikkotyylit varmistavat saavutettavuuden ja sen, että ruudunlukijat tunnistavat otsikot oikein.
• Vältä taulukoiden esittämistä muiden elementtien sisällä pienellä sisältöauleella. Taulukot toimivat parhaiten, kun niille on riittävästi tilaa. Kapeilla näytöillä taulukon vaakasuuntainen venytys ja moninkertainen skrollaus heikentävät käyttökokemusta, erityisesti mobiilissa.

Tarkempia ohjeita taulukon käyttöön

Taulukoiden käytössä on kiinnitettävä erityistä huomiota saavutettavuuteen ja yleiseen käytettävyyteen. 

• Taulukon otsikko toimii ruudunlukijaohjelmistolle taulukon selitetekstinä. Otsikoi taulukko siis ajatuksella. 
• Ruudunlukuohjelmat tulkitsevat sisältöä vasemmalta oikealle ja ylhäältä alas. Huomioithan tämän suunnitellessasi taulukkoa. Jos taulukko ei ole säännöllinen, siirtymien logiikka katkeaa.
• Tee mieluummin useampi pienempi taulukko, kuin yksi jättimäinen taulukko. Taulukot ovat vaikealukuisia mobiililaitteilla.  

Lainaus

Tämä on esimerkki lainauksesta.

Henkilö X

Mihin lainaus sopii?

Lainaus on nimensä mukaisesti lainaus. Elementtiä käytetään kertomaan, mitä joku henkilö on sanonut, asiayhteyteen viitaten. Yleensä lainattu teksti viestii jotain, mitä halutaan erityisesti korostaa sisällön sanomana. 

Lainaus-elementti sopii parhaiten uutisiin ja muihin ajankohtaissisältöihin, ei ohjeisiin. 

Mihin lainaus ei sovi? 

Älä käytä lainaus-elementtiä muuhun kuin lainauksen esittämiseen. Muut korostustarpeet voidaan esittää esimerkiksi laatikolla tai kuvallisella nostolla.