Keskiviikkona, 17.2.2016

Kooste JyvĂ€skylĂ€n WordPress-miitistĂ€ 16.2.2016 – aiheena esteettömyys

Eilen tiistaina 16.2.2016 jÀrjestettiin JyvÀskylÀn jÀrjestyksessÀÀn viides WordPress-tapaaminen, jossa Sami Keijonen puhui vÀhÀn puhutusta aiheesta, eli verkkosivujen esteettömyydestÀ. Erityisesti aiheena oli valikkorakenteet, vaikka sivuttiin muitakin esteettömyyden osa-alueita. Miitti oli erityisen hyödyllinen, sillÀ se muistutti esteettömyyden tÀrkeydestÀ ja antoi vinkkejÀ omien WordPress-teemojen jatkokehitykseen.

MiitissÀ oli tÀllÀ kertaa ennÀtysmÀÀrin porukkaa, myös Tampereelta ja HelsingistÀ asti. TÀssÀ pikaiset keihÀÀnkÀrjet, jotka poimin miitistÀ itselleni ylös muistiin.

1. Sivuston pitĂ€isi toimia ”kaikissa” laitteissa

Jokainen web-kehittÀjÀ tietÀÀ ettÀ varsinkin monimutkaisemman sivuston 100% toimivuus kaikilla laitteilla ja ympÀristöillÀ on silkka mahdottomuus. On kuitenkin hyvÀ pyrkiÀ siihen, ettÀ sivusto toimisi mahdollisimman monella, vaikka siten ettÀ tekee kompromisseja esim. jossakin kikkareissa tai valikoissa.

2. Napin ja linkin ero

NykyÀÀn on hyvin yleistĂ€ tuunata linkit napeiksi ja se onkin erittĂ€in hyvĂ€ksyttĂ€vÀÀ silloin kun ”nappi” vie jonnekin. Valikoissa ja muissa toimintokehotteissa pitĂ€isi kuitenkin kĂ€yttÀÀ <button>-elementtiĂ€, silloin kun nappi tekee jotakin.

3. Anna kÀyttÀjÀlle vapaus valita

Valikon pitÀisi aueta vain silloin kun kÀyttÀjÀ haluaa avata sen. TyypillistÀ on suunnitella alaspudotusvalikot siten, ettÀ ne aukeavat hiiren sen pÀÀlle vietÀessÀ, jolloin useimmissa tapauksissa valikko aukeaa sokealle heti valikkoon kohdistettaessa.

4. KÀytÀ screen-reader-text .classia

Ruudunlukulaitteille .screen-reader-text class on tĂ€rkeÀÀ, esim. ”Lue lisÀÀ” -linkit ilman sitĂ€ eivĂ€t kerro mitÀÀn, kun taas Lue lisÀÀ<span class="screen-reader-text"> artikkelista Artikkelinimi&lt/span&gt kertoo huomattavasti enemmĂ€n.

5. SÀilytÀ fokus

Jos valikko aukeaa sivulta tai koko ruudulle, on fokuksen sÀilyttÀvÀ valikon sisÀllÀ sen ajan kun valikko on auki. Kokoruudun valikoissa fokuksen ei pitÀisi karata valikon ulkopuolelle sivuston osiin, jotka eivÀt ole sillÀ hetkellÀ nÀkyvissÀ.

6. Testaa oikeilla ihmisillÀ

Parasta on pyytÀÀ ruudunlukulaitetta kÀyttÀvÀÀ henkilöÀ tai sokeaa testaamaan saitti lÀpi, siitÀ tietÀÀ ettÀ on varmasti tarvittavat asiat kunnossa. LisÀksi hyvÀ ja helppo tapa testata sivustonsa on TAB, SHIFT+TAB ja ENTER nÀppÀimet. Jos selaaminen nÀiden avulla toimii ilman pomppimista ja fokuksen kadottamista, olet jo oikeilla jÀljillÀ.

Loppusanat

Muistan ensimmÀistÀ kertaa keskittyneeni esteettömyyteen aikoinaan kun tableista siirryttiin diveihin. VielÀ tuolloin pojankloppina keskittyi enemmÀn siihen miltÀ kaikki nÀytti kuin miten sivusto oli koodattu. ErÀÀnÀ pÀivÀnÀ sain palautetta sokealta selaajalta, joka ihmetteli kun sivuston otsikkoja ei pystynyt plÀrÀÀmÀÀn lÀpi. HÀn antoi vinkkejÀ otsikkotagien kÀytöstÀ ja tajusin miten tÀrkeÀÀ on ettÀ elementit koodissa kertovat sokealle missÀ on mitÀkin.

EsteettömyyttĂ€ ajatellaan verkkosivuston suunnittelussa aivan liian vĂ€hĂ€n ja vaikka oma puolisoni on kuurosokea, syyllistyn itsekin siihen, ettĂ€ en usein muista tsekata onko sivusto kaikkien selattavissa. Web kuuluu kuitenkin kaikille ja sivuston pitĂ€isi olla esteetöntĂ€ ihan samalla tavalla kuin esimerkiksi responsiivinen – puutteet ovat toimimattomuutta ja ”rikkinĂ€inen” sivusto ei ole koskaan hyvĂ€ juttu.

Esteettömyys unohtuu, niin se unohtui vuosiksi myös minulta, vaikka kirjoittelin esteettömyydestÀ jo vuonna 2009, jolloin lÀhinnÀ kritisoin Flashin kÀyttöÀ. Kaikessa on hyvÀ kehittyÀ, niin myös esteettömÀssÀ kehityksessÀ. Otetaan esteettömyys rutiiniksi verkkosivuston kehityksessÀ samaan tapaan kuin esimerkiksi responsiivinen suunnittelu, nÀin teemme kaikki parempaa webiÀ.

Katso diat miitistÀ tÀstÀ ja tÀstÀ linkistÀ. Kiitos kaikille miittiin osallistujille!

Luettavaa

badge1-attendee

Pullopostia?

Koottuja kuulumisia sisÀltÀvÀ bittivirtojen pulloposti saapuu rantaasi noin kolmen kuukauden vÀlein.