Ulkoasun tarkistuslista

Värit perustuvat Kela Design Systemissä määriteltyihin verkkoväreihin

Värejä on sovellettu visuaalisen ilmeen mukaisesti ja oikeassa suhteessa

Värit ovat loogisia ja ne välittävät oikean viestin – esim. kriittisissä ilmoituksissa sävy on varoittava, ei neutraali

Taustan ja eri elementtien väliset kontrastit ovat saavutettavia

Väriä ei ole käytetty ainoana keinona tiedon esittämiseen – tieto välittyy samassa yhteydessä myös muulla tavalla

Fontit, fonttikoot ja värit noudattavat Kelan verkkoilmettä

Rivinkorkeus ja kirjainvälistys on määritetty typografiaohjeen mukaan

Tekstin ja taustan välinen kontrastiero on saavutettava

Leipätekstin korostamiseen on käytetty ainoastaan lihavointia

Korostuksissa ei ole käytetty kursivointia, alleviivausta, huomioväriä tai poikkeavaa fonttityyliä

Tekstiä on korostettu vain tarpeellisissa kohdissa

Otsikoiden ja muun tekstin välillä on selkeä hierarkia

Otsikkotasoja (H1-H6) on sovellettu johdonmukaisesti ja oikeassa järjestyksessä

Pitkät tekstit on pilkottu pienempiin osiin esim. kappalejaoilla ja väliotsikoilla

Tekstit on tasattu samaan linjaan (yleensä vasemmasta reunasta)

Ylimääräiset sisennykset ja välit on poistettu

Tekstialueet eivät ole liian kapeita tai leveitä – tekstin rivikohtainen merkkimäärä on sopiva

Välistyksissä on pääsääntöisesti käytetty KDS:n vakioarvoja (8, 16, 24, 32, 48, 56 jne.)

Samaan ryhmään kuuluvat elementit ovat riittävän lähellä toisiaan

Eri ryhmään kuuluvien elementtien välillä on sopivasti etäisyyttä

Välistykset seuraavat yhtenäistä logiikkaa palvelun eri osissa

Sisällöt ja elementit on tasattu yhtenäisesti samaan linjaan tai palstaan

Elementtien visuaalinen hierarkia vastaa niiden todellista painoarvoa

Elementit on ryhmitelty selkeästi ja lukusuunta on looginen

Elementit ja niiden osat ovat oikean kokoisia

Sisältöjen järjestys on relevanttia

Sisältöä on helppo lukea ja silmäillä – asettelu on riittävän väljä

Layout on visuaalisesti tasapainoinen

Kokonaisvaikutelma on Kelan verkkoilmeen mukainen

Kuvakkeet perustuvat Kela Design Systemin kuvakekomponentteihin

Kuvakkeet ovat loogisesti valittuja ja ymmärrettäviä

Kuvakkeilla on yhtenäinen visuaalinen tyyli ja merkitys käyttöliittymän kaikissa eri osissa

Linkeissä ja painikkeissa on sovellettu tarkoituksenmukaisia kuvaketyyppejä

Toimintoja ja tietoja esittävien kuvakkeiden kontrasti on vähintään 3:1

Kuvakkeilla on tekstivastine (esim. otsikko, linkin kuvausteksti tai erillinen alt-teksti)

Valokuva- ja kuvitustyyli noudattaa visuaalista ilmettä

Kuvissa on käytetty Kelan tai Kannan omaa kuvamateriaalia (ei kuvapankkikuvia)

Kuvien käyttöön on lupa ja tekijänoikeudet on kunnossa

Linkkejä ja painikkeita on käytetty oikein

Sivun sisältöjen toiminta on tarkistettu eri kokoisilla näytöillä

Sivun sisältöjen toiminta on tarkistettu, kun käyttäjä muuttaa selaimen oletusfonttikokoa (huomioi, että kyseessä on eri asia kuin sivun zoomaaminen)

Käytetyt animaatiot saa käännettyä pois päältä (prefers-reduced-motion -media query)

Sivun HTML-rakenne on validoitu

Sivulta löytyy 'hyppää sisältöön' -linkki, joka toimii kaikilla sivuilla johdonmukaisesti

Palvelun käyttö on mahdollista pelkällä näppäimistöllä

Näppämistöllä navigointi etenee selkeässä ja loogisessa järjestyksessä

Toimintaa on testattu eri selaimilla

Toimintaa on testattu ruudunlukijalla

Käyttöliittymän ja komponenttien eri tilat on esitetty selkeästi (visuaalisesti ja ruudunlukijoille)

Olet esitellyt komponentin Käyttöliittymä-CoPissa ja tehnyt komponenttiin yhteisesti sovitut korjaukset tai muutokset

Hover, focus, active ja disabled -tilat

Palvelun ilmoitukset ja virhetilanteet

Värien käyttö

Fontit ja typografinen tyyli

Tekstin rakenne ja rytmi

Välistykset ja asettelu

Layout ja rakenne

Kuvakkeet ja ikonit

Kuvat ja kuvitus

Linkit ja painikkeet

Responsiivisuus

Animaatiot

Saavutettavuus

Käytettävyys