Verkkosivun tai applikaation suunnittelun ja jatkokehityksen yhteydessä tulisi käytettävyys aina huomioida ja sen tilaa arvioida jo varhaisessa vaiheessa. Kiinnittämällä huomiota käytettävyyteen koko kehittämisprosessin ajan, voidaan mahdolliset ongelmat ja virheet identifioida ja korjata tarpeeksi ajoissa.
Kehittäjille on tarjolla useita erilaisia työkaluja käytettävyyden tarkasteluun. On kuitenkin hyvä pitää mielessä, että mikään työkalu ei yksin riitä arvioimaan, täyttääkö verkkosivu tai applikaatio käytettävyysstandardit vai ei - kokonaisvaltaista ihmisen tekemää arviointia tarvitaan myös. Tämä blogijulkaisu on osa uutta "Vinkkejä HubSpot-kehittäjille" -blogisarjaamme, joka on suunnattu kaikille HubSpot-kehittäjille tai aiheesta kiinnostuneille. Toivottavasti opit tämän blogisarjan parissa uuden kikan tai kaksi!
Vielä ennen kuin hyppäämme eteenpäin tarkastelemaan käytettävyyden arviointiin tarkoitettuja työkaluja, on hyvä kerrata - mitä käytettävyysstandardit oikeastaan ovat? The Web Content Accessibility Guidelines (WCAG) on kansainvälisesti tunnettu ohjeistus, jonka on julkaissut The World Wide Web Consortium -järjestöön (W3C) kuuluva The Web Accessibility Initiative (WAI). Ohjeistukseen on koottu suosituksia, jotka tekevät verkkosisällöstä saavutettavaa ensisijaisesti ihmisille, jotka kuluttavat sitä tietynlaisten apuvälineiden, kuten lukulaitteen kanssa, mutta myös erilaisille user agenteille (UA) eli ohjelmistotyypeille, kuten mobiililaitteille.
Tässä osiossa esittelemme joitakin käytettävyyden arviointiin suunnattuja työkaluja, jotka auttavat sinua tarkastelemaan minkä tahansa verkkosivun käytettävyyttä WCAG-standardin mukaiseksi. Työkalujen linkit löytyvät tekstin seasta.
Yksi yleisimmistä verkkosivujen käytettävyyden parantamiseen suunnatuista työkaluista on Googlen Lighthouse. Lighthouse on avoimen lähdekoodin, automatisoitu työkalu, jota voidaan hyödyntää millä tahansa verkkosivulla, julkisella tai tunnistautumista vaativalla. Lighthouse-työkalua voidaan hyödyntää mm. suorituskyvyn, käyettävyyden tai SEO-optimoinnin tarkasteluun.
Lighthouse voidaan käynnistää komentoriviltä Googlen Chromen kehitystyökaluista tai vaihtoehtoisesti Node-modulina. Syötä Lighthouseen mikä tahansa URL ja työkalu tekee sarjan toimintoja muodostaen raportin sivuston toiminnasta. Arvioinnin jälkeen voit hyödyntää raporttia parantaaksesi sivuston käytettävyyttä ja suorituskykyä. Jokainen virhekohta sisältää dokumentin, jossa selitetään miksi kyseinen kohta on tärkeä ja miten se voidaan korjata.
Lighthouse Chromen kehitystyökaluissa
Tässä koostetut ohjeet siitä, miten käynnistät Lighthousen Chromen kehitystyökaluista:
Asenna ja käynnistä Node komentorivi -työkalu
Käytä Lighthousea Chrome-laajennuuksena
Tässä osiossa käymme läpi käytännön vinkkejä, joilla voit varmistaa ja parantaa sivustosi tai applikaatiosi käytettävyyttä. HubSpot tarjoaa runsaasti tietoa käytteävyydestä ja sen parantamisesta sivustollaan. Käytettävyyttä parantavista toimenpiteistä ja HubSpot-kehittämisestä voit lukea lisää myös täällä.
Kaikilla kuvilla, ikoneilla, videoilla ja painikkeilla, jotka ilmaisevat jotain tarkoitusta ja ovat interaktiivisia, tulisi olla vaihtoehtoinen teksti eli alt-teksti. Vaihtoehtoinen teksti tarvitaan, mikäli verkkosivun vierailija hyödyntää tekstin lukemiseen lukulaitetta. Alt-teksti vaikuttaa myös hakukoneiden hakutuloksiin.
"Lazy loading" tai "on demand loading" on tapa ladata verkkosivuston elementtejä, kuten kuvia ja videoita vasta sitten, kun vastaanottaja niitä oikeasti tarvitsee. Käytäntöä hyödynnetään yleisesti verkkosivustojen suorituskykyä parantamaan, mutta sillä on suuri merkitys myös käytettävyyden kannalta.
Linkeillä, painikkeilla ja lomakkeilla tulisi kaikilla olla vaihtoehtoinen, selittävä teksti, joka kertoo, mitä kyseinen elementti tekee tai mihin se verkkosivukävijän vie. Mikäli tekstiä ei ole tarjolla, lukulaite tunnistaa pelkästään elementin, mutta ei voi tarjota käyttäjälleen informaatiota siitä, mitä elementti tekee tai mihin se vie.
Älä käytä 'display: none' -tagia piilottaaksesi lomakkeiden labeleita tai kuvailevaa tekstiä. Tämä estää lukulaitetta lukemasta tekstiä sellaisille vierailijoille, jotka eivät itse pysty sitä lukemaan, mutta lisäksi aiheuttaa haasteita myös sellaisille käyttäjille, jotka eivät näe lukea tekstiä värikontrastien vuoksi.
Hyödynnä CSS-koodia, joka tekee tekstistä läpinäkyvän piilottamatta sitä lukulaitteilta tai vaihtoehtoisesti lisää '.screen-reader-text' -koodi.
.screen-reader-text {
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
overflow: hidden;
position: absolute !important;
width: 1px;
}