Saavutettavuus

Vaatimukset

Kela Design System on suunniteltu tukemaan saavutettavien verkkopalveluiden rakentamista. Esimerkiksi komponenteissa saavutettavuus on valmiiksi huomioitu.

Yksittäiset käyttöliittymäkomponentit eivät kuitenkaan vielä sinällään takaa niillä toteutetun käyttöliittymän saavutettavuutta. Palvelua tulee aina arvioida kokonaisuutena.

Saavutettavuuden varmistaminen on jokaisen palvelun suunnitteluun ja toteutukseen osallistuvan asiantuntijan vastuulla.

Saavutettavan suunnittelun periaatteet

Ohessa lyhyt esittely saavutettavuusvaatimuksista Kelan ja Kannan verkkopalveluiden kehittämisen näkökulmasta.

Havaittava

Tee sisällöstä sellaista, että se on helppo havaita.

• Varmista, että sisällöt ovat havaittavissa myös aistirajoitteista (esim. näköön ja kuuloon liittyvät) huolimatta.
• Käytä väreissä riittäviä kontrasteja, jotta kuvat ja tekstit erottuvat taustasta.
• Varmista sisältöjen toimivuus myös niissä tapauksissa, kun tekstiä suurennetaan 200 prosenttia.
• Esitä kaikelle ei-tekstuaaliselle sisällölle tekstivastineet.
• Varmista sisältöjen oikea lukemisjärjestys myös ruudunlukuohjelmistolla.
• Välitä informaatio myös muilla keinoin, kuin värillä tai muodolla.
• Asettele sivun sisällöt riittävän väljästi, jotta sisältöä on helppo lukea ja silmäillä.
• Luo otsikoille selkeä hierarkia ja järjestys (H1, H2 jne)

Hallittava

Tee sisällöstä sellaista, että sitä on helppo käyttää.

• Panosta selkeään navigointiin esimerkiksi nimeämällä linkit kuvaavasti ja varmistamalla sivun oikea navigointijärjestys.
• Tarjoa useampi tapa liikkua sivustolla (esimerkiksi navigaation lisäksi hakukenttä).
• Varmista, että näppäimistön fokus ei milloinkaan lukitu tiettyyn elementtiin tai alueeseen, vaan sen saa siirrettyä siitä myös pois.
• Lisää jokaiselle sivulle Siirry sisältöön –linkki, joka on käytettävissä myös näppäimistöllä.
• Aseta selaimen kohdistus aina sivun alkuun.
• Vältä aikarajoitettuja toimintoja. Jos toiminnossa on oltava aikarajoite, varmista, että asiakas pystyy tarvittaessa jatkamaan aikaa.
• Näytä asiakkaalle, missä elementissä näppäimistön fokus kulloinkin on.
• Varmista, että palvelun toiminnallisuudet ovat käytettävissä ilman monimutkaisia fyysisiä eleitä, kuten pyyhkäisyt tai usean sormen käyttöön perustuvat liikkeet.

Ymmärrettävä

Tee sisällöstä sellaista, että se on helppo ymmärtää.

• Käytä asiakkaalle tuttua kieltä ja termejä.
• Kirjoita sisällöt niin, että niiden ymmärtäminen ei vaadi taustamateriaalien lukemista tai muuta perehtymistä.
• Varmista, että myös palvelun käyttäminen on helposti ymmärrettävissä.
• Tarjoa asiakkaalle riittävästi ohjeisustusta. Huomioi, että tarjotut ohjeet jaksetaan lukea ja että ne ovat omaksuttavissa.
• Käytä otsikoissa, linkeissä ja lomake-elementeissä selkeitä ja kuvaavia tekstejä ja ohjeita.
• Nimeä käyttöliittymän komponentit niin, että ne ohjaavat syöttämään oikeanlaista tietoa.

Toimintavarma

Tee sisällöstä sellaista, että se toimii eri laitteilla ja apuvälineillä.

• Varmista toteutuksen hyvä tekninen laatu.
• Varmista toimivuus erilaisissa tietokoneissa, eri selaimilla ja eri käyttöjärjestelmillä.
• Suunnittele käyttöliittymä siten, että se toimii eri kokoisilla päätelaitteilla ja laitteiden pysty- ja vaaka-asennoissa.
• Huolehdi, että palvelua pystyy käyttämään sekä hiiri- että näppäimistöohjauksella.
• Varmista, että palvelu toimii myös erilaisilla avustavilla teknologioilla, kuten ruudunlukuohjelmilla.

Sivun vaihtaminen yhden sivun sovelluksissa

Perinteisiä verkkosivuja selatessa ruudunlukijan käyttäjä saa palautetta sivun vaihtumisesta. Ruudunlukija kertoo sivulatauksen yhteydessä sivun title-metadatan ja näppäimistön kohdistus palautuu HTML-dokumentin alkuun.

Yhden sivun sovellukset (Single-Page App, SPA) on toimintaperiaatteeltaan erilainen. SPA-sovellus päivittää vain muuttuneet sisällöt, tekemättä varsinaista sivunvaihtoa. Sivulta toiselle navigoitaessa koko sivua ei siis ladata uudestaan palvelimelta, eikä ruudunlukijan käyttäjä saa palautetta sivun vaihtumisesta.

SPA-sovelluksen sivulatauksen yhteydessä sovelluksen pitää itse luoda käyttäjien odottama palaute sivun vaihdoksesta. Noudata seuraavaa perusperiaatetta, kun SPA-sovelluksessa navigoidaan sivulta toiselle.

• Päivitä HTML-dokumentin title-metadataan sijaintia kuvaavaa polku, esim. “Opiskelijat - Kela”.
• Päivitä selaimen osoiterivi ja historia, jotta selaimen eteen/taaksepäin-ominaisuus toimii luotettavasti.
• Siirrä kohdistus sivun alkuun sille varattuun elementtiin tai sivun pääotsikkoon.
  • Päivitä elementtiin aina näytettävän sivun title.
  • Siirrä kohdistus tekstipäivityksen jälkeen elementtiin aina, kun käyttäjä navigoi sivulta toiselle.
  • Ruudunlukija lukee kohdistettaessa elementin sisällön ja asiakas saa tiedon sijainnistaan palvelussa.
  • Vaihtoehtoisesti sivun voi ilmoittaa aria-live-attribuutin avulla, sivun vaihtumisen jälkeen.
• Lisää sivun alkuun hyppylinkki, jonka avulla näppäimistön käyttäjä voi hypätä suoraan sivun pääsisältöön.

Kohdistuksen palautuksesta sivun alkuun voi poiketa joissakin erikoistapauksissa, mutta sen saavutettavuus ja käytettävyys on hyvä varmistaa.

Kohdistuksen siirtäminen

Interaktiivisiin HTML-elementteihin, kuten painikkeisiin ja linkkeihin, voi kohdistaa ref-objektin kautta löytyvällä focus-funktiolla. Jos elementti ei ole interaktiivinen, tulee sille ensin lisätä tabindex="-1"-attribuutti, jotta kohdistus onnistuu.

Ei-interaktiivisten elementtien kohdistukseen voi hyödyntää useNonInteractiveFocus-hookia.