Miten Scrumin daily stand-upeista monelle ohjelmistokehittäjälle tuttu toteamus “ei esteitä” takaa esteettömyyden myös heidän tuottamissaan sovelluksissa? Digitalisaatio on muuttanut tapaamme kommunikoida, työskennellä, oppia ja seurustella. Se ei kuitenkaan ole oletuksena kaikille yhdenvertaista.
Kaikki eivät välttämättä erota kunnolla nettisivuilla olevia kuvia, videoita tai kirjoitusta, jota ei ole oikein merkitty vaihtoehtoisella tekstillä. Kaikki eivät välttämättä kuule tai ymmärrä äänisisältöä, jota ei ole tekstitetty tai kirjoitettu auki. Voi olla tilanteita, joissa henkilö ei pysty navigoimaan verkkosivustolla, jos sitä ei voi käyttää näppäimistöllä. Ihmiset, joilla on kognitiivisia rajoitteita, eivät välttämättä ymmärrä monimutkaista kieltä tai navigointijärjestelmiä. Käyttäjän rajoitteet voivat olla väliaikaisia tai pysyviä.
Webin saavutettavuuden toteutuminen ei ole vain sosiaalinen vastuu, vaan myös lakisääteinen vaatimus monissa maissa. Esteettömyyslakien noudattamatta jättäminen voi johtaa oikeustoimiin ja sakkoihin. Yrityksille se on mainehaitan lisäksi myös iso tappio, mikäli mahdolliset asiakkaat eivät pääse tutustumaan tarjontaan ja palveluihin. Tässä blogitekstissä kerron siitä, mitä saavutettava web on, mitä hyötyä siitä on ja miksi web-suunnittelijoiden ja kehittäjien on tärkeää priorisoida se.
Mitä on Webin saavutettavuus?
Saavutettavuudelle on asetettu standardi, WCAG, joka tulee englannin kielen sanoista Web Content Accessibility Guidelines. Standardi on kehitetty W3C-prosessin (The World Wide Web Consortium) kautta yhteistyössä yksilöiden ja organisaatioiden kanssa eri puolilla maailmaa. Tavoitteena vastata yksilöiden, organisaatioiden ja hallitusten tarpeita saavutettavuuden osalta kansainvälisesti. Tätä noudattamalla voidaan suunnitella ja kehittää verkkosivustoja ja digitaalista palveluita, jotka ovat kaikkien käytettävissä. Näin varmistetaan, että ihmiset, joilla on erilaisia näkö-, kuulo-, motorisia, kognitiivisia tai neurologisia rajoitteita, voivat navigoida eri sivustoja ja sovelluksia. On tärkeää, että myös he voivat olla vuorovaikutuksessa muiden käyttäjien kanssa sekä ymmärtää digitaalista sisältöä ilman esteitä.
Saavutettavuuden edut
Webin saavutettavuudella on useita etuja, jotka voivat vaikuttaa myönteisesti sekä käyttäjiin että yrityksiin.
Lisääntynyt kattavuus ja sitoutuneisuus
Suunnittelemalla esteettömiä verkkosivustoja yritykset voivat tavoittaa ja sitouttaa suuremman yleisön. Tämä ei ainoastaan lisää bränditietoisuutta, vaan osoittaa myös sitoutumista sosiaaliseen vastuuseen.
Parannettu käyttökokemus
Webin saavutettavuus voi parantaa yleistä käyttökokemusta kaikille. Helppokäyttöiset suunnittelukäytännöt, kuten selkeä navigointi, luettava teksti ja intuitiivinen suunnittelu, helpottavat verkkosivustojen käyttöä.
Pienempi oikeudellinen riski
Monissa maissa on lakeja, jotka edellyttävät, että verkkosivustot ovat kaikkien käytettävissä. Näiden lakien noudattamatta jättäminen voi johtaa oikeustoimiin, mukaan lukien sakot ja oikeusriidat.
Parempi hakukoneoptimointi
Helppokäyttöiset verkkosivustot voivat hyötyä paremmasta hakukoneoptimoinnista. Hakukoneet voivat ymmärtää ja indeksoida saatavilla olevaa sisältöä paremmin, jolloin se näkyy todennäköisemmin hakutuloksissa.
Parannettu brändin maine
Priorisoimalla verkkosivujen ja sovellusten esteettömyyden yritykset voivat rakentaa brändille myönteistä mainetta osallistavana ja sosiaalisesti vastuullisena yrityksenä. Tämä voi myös auttaa houkuttelemaan uusia asiakkaita, ja säilyttämään vanhoja, aiemmin mainituista syistä.
Miten parantaa saavutettavuutta?
Käytännössä saavutettavuutta parannetaan lisäämällä html-elementteihin erilaisia attribuutteja tuomaan tarvittavia lisätietoja.
Yhdistä lomakkeen jokainen ohjaus labelin kanssa
Käytä for-attribuuttia <label> elementissä, joka on linkitetty lomake-elementin id-attribuuttiin, tai vaihtoehtoisesti WAI-ARIA-attribuutteja.
Tietyissä tilanteissa voi olla hyväksyttävää piilottaa <label> elementit visuaalisesti, mutta useimmissa tapauksissa labeleita tarvitaan auttamaan kaikkia lukijoita ymmärtämään vaadittu syöte.
<html lang="fi">
<label for="etunimi">Etunimi:</label>
<input id="etunimi" type="text" name="etunimi" />
</html>Sisällytä kuville vaihtoehtoinen teksti
Varmista, että kaikkiin informatiivisiin ja toiminnallisiin kuviin lisätään vaihtoehtoinen teksti kuville. Käytä tyhjää vaihtoehtoista tekstiä, alt=”” kuvituskuville tai sisällytä ne sen sijaan CSS:ään ns. Tooltippinä. Tooltippiä käytetään usein antamaan lisätietoja jostakin, kun käyttäjä siirtää hiiren osoittimen elementin päälle:
<div class="tooltip">
<img src="kuvatus.webp" alt="informatiivinen kuvaus kuvan sisällöstä tähän" />
<span class="tooltiptext">tooltipin muodossa oleva informatiivinen kuvaus kuvan sisällöstä tähän</span>
</div>
<style>
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
Tunnista sivun kieli ja kielimuutokset
Ilmoita jokaisen sivun ensisijainen kieli käyttämällä lang-attribuuttia html-tunnisteessa, esimerkiksi
<html lang=”fi”>.
Käytä lang-attribuuttia tietyissä elementeissä, kun elementin kieli eroaa muusta sivusta.
Käytä merkintöjä merkityksen ja rakenteen välittämiseen
Käytä asianmukaisia merkintöjä otsikoissa, luetteloissa, taulukoissa ja muissa osioissa. HTML5 tarjoaa lisäelementtejä, kuten <main>, <nav> ja <aside>, jotka jäsentävät sisältöäsi paremmin. WAI-ARIA-roolit voivat tarjota lisämerkityksiä, esimerkiksi käyttämällä role=”search”-funktiota hakutoiminnon tunnistamiseen. Työskentele esim. suunnittelijoiden ja sisällöntuottajien kanssa sopiaksesi merkityksistä ja käytä niitä johdonmukaisesti.
Auta käyttäjää välttämään ja korjaamaan virheet
Anna selkeät ohjeet, virheilmoitukset ja muut ilmoitukset, jotka auttavat käyttäjää täyttämään sivustosi lomakkeita. Jos pakollinen kenttä ei sisällä vaadittuja tietoja voi aria-required -ominaisuuden avulla ilmaista syöttötiedon pakollisuuden.
Jos kentän tietojen on oltava tietyssä muodossa, voidaan käyttää aria-alert-dialogia virheiden tunnistamiseen ja antaa ohjeet vaadittujen korjausten tekemiseen. Auta käyttäjää löytämään, missä ongelma on.
Kirjoita koodia siinä järjestyksessä kun sivua luetaan
Varmista, että koodin elementtien järjestys vastaa esitettyjen tietojen loogista järjestystä. Yksi tapa tarkistaa tämä on poistaa CSS-tyylit kokonaan ja tarkistaa, onko sisällön järjestys järkevä ja sellainen mihin ollaan yleisesti totuttu.
Responsiivinen suunnittelu
Käytä responsiivista suunnittelua mukauttaaksesi näyttöä erilaisiin zoomaus-tiloihin ja näkymän kokoihin, kuten mobiililaitteissa ja tableteissa. Kun fonttikokoa suurennetaan vähintään 200 %, vältä vaakasuuntaista vierittämistä ja estä sisällön leikkaaminen. Käytä progressiivisia parannuksia varmistaaksesi, että ydintoiminnot ja sisältö ovat saatavilla käytetystä tekniikasta riippumatta.
Anna merkitys epätyypillisille interaktiivisille elementeille
Käytä WAI-ARIAa tarjotaksesi tietoja mukautettujen widgetien, kuten haitarien ja räätälöityjen painikkeiden, toiminnasta ja tilasta.
role="navigation" ja aria-expanded="true"Lisäkoodia tarvitaan tällaisten widgetien toiminnan toteuttamiseen, kuten sisällön laajentamiseen ja kutistamiseen tai siihen, miten widget reagoi näppäimistötapahtumiin.
Varmista, että kaikki interaktiiviset elementit ovat näppäimistön käytettävissä
Ajattele näppäimistön käyttöä varsinkin kun kehität interaktiivisia elementtejä, kuten valikoita, hiiren osoitintietoja, kokoontaitettavaa haitari-elementtiä tai mediasoittimia.
Lisää tabindex=”0″ elementteihin, jotka eivät tavallisesti saa kohdistusta, kun niitä käytetään interaktiivisesti. Tällaisia elementtejä ovat esimerkiksi <div> ja <span>.
Lopuksi
Yhteenvetona voidaan todeta, että verkon saavutettavuus on välttämättömyys sen varmistamiseksi, että kaikilla on yhtäläinen pääsy verkon digitaaliseen sisältöön. Se on monissa maissa myös lakisääteinen vaatimus.
Webin saavutettavuus on olennainen osa web-suunnittelua ja -kehitystä, josta on hyötyä sekä käyttäjille että yrityksille. Se varmistaa, että kaikki voivat kyvystään riippumatta käyttää digitaalista sisältöä ja olla vuorovaikutuksessa sen kanssa. Verkkostandardeja ja ohjeita noudattamalla yritykset voivat tavoittaa suuremman yleisön, parantaa käyttökokemusta, hyötyä paremmasta hakukoneoptimoinnista, vähentää juridisia riskejä ja parantaa brändin mainetta. Verkkosuunnittelijoina ja -kehittäjinä meidän vastuullamme on priorisoida verkon saavutettavuus ja luoda kattavampi verkko kaikille käyttäjille.
Tarkemmat ja laajemmat esimerkit löydät standardin virallisilta kotisivuilta.
