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 saavutettavuudesta. 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.
Samilla fokus hallussa #wpjkl meetupissa. @samikeijonen @WPJyvaskyla pic.twitter.com/rPE4THt3ay
— Mikko Virenius (@mikkovirenius) February 16, 2016
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.
#wpjkl on alkanut hyvällä osanotolöla! @samikeijonen puhuu esteettömyydestä navigaatiossa #wordpress #wpfi pic.twitter.com/swDIiRAMc8
— viljami.io (@anttiviljami) February 16, 2016
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</span> 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ä.
Sivustoa ja valikoita pitäisi pystyä selaamaan tab, shift+tab ja enter -näppäimillä ilman että fokus katoaa. #wpjkl pic.twitter.com/13OIP6Y2r4
— WordPress Jyväskylä (@WPJyvaskyla) February 16, 2016
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
- Sami Keijonen: Accessible Full Screen Menu
- Sami Keijonen: How to create better, more accessible WordPress themes
