Vinkkejä HubSpot-kehittäjille: Käytettävyys

Web-kehitys Tekninen kehitys HubSpot 15.3.2022

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.

 

Työkaluja käytettävyyden arviointiin

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. 

WCGA-linkkejä

  • Tämä työkalu, tarkastaa progressive enhancement -strategiaa hyödyntäen suunnitellun verkkosivun alkuperäisen, paranetelmattoman version ja vertaa, noudattaako se Evalueran WCGA 2.0 suosituksia HTML5-sivustoille. Käytännössä työkalu koostaa raportin, jolla voidaan varmistaa standardin noudattaminen, myös parannelluille verkkosivuversioille. 
  • Tämä verkkosivu, tarjoaa ilmaisen värikontrastin analysointityökalun, joka auttaa sinua arvioimaan mahdollisia värikontrastin haasteita esittämällä verkkosivun värikontrastiin liittyvät ongelmat tai valitut väriparit WCAG-ohjeistukseen peilaten. Värikontrastilla tarkoitetaan sitä, kuinka kirkkaina tai tummina värit näkyvät, kun ne asetetaan toisiaan vasten näytöllä, erityisesti huomioiden suhteellinen ihmissilmällä havainnoitavan harmaaskaalan tai harmaasävyasteikon (gray-scale) luminositeetti.
  • GIT Repository -työkalu, joka auttaa kehittäjiä identifioimaan HTML-merkkikielen käytettävyysongelmia. 
  • Ilmainen käytettävyystarkastus -työkalu, joka tarjoaa yksityiskohtaisen raportin sivun käytettävyydestä. Koostettu raportti sisältää englanninkieliset selkoselitykset suurimmista käytettävyyteen liittyvistä haasteista. 

Lighthouse

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:

  1. Google Chromessa siirry URL-osoitteeseen, jonka toimintaa haluat tarkastella. Voit tarkastella minkä tahansa URL-osoitteen toimintaa verkossa.

  2. Avaa Chrome Inspector. Klikkaa hiiren oikeaa painiketta verkkosivun päällä ja valitse tarkista (inspect).

Valitse tarkista -toiminto hiiren oikealla painikkeella

  1. Klikkaa Lighthouse-kohtaa valikosta.
  2. Valitse käytettävyys (accessibility), valitse laiteasetukset (device settings) ja sitten luo raportti (generate report).

Asenna ja käynnistä Node komentorivi -työkalu 

  • Asenna Lighthouse. -g muuttuja asentaa työkalun globaalina modulina. npm install -g lighthouse
  • Käynnistä tarkastus:  lighthouse <url>
  • Tarkastele vaihtoehtoja: lighthouse --help

Käytä Lighthousea Chrome-laajennuuksena 

  1. Asenna Lighthouse  Chrome-laajennus  Google Chrome-kaupasta 
  2. Chromessa, siirry sivustolle, jota haluat tarkastella.   
  3. Klikkaa Lighthouse-ikonia. Sen pitäisi sijaita Chromen osoitepalkin vieressä. Mikäli näin ei ole, avaa Chromen päävalikko ja valitse se valikosta. Kun klikkaat ikonia, Lighthouse-valikko laajenee. 
  4. Klikkaa "luo raportti" (generate report). Lighthouse käynnistää tarkastuksen valitulla verkkosivulla, jonka jälkeen se avaa uuden välilehden, joka sisältää luodun raportin ja tulokset.

Käytettävyys käytännössä - näin käytät HubL-tagia tehokkaasti

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ä.

Lisää vaihtoehtoiset tekstit kaikelle ei-tekstuaaliselle sisällölle 

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.

  • Tee näin: 
    <img src="" alt="">
  • Älä tee näin: 
    <img src="">

Hyödynnä lazy loading -ratkaisuja

"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. 

  • Tee näin:
    <img src="" alt="" loading="lazy" height="200px" width="400px">

  • Älä tee näin:
    <img src="1px.gif" data-src=""  alt="">

Varmista, että linkeillä ja lomakkeilla on vaihtoehtoinen teksti

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;
}

Muita vinkkejä

  • Lisää ohitusmahdollisuus sisältölinkkeihin: Kun verkkosivuvierailija navigoi sivulla käyttäen lukulaitetta tai näppäimistöään, on hyvä olla tarjolla mahdollisuus hypätä tiettyjen toistuvien osioiden, kuten headerin, yli.

  • Hyödynnä semanttista merkkityyliä: Semanttinen merkkityyli on HTML, joka ilmaisee jotakin merkitystä. Semanttisia elementtejä ovat esimerkiksi <header>, <main>, <footer>, <nav>, <time>, <code>, <aside> sekä <article>. Ei-semanttisia elementtejä ovat esimerkiksi <div> ja <span>. Ei-semanttisilla elementeillä on yhä paikkansa, mutta niitä tulisi ensisijaisesti käyttää esittämiseen eikä merkityksen ilmaisemiseen. 

  • Varmista elementtien oikea käyttö: Luodessasi mallipohjia ja koodattuja tiedostoja, sinun tulisi käyttää oikeita semanttisia elementtejä (<header>, <main>, <footer>, <nav>, <dialog>, yms.), jotta voit kommunikoida elementtien sisällön hakukoneille ja lukulaitteille.
Vinkkejä HubSpot-kehittäjille

 

HubSpot tutuksi tunnissa

Varaa aika ilmaiseen tunnin mittaiseen demoon!