Aivan kuten virheiden käsittely, tietoturva tai koodin tehokkuus, saavutettavuus on yksi ensiluokkaisen ja laadukkaan ohjelmiston osatekijöistä.
Kehittäjän tulisi huomioida työssään erilaiset käyttäjäryhmät, tavat ja laitteet. Mitä jos käyttäjä haluaa kuunnella, eikä lukea sivua? Entä jos käyttäjä ei käytä hiirtä? Saavutettavuudessa huomioitavat asiat ovat samalla linjalla kuin esimerkiksi se, että käyttäjällä voi olla pieni näyttö tai hidas yhteys.
Saavutettavuuden keskeisimmät tekijät käyttöliittymän kehittämisessä
Saavutettavuus tarkoittaa erilaisten käyttöskenaarioiden huomioon ottamista. Ota käyttöliittymän kehittämisessä huomioon ainakin seuraavat tekijät, joilla pääset alkuun saavutettavuuden saralla:
Rakenne ja semanttiset elementit
Sivuston rakenteen pitäisi olla silmäiltävissä sekä kuultavissa ruudunlukijalla. Esimerkiksi pelkät div-elementit ovat ruudunlukijalle pelkkää tekstimassaa. Aina kun aiot lisätä div-elementin, kysy itseltäsi: Mitä varten tämä div on? Onko se päänavigaatio? Onko se yhteen kuuluvien elementtien ryhmittelyä varten? Onko se sivun pääotsikko? Vai onko se vain jonkin tekstin ryhmittely visuaalista ulkoasua varten?
On tärkeää ilmaista sisällön semanttinen merkitys esimerkiksi H1-, H2-, main-, nav- ja footer-elementeillä. Ne antavat sivulle rytmin ja korostavat tekstissä oikeita asioita. Ruudunlukijaa käytettäessä elementtien avulla on mahdollista selata otsikot läpi ja hypätä suoraan tiettyyn kohtaan ilman koko sivun kuuntelemista.
Otsikkotasot
Olemme nähneet monella sivustolla, että otsikkotasoja ohitetaan. Perussääntönä on, että sivulla on vain yksi H1-otsikko ja seuraava otsikko on tasolla H2. Alaotsikot H2-otsikon alla ovat järjestyksessä H3, H4, H5 ja H6. Jos otsikon koko on liian suuri, käytä CSS:ää.
Linkit ja painikkeet
Jos tekemäsi linkki irrotettaisiin asiayhteydestä, tietäisitkö minne se vie, jos lukisit vain alleviivatun tekstin? Jos samalla sivulla on esimerkiksi useita linkkejä, joiden nimi on ”muokkaa”, voit tehdä niistä helppokäyttöisiä käyttämällä aria-labelledby -attribuuttia.
Käytä klikattaviin elementteihin linkkejä ja painikkeita, ei div- tai span-elementtejä, joihin on liitetty onClick. Muista, että onClick on hiiritapahtuma, eikä sitä kutsuta näppäimistötapahtumien yhteydessä, ellei sitä käytetä natiivien elementtien, kuten painikkeen (button) tai linkin (a-elementti, jossa on href-attribuutti) kanssa.
Kuvat
Jos käyttämäsi kuva jätettäisiin pois, olisiko sivu edelleen ymmärrettävä ja välittyisikö kaikki olennainen tieto? Kuvia on monenlaisia: logoja, koristekuvia, kaavioita, diagrammeja… Mieti, miten kuvailisit kokonaisuutta ystävällesi puhelimessa. Ohittaisitko kuvan, vai kertoisitko jotain sen sisällöstä? Tämä auttaa sinua päättämään, tarvitseeko kuva alt-tekstiä vai ei.
Ruudunlukijan lukujärjestys
Muista, että ruudunlukijan lukujärjestys on DOM-puun järjestys. Voit käyttää selaimesi kehittäjätyökaluja saadaksesi käsityksen siitä, miltä sivu kuulostaa ruudunlukijan käyttäjälle. On myös hyvä käytäntö käydä kaikki linkit ja lomakekentät läpi tabulaattorilla ja tarkistaa, että järjestys on järkevä. Jos esimerkiksi etunimi ja sukunimi -kentät esitetään visuaalisesti erillisissä sarakkeissa, niiden pitäisi seurata toisiaan, kun niitä tabuloidaan. Suosi DOM-järjestystä autettuna CSS:llä (esimerkiksi flexbox-asettelu) sen sijaan, että leikit tabindexillä.
Validi HTML on välttämätöntä
Jos et tee mitään muuta, muista ainakin tämä: validin HTML:n kirjoittaminen on ensimmäinen askel kohti saavutettavuutta. Jos noudatat tätä tiukasti, onnittelut! Olet jo hyvällä tiellä kohti saavutettavuutta.
Selaimet ja ruudunlukijat perustuvat standardeihin. Standardien rikkominen aiheuttaa odottamattomia tilanteita. Kunkin ohjelmiston virheenkäsittelystä riippuu, miten virheellinen HTML esitetään. Jos esimerkiksi unohdat sulkevan sulku- tai lainausmerkin, selaimessa elementti saattaa näkyä oikein, mutta ruudunlukija saattaa alkaa lukea koodia.
Nykyaikaisilla verkkosovelluksilla on usein sisäinen tilanhallinta. Radiopainikkeita on mahdollista luoda ilman ryhmän nimen määrittelyä. Radiopainikkeiden valitseminen hiirellä toimii, arvo välittyy oikein, kaikki näyttää olevan kunnossa, mutta radiopainikkeiden selaaminen ja valintojen tekeminen näppäimistöllä saattavat olla rikki. Näppäimistötestauksella nämäkin tilanteet saadaan helposti kiinni.
Monissa tapauksissa suoraviivainen ja validi toteutus toimii kaikille käyttäjille ja sillä pääsee hyvin alkuun! Jos verkkosivulla tai verkkosovelluksessa on kehittyneempiä ominaisuuksia, saattaa olla tarvetta kehittyneemmille saavutettavuustoteutuksille.
Toivotamme sinulle helppoa alkua kohti verkkosaavutettavuutta!
Lähteitä ja suosituksia:
Harvardin yliopisto: Miten kirjoittaa hyvä alt-teksti (EN)
MDN: Esimerkkejä radiopainikkeiden oikeanlaisesta koodista (EN)
Tarkista koodisi: W3C Validator (EN)
Lue myös blogi: Mitä jokaisen suunnittelijan pitäisi tietää saavutettavuudesta?
