Hello there. I'm this guy and this is my home page. Below are all blog posts I have written since 2007. Some of them are silly, but self-censorship would be worse I guess.
Blog Posts
-
Esimerkkejä syötekentän saavutettavuudesta
Verkkosivujen saavutettavuus voi tuntua vähän hähmäiseltä käsitteeltä. Mitä kaikkea siihen kuuluu? Mitä pitää oikeasti tehdä että on saavutettava?
Kirjoitin tämän artikkelin näyttääkseni muutaman esimerkin, miten saavutettavuutta voi huomioida yksittäisen syötekentän suunnittelussa ja toteutuksessa. Syötekentät eli
<input>-elementit ovat verkkolomakkeiden peruskauraa. Miten vaikeaa niistä on tehdä saavutettavia?Huom: Tämä ei ole varsinaisesti opas siihen, mitä saavutettavuus ylätasolla on – muut tekevät sen paremmin.
Nopea kertaus saavutettavuuden määritelmästä
Saavutettavuus tosi lyhyesti:
Saavutettavuus tarkoittaa sitä, että mahdollisimman moni erilainen ihminen voi käyttää verkkosivuja ja mobiilisovelluksia mahdollisimman helposti. Saavutettavuus on ihmisten erilaisuuden ja moninaisuuden huomiointia verkkosivujen ja mobiilisovelluksien suunnittelussa ja toteutuksessa.
– saavutettavuusvaatimukset.fiSaavutettavuutta lähestytään usein henkilöiden rajoitteiden kautta. Esimerkiksi värisokean ihmisen on pystyttävä erottamaan eri toimintojen tarkoitus, jolloin eroa ei voi kommunikoida pelkällä värillä. Sokean ihmisen pitää pystyä käyttämään verkkosivuja ruudunlukijalla.
Mutta rajoite voi olla myös väliaikainen ja huomattavasti yleisempi. Esimerkiksi verkkolomakkeen täyttäminen vauva sylissä, tai vaikka vain väsyneenä on vaikeampaa kuin “optimiolosuhteissa”. Kaikki ihmiset hyötyvät, jos lomakkeen kognitiivista kuormaa pienennetään, eli suomeksi täyttäminen ei vaadi niin paljon ajattelua.
Taustaa
Olen töissä vakuutusyhtiössä, jota koskevat tiukennetut saavutettavuusvaatimukset. Ihmisten on pakko ostaa liikennevakuutus ajaakseen moottoriajoneuvolla, joten vakuutusverkkokaupan pitää olla saavutettava.
Käytännössä teimme verkkopalvelumme saavutettavuuteen yhden isomman korjauskierroksen ennen vaatimusten voimaanastumista. Mutta itsekkäästi yritämme myös jatkuvasti tehdä vakuutusten ostamisesta helpompaa, koska se lisää myyntiä.
Tässä artikkelissa tarkastellaan POP Vakuutuksen ajoneuvovakuutuksen ostopolulta löytyvää henkilötunnuksen syötekenttää. Kyseinen kenttä voi muuttua jatkossa, mutta tässä on tähän mennessä syntyneitä huomioita.
Hypätään matkaan!
Haluttu syötteen muoto placeholderissa
Henkilötunnus on useimmille tuttu konsepti, mutta joskus henkilötunnus menee sekaisin syntymäajan kanssa, tai ihmiselle ei heti muistu mieleen mistä tunnuksesta puhutaan. (Olemme törmänneet tähän ihan oikeasti!)
Syötekentässä on muistutuksena haluttu muoto vastaukselle, eli niin sanottu placeholder: ppkkvv-XXXX.
Placeholder-teksti on hieman hailakka harmaa. Luettavuuden kannalta tekstin ja taustan välinen kontrasti pitäisi olla isompi, mutta toisaalta liian tumma teksti antaa vaikutelman siitä, että kentässä on jo vastaus. Tämä voi johtaa siihen, että asiakas ei itse kirjoita vastausta, eikä siksi pääse etenemään ostossa.
Placeholder koko ajan näkyvillä
Placeholder-tekstien ongelmana on, että ne katoavat kun kenttään alkaa kirjoittamaan tekstiä. Asiakkaan pitäisi vastausta kirjoittaessaan muistaa mitä placeholderissa luki, mikä ei yleisesti ottaen ole mahdotonta, mutta voi olla haastavaa.
Tämä on meillä ratkaistu niin, että kun kenttä on kohdistettuna (focus), siirtyy kentän placeholder kentän nimen perään. Tällä tavalla haluttu muoto säilyy näkyvillä koko ajan, eikä sitä tarvitse muistaa:
Haluttu syötteen muoto siirtyy kentän nimen perään kentän ollessa kohdistettu Kohdistuksen näyttäminen
Kohdistin kentän sisällä. Kohdistin on siirretty kenttään tab-näppäimellä. Lomaketta täyttäessä on tärkeä tietää mihin kenttään on kirjoittamassa tekstiä. Ohut tekstikohdistin voi olla vaikea huomata (varsinkin näkörajoiteisella) tai huomion herpaantuessa. Selain näyttää kohdistetun kentän ympärillä oletusarvoisesti sinisen ääriviivan, mikä toimi huonosti meidän sinisen taustavärin kanssa.
Päädyimme designerin kanssa käyttämään keltaista ääriviivaa. Ääriviiva on paksumpi jos kenttään siirtyy näppäimistöllä. Tässä oli ajatuksena, että klikatessaan kenttää hiirellä asiakas on paremmin tietoinen missä kohdistin menee.
Pelkällä näppäimistöllä navigoidessa on lähtökohtaisesti vaikeampi seurata mihin kohdistin seuraavaksi hyppää. Paksu ääriviiva näyttää selvästi missä kohdistin on. (Paksumpi ääriviiva oli ehkä designerin mielestä liikaa käytettäväksi koko ajan ja sen takia vain näppäimistökäytössä? – en muista.)
Myös kaikki ohjetekstit ovat avattavissa näppäimistöllä:
Ohjetekstin näyttävä kysymysmerkki kohdistettuna näppäimistöllä Virhetilanteet
Asiakkaan antaessa virheellisen syötteen näytetään kentän ympärillä punainen ääriviiva ja kentän alapuolella virheviesti. Virhe näytetään vasta kun kohdistin siirretään pois kentästä, jotta asiakas voi rauhassa muokata henkilötunnusta ilman virheen välkkymistä.
Virheellinen vastaus Virheviestistä on yritetty tehdä tarpeeksi näkyvä, jotta asiakas huomaisi virhetilanteen. Mobiililaitteilla selain vierittää automaattisesti ensimmäiseen virheelliseen kenttään, jos asiakas yrittää jatkaa ostossa eteenpäin virheellisin tiedoin.
Virheviestissä lukee aina mistä tiedosta on kyse eikä esimerkiksi “Tarkista tieto”. Jos mahdollista, yritetään käyttää tarkkaa virheilmoitusta, esimerkiksi alaikäiselle vakuutuksenottajalle kerrotaan tarkemmin miksi annettu henkilötunnus ei kelpaa:
Alaikäinen vakuutuksenottaja saa oman virheviestin Virheviestejä voisi meilläkin vielä parantaa, esimerkiksi henkilötunnuksen tapauksessa voisi kertoa onko virhe henkilötunnuksen päivämäärässä vai loppuosassa.
Ruudunlukijavastine placeholderille
Ruudunlukijavastineella tarkoitetaan ruudunlukijan lukemaa käyttöliittymätekstiä. Tietyissä tilanteissa pelkkä ruudulla näkyvä teksti ei auta ruudunlukijan lukemana, vaan ruudunlukijalle pitää välittää ruudulla näkyvä informaatio eri tavalla.
Esimerkiksi ruudulla voi nähdä helposti, että tietyt napit muodostavat nappiryhmän, mutta ruudunlukijalle suhde pitää kuvailla kertomalla mihin asiaan tietty nappi liittyy.
Henkilötunnuskentän placeholderin tapauksessa pelkät kirjaimet ppkkvv… eivät kuulosta järkevältä ruudunlukijan lukemana. Siksi ruudunlukijalle välitetään syötteen muoto auki kirjoitettuna:
ppkkvv merkitys välitettynä ruudunlukijalle Virheviestien välittäminen ruudunlukijalle
Ruudunlukijaa käyttävän asiakkaan on yhtä lailla saatava tietää, jos jonkun kentän sisältö on virheellinen. Myös ruudulla näkyvä virheviesti pitää kertoa ruudunlukijalle. Näihin on muutamia tapoja, mutta nyt mennään hieman teknisiin yksityiskohtiin.
Syötekenttä itsessään pitää merkitä koodissa virheelliseksi. Tämä tapahtuu kentän
invalidjaaria-invalid-attribuuteilla:<input invalid="true" aria-invalid="true" aria-describedby="root_ssn-error">Lisäksi kentässä on viittaus virheviestiin (
aria-describedby="root_ssn-error"). Tämä kertoo ruudunlukijalle, että kentän kuvaus löytyy elementistä<li id="root_ssn-error">, jolloin ruudunlukija lukee sieltä löytyvän virheviestin.Lisäksi itse virheviesti luodaan elementin sisälle, jolla on
aria-live-attribuutti. Tämä itsessään vinkkaa ruudunlukijan lukemaan virheviestin heti kun se ilmestyy ruudulle. (Tämä tosin toimii hieman vaihtelevasti eri ruudunlukuohjelmistoilla.)
Virheviesti `aria-live` elementin sisällä Näillä keinoin ruudunlukija lukee virheviestin heti kun se ilmestyy, ja joka kerta kun asiakas siirtyy virheelliseen syötekenttään.
Sekalaiset
Näiden mainittujen juttujen lisäksi on olemassa yleisempiä saavutettavuuskorjauksia, mitkä koskevat kaikkia kenttiä. Esimerkiksi tekstin värin pitää erottua taustasta, ja tekstien pitäisi olla luettavissa jos asiakas suurentaa tekstikokoa huomattavasti. Lomakkeen on oltava käytettävissä pelkällä näppäimistöllä, jne.
Lopuksi vielä humio, että osa tässä nostetuista esimerkeistä koskee vain nykyisin suosittuja “Single Page Application”-tyylisiä sivuja, joilla lomakkeen validointi tehdään ilman sivunlatausta. Selaimet osaavat aika hyvin itsekin hoitaa esimerkiksi virhetilanteiden esille nostamisen, mutta osan näistä joutuu tekemään itse saavutettavaksi, kun lomaketta validoidaan lennossa.
Toivottavasti nämä esimerkit auttavat hahmottamaan miten saavutettavuutta voi parantaa!
-
Useful Git options
Here are two articles about useful Git options that most people should probably use:
-
Popular Git options by Julia Evans. This came out already a year ago but I was “too busy” to read it then.
-
How Core Git Developers Configure Git by Scott Chacon.
These two lists are largely overlapping but Julia’s has a grab bag of smaller, yet useful options. I like Scott’s categorization of options, including options that “Clearly Makes Git Better”:
This first group of settings clearly makes Git better by default. There are generally zero downsides to enabling any of them.
-
-
R.I.P. Back to Work
Being so far Back to Work podcast ending in April 2024.
This was one of those podcasts where the hosts felt like your friends because I listened to them speak for 13 years. I have very specific memories of the show tied to certain locations. It also did help me do better work.
So I’m sad it’s not there anymore, but nothing really is permanent. I’m also very thankful this “pound sign productivity” podcast existed.
-
Projekti-ideoita
Muutamia projekti-ideoita mitä pyörii päässä →
-
TV Series Costs Are Bananas
This tidbit about Apple TV+'s ‘Severance’ caught my eye: From Hollywood Reporter (via MacRumors): →
-
Hacker News Bots
In 2011 I created a few Twitter bots that would find posts from Hacker News and post them to Twitter. The bots would only post links that had over 200, 250, or 500 points, so that you could follow the bot and only see the good (most upvoted) stuf... →
-
Everyday Carry
I discovered “Slash Pages” somewhere and while I don’t think these are very discoverable, some of them are good writing prompts.
I started by documenting what I
/carryeveryday.
-
Simulennon Airbus A321 -simulaattori
-
There are no simple videos
I sometimes watch train videos on YouTube. They seem simple: strap a camera in front of a train and shoot the train running its route. For example: →
-
Storytel Readerin korvaaminen Onyx Boox tabletilla
Storytel-lukulaitteen valmistus on lopetettu, mutta sen voi korvata Onyx Boox-tabletilla →
-
Mastodon vs. Threads vs. Bluesky
Vikasietotila-podcastissa oli hyvä jakso Twitterin korvaajien eroista →
-
Youtube recommendations
Some youtube videos I've like recently →
-
Technical learnings from InfoToggle
Technical aspects of InfoToggle →
-
InfoToggle
I'm creating a SaaS called InfoToggle →
-
A Winter Mountain Bike
After some unfortunate bike-thieving-events half a year ago I was left with only one bike: a White road bike. It’s a good bike, I even scored a pair of carbon wheels for it. →
-
Stories about switching to Fuji
Some experiences from folks who’ve switched to from Nikon to Fuji systems, something I might be doing as well. Many of these talk about Fuji’s X-T1 which is the big brother of the X-T10 I’m interested in but also about the reasons for switching. →
-
Next camera: Nikon vs. Fujifilm
Buying a camera in 2016 is hard. What kind of camera should you buy? →
-
Most Popular Black Ops II Multiplayer Maps
Call of Duty: Black Ops II is a 2012 first-person shooter game for the previous generation consoles (PS3, Xbox 360, Wii U). While the game is a bit old, its multiplayer mode is still insanely popular. →