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

Tykkää, jos pidit jutusta:

Jos rakastit, tee hyvä teko:

Kaljarahan antamisen sijaan voit lahjoittaa mielenterveystyöhön.

Kommentoi

Vaadittu kenttä