Link (Linkki)
Linkkiä käytetään pääsääntöisesti navigaatioelementtinä.
Saavutettavuus ja käytettävyys
- Linkin tulee olla kuvaava ja sen tarkoituksen ymmärrettävissä pelkästä linkin nimestä.
- Linkin nimen on hyvä vastata sen sivun otsikkoa, jonne linkki käyttäjän ohjaa.
- Vältä yleisluontoisia "Lue lisää"-tyyppisiä linkkejä. Jos linkki kuitenkin halutaan esittää yleisluontoisena, voidaan ruudunlukijaa varten lisätä Aria-teknologialla lisätieto kohdesivusta tyyliin: "Lue lisää aiheesta Vanhemmuuden tuki".
- Linkkityylin tulee olla yhtenäinen. Suomi.fi Design Systemissä päädyttiin kuitenkin selkeyden vuoksi esittämään leipätekstin ulkopuoliset linkit ilman alleviivausta, koska jokaisen kohdan alleviivaus teki listoista vaikealukuisia. Poikkeuksena tähän luetaan myös navigaatiot, joissa ei käytetä linkkityylejä.
- Yleensä heading-luokituksen mukainen otsikko ei ole linkki, vaan linkki esitetään erillisenä komponenttina. Poikkeuksena kuitenkin listaukset, jolloin linkin toistaminen jokaisen yksikön yhteydessä lisäisi listauksen pituutta.
- Vältä saman linkin toistumista näkymässä samalla tai eri nimellä.
- Mikäli linkki avaa tiedoston tai ohjaa käyttäjän pois sivustolta, täytyy tämän tiedon olla linkin yhteydessä sekä näkeville ja ruudunlukijakäyttäjille.
Mistä komponentti koostuu
Linkkien väri on Suomi.fi-teemassa on sininen (highlightBase). Jos linkki on estetty, käytetään harmaata (depthBase). Suomi.fi Design Systemissä linkit on esitetty ilman alleviivausta, mutta hover-tilassa (hiiren kohdistimen siirtämisessä painikkeen päälle) linkki on alleviivattu. Leipätekstin joukossa linkkitekstit alleviivataan, jotta ne erottuvat muusta tekstistä. Alleviivatut linkit ovat hover-tilassa ilman alleviivausta.
Vierailun jälkeisessä tilassa (visited state) linkin väri on violetti (accentTertiaryDark1). Tila indikoidaan kaikissa linkeissä lukuunottamatta päänavigaation linkkejä ja käänteisiä linkkejä. Huomioi, että jos muokkaat linkkien tilojen värejä, on hyvä valita värit, jotka erottuvat riittävästi toisistaan. Linkeissä ei ole välttämätöntä käyttää vierailun jälkeiselle tilalle eri väriä, mutta sen käytön on todettu parantavan huomattavasti tekstiä sisältävien näkymien luettavuutta. Lisäksi näin pystytään indikoimaan selkeämmin listanäkymissä käyttäjän jo vierailemat sivut.
Komponentin koko, käyttö ja variaatiot
Linkit eroavat painikkeista siinä, että ne eivät muokkaa tietoa tai käynnistä toimintoa. Linkit vievät käyttäjän uuteen paikkaan käyttöliittymässä tai kokonaan pois sivustolta (External Link).
Komponentti käyttöliittymässä
Suomi.fi-palveluissa käytetään eri käyttötarkoituksiin erilaisia variaatioita linkistä.
Linkki (Link)
Kirjasinkoko ja leikkaus on tasapainossa muun sisällön kanssa.
Ulkoinen linkki (External link)
Ulkoiset linkit ovat linkkejä, jotka ohjaavat käyttäjän pois sivustolta. Ulkoiset linkit avataan uuteen välilehteen/ikkunaan. Linkeissä käytetään aina ulkoisen linkin symboloivaa ikonia sekä ruudunlukijakäyttäjille myös sanallista tietoa "Avautuu uuteen ikkunaan".