Icons (Ikonit)
Ikonit ovat visuaalisia symboleja, jotka tukevat toimintojen ja aiheiden ilmaisemista. Ikonien avulla käyttäjän huomiota voidaan kiinnittää haluttuun informaatioon tai toimintoon. Ikonien käyttäminen voi myös parantaa laajojen sisältöjen hahmottamista ja ryhmittämistä. Suomi.fi-teemassa on sekä käyttöliittymäikoneita että kuvitusikoneita.
Katso kaikki Suomi.fi-ikonitSaavutettavuus ja käytettävyys
- Jos ikoni on informatiivinen tai toiminnallinen, kuvalle on luotava tekstivastine käyttämällä WAI-ARIA-määritettä "aria-label" tai "aria-labelledby".
- Jos ikoni on tarkoitettu vain visuaaliseksi tehosteeksi, käytetään sitä varten WAI-ARIA-määritettä role='presentation' (ei role='img'). Tällöin avustavat tekniikat ohittavat kuvan.
- Kuvitusikonien käytössä tulee huomioida ikonille looginen käyttötarkoitus. Jos ikoni on ristiriidassa sisällön kanssa, tämä voi heikentää käytettävyyttä ja kognitiivista saavutettavuutta.
- Ikonit ovat harvoin yksiselitteisiä kaikille käyttäjille. Ikoni esitetään siksi yleensä tekstin kanssa, jolloin käyttäjän ymmärrys ei jää pelkän ikonin varaan. Poikkeuksena info-ikoni, jonka käyttö on yleisesti vakiintunut.
Koko ja käyttö
Jos ikoneita käytetään tekstin yhteydessä, tekstin koko määrittelee ikonin koon.
Perusikonit
Perusikonien oletusväri on harmaa (depthDark1). Jos ikonissa on mukana jokin toiminto, siinä käytetään sinistä väriä (highlightBase) klikattavuuden indikoimiseksi. Notifikaatioikoneissa käytetään liikennevalovärejä (successBase, warningBase, alertBase) sekä sinistä korosteväriä (accentSecondaryBase). Huomaa, että värit ovat ikoneissa ainoastaan hahmottamisen tukena. Pelkkä visuaalinen korostus ei ole saavutettavuuskriteereiden mukainen riittävä toiminnan kuvaustapa. Jos muokkaat ikonien värityksiä, on hyvä valita toimintaa kuvaaville ikoneille muista ikoneista erottuva sävy.
Ohjeikoni
Ohjeet ovat esim. käyttöliittymässä näytettäviä kontekstiohjeita, joita käyttäjä tarvitsee tietääkseen mitä tehdä tai miten toimia. Ikonin taakse piilotettujen ohjeiden lukeminen ei ole milloinkaan välttämätöntä. Suomi.fi-teemassa ohjeikoni on sininen (highlightBase) ja tummalla taustalla käytetään valkoista (whiteBase) ikonia. Ohjeikonista on Suomi.fi-teemassa kaksi erillistä versiota, täytetty versio sekä ääriviivaversio. Täytettyä ohjeikonia käytetään silloin, kun sitä klikkaamalla käyttäjälle aukeaa/tarjotaan lisää ohjeistusta. Ääriviivaversiota ohjeikonista käytetään visuaalisena tukena. Ohjeikonilla ei ole selittävää tekstiä, koska teksti häiritsisi varsinaisen sisällön lukemista. Ohjeikoni on ikoneista helpoiten ymmärrettävä, ja siksi se toimii myös ilman selittävää tekstiä.
Lisätietoikoni
Lisätieto on asiaa, jonka käyttäjän täytyy lukea ja ymmärtää toimiakseen oikein. Lisätietoikoni on huomioarvoltaan suurempi kuin ohjeikoni. Tummalla pohjalla käytetään valkoista (whiteBase) ikonia. Lisätietoikonista on Suomi.fi-teemassa kaksi erillistä versiota, täytetty sekä ääriviivaversio. Täytettyä lisätietoikonia käytetään silloin, kun sitä klikkaamalla käyttäjälle aukeaa lisätietoa. Ääriviivaversio lisätietoikonista käytetään visuaalisena tukena esimerkiksi modaaleissa.
Kuvitusikonit
Kuvitusikonit kuvaavat sisällössä esitettäviä elämäntilanteita ja aihealueita. Ikoneissa käytetyt värit ovat vaaleanharmaa (depthBase) ja oranssi (accentBase). Myös kuvitusikonit pyritään pitämään yksinkertaisina, jotta vältyttäisiin luomasta ylimääräistä kognitiivista rasitetta. Suomi.fi-palveluissa jokaisella kuvitusikonilla on teema, joka antaa osviittaa käyttötarkoituksesta.
Liitetiedostoikonit
Viittomakielipalvelut
Suomi.fi-verkkopalveluissa käytetään Kuurojen liiton viittomakielen palveluiden symbolia.