LinkWithInfo
Komponentti linkin ja siihen liittyvän lisätiedon näyttämiseen.
Julkaistu versiossa 6.3.0
Esikatselu
Käyttötarkoitus
Käytä komponenttia linkin yhteydessä näytettävän lisätiedon tai lyhyen yhteenvedon esittämiseen. Älä lisää linkin alle lisätietoa erillisenä leipätekstikappaleena, vaan käytä tätä komponenttia, jolla lisätiedot näytetään osana linkkiä.
Lisätietoteksti auttaa käyttäjää arvioimaan, tarjoaako linkki häntä kiinnostavaa tietoa.
Komponentti toimii erityisen hyvin erilaisissa listauksissa. Lisätietotekstien avulla käyttäjän on helppo vertailla linkkilistan eri vaihtoehtoja ja valita näistä sopivimmat sisällöt. Lisätietoteksti voi myös houkutella käyttäjää siirtymään sisältöön esimerkiksi uutis- tai ajankohtaislistauksissa.
Vaikka linkki toimii visuaalisena otsikkona lisätietotekstille, komponentti on kuitenkin linkki eikä otsikko.
Komponenttiin voi yhdistää myös kuvitusikonin, jolloin linkki saa suuremman visuaalisen painoarvon.
Tee näin
- Kirjoita linkkiteksti otsikkomaiseksi ja mahdollisimman lyhyeksi.
- Kirjoita linkin lisätietoihin tiivis yhteenveto, joka auttaa käyttäjää arvioimaan linkin hyödyllisyyttä.
Älä tee näin
- Älä käytä tätä komponenttia, jos käyttäjälle ei ole lisätiedoista todellista hyötyä.
Saavutettavuus
Koko komponentin alue on klikattavaa, joten käyttäjän ei tarvitse osua juuri linkin otsikkoon saadakseen linkin valittua.
Ruudunlukija lukee linkin yhteydessä myös sille annetun yhteenvetotekstin. Tekstin tulee siis olla tiivis mutta sisältöä hyvin kuvaava.
Jos linkki avautuu uuteen välilehteen, tulee käyttää newTabLabel-proppia joka välittää tiedon linkin avautumisesta uuteen välilehteen ruudunlukijalle.
Tavallinen linkki lisätiedolla
Linkin yhteydessä käytetään siirtymistä kuvaavaa kuvaketta (nuoli tai “avaa uuteen välilehteen” -kuvake).
Lisätietotekstin luettavuutta voi parantaa esittämällä tekstin erillisissä kappaleissa. Pyri kuitenkin käyttämään ensisijaisesti tiivistä kuvausta, johon kappalejakoja ei tarvita.
Lisätiedollisia linkkejä voi koota listaksi käyttämällä List-komponenttia. Nimeä linkit samankaltaisesti.
Listan voi tarvittaessa otsikoida.
Korostettu linkki lisätiedolla
Korostettu linkki sopii esimerkiksi käyttäjän kannalta tärkeiden palveluiden tai toimintojen kuvaamiseen.
Korostetussa linkissä on aina kuvitusikoni. Käytä ikonia vain jos kyseiselle toiminnolle tai palvelulle on olemassa vakiintunut tai muutoin ymmärrettävä ikoni.
Lisätiedollisia linkkejä voi koota listaksi käyttämällä List-komponenttia. Nimeä linkit samankaltaisesti.
Listan voi tarvittaessa otsikoida.