Etsitkö lähtökohtaa esteettömyyden laajalle alalle? Perehdymme todellisiin käytäntöihin ja työkaluihin, joita voit ottaa käyttöön suunnitteluprosessissasi parantaaksesi digitaalisia tuotteitasi tekemällä niistä osa käyttäjiäsi.

Käymme läpi a digitaalinen muunnosYhä useammat yritykset tarjoavat tuotteitaan ja palveluitaan digitaalisesti.

Käyttäjäkokemus (UX) on tullut paljon valtavirtaisemmaksi, ja yritykset ovat ymmärtäneet, että kannattaa varmistaa, että heidän verkkosivustonsa on optimoitu käytettävyyttä varten. Tämä johtuu siitä, että hyvän käyttökokemuksen tarjoamisella voi olla erittäin myönteinen vaikutus heidän verkkotulokseensa.

Oletko kuitenkaan koskaan miettinyt, kuinka helposti verkkosivustosi on miljoonille vammaisille käyttäjille?

Mitä on verkkosivujen saavutettavuus?

Lyhyesti sanottuna saavutettavissa Web-suunnittelu on käytäntö tehdä verkkosivustostasi mahdollisimman monien ihmisten käytettävissä. Suunnittelijoina emme usein ajattele ihmisiä, jotka eivät pysty käyttämään verkkosivustoa samalla tavalla kuin me, mikä johtaa siihen, että heillä on huonompi kokemus tai he eivät pysty käyttämään palveluasi ollenkaan.

Tuoreimmat hallituksen tiedot osoittavat sen 22% ihmisistä Yhdistyneessä kuningaskunnassa – eli 14,6 miljoonaa – elää vammaisena tai vammaisena, mutta on paljon enemmän ihmisiä, jotka voivat olla tilapäisesti vammaisia ​​(käsivarren murtuminen tai muu vamma) tai tilavammaisia ​​(vauvan pitäminen toisessa kädessä, näytön katselu kirkkaassa auringonvalossa) .

Kaikki nämä ihmiset haluavat ja heidän täytyy voida käyttää palveluitasi mahdollisimman kitkattomalla tavalla.

Miksi minun pitäisi välittää verkkosivuston esteettömyydestä?

Se on eettistä

Verkkosivustojen saavutettavuus on oikea tapa toimia. Suunnittelijoina meidän vastuullamme on varmistaa, että suunnittelemme tavalla, joka on kaikkien käyttäjien saatavilla heidän tilanteestaan, kykyjään tai kontekstistaan ​​riippumatta.

Tämän seurauksena verkko voi olla tila, joka on osallistava kaikille, olipa he kognitiivisia, näkövammaisia ​​tai fyysisiä vammoja.

Noudattamaan lakia

Yhdistyneessä kuningaskunnassa on verkkosivustojen esteettömyyttä koskevia lakeja. Sisään 2018, Yhdistyneen kuningaskunnan hallitus lain mukaan valtionhallinnon ja paikallishallinnon organisaatioiden, joidenkin hyväntekeväisyysjärjestöjen ja muiden kansalaisjärjestöjen verkkosivustot on koodattava ja suunniteltu siten, että ne täyttävät verkon saavutettavuusstandardit, Web Content Accessibility Guidelines (WCAG 2.1)

Kaikilla Yhdistyneen kuningaskunnan palveluntarjoajilla on laillinen velvollisuus tehdä kohtuullisia mukautuksia Tasa-arvolaki 2010 tai Vammaissyrjintälaki 1995 (Pohjois-Irlannissa).

Jos yritykset eivät tee kohtuullisia muutoksia, ne voidaan viedä oikeuteen. Vuonna 2019 sokea asiakas haastoi Dominos Pizzan oikeuteen koska ei tarjonnut hänelle saavutettavissa olevaa kokemusta.

Positiivinen vaikutus liiketoimintaan

Tietysti verkkosivustosi saavutettavuuden parantaminen voi myös hyödyttää yritystäsi useilla tavoilla:

• Sen avulla useat käyttäjät voivat kulkea tuloskanavasi läpi.
• Puhdas koodi (joka parantaa käytettävyyttä) parantaa sivuston nopeus ja SEOmikä tekee verkkosivustostasi löydettävämmän hakukoneissa.
• Digitaalisen saavutettavuuden parantaminen ei vaikuta vain vammaisiin käyttäjiin. Kaikki voivat hyötyä esteettömästä verkkosuunnittelusta. Tekemällä verkkosivustostasi helpommin saavutettavan, parannat kaikkien käyttäjiesi käyttökokemusta.

Se vaatii vähän vaivaa

Helppokäyttöisen verkkosivuston luomisen ei tarvitse vaatia suuria budjetteja tai suuria muutoksia. Web-sivuston helpottamiseksi ei tarvita lisäominaisuuksia tai -sisältöä. Monet ongelmat voidaan ratkaista pienellä ajattelulla, suunnittelulla ja tietoisuudella, joita käsitellään myöhemmin tässä blogissa.

Kuinka testata verkkosivuston saavutettavuutta

AALTO on ilmainen saavutettavuuden tarkistus- ja arviointityökalu, jonka avulla voit testata verkkosivustosi saavutettavuutta.

Voit joko liittää URL-osoitteesi sivuston kenttään tai ladata ne laajennus suorittaaksesi diagnostiikan nopeasti kaikilla vierailemillasi sivuilla.

Kun suoritat WAVEn, se tuottaa erittäin yksityiskohtaisen diagnostiikkaraportin, joka kattaa tärkeimmät esteettömyysalueet, mukaan lukien kontrastivirheet, vaihtoehtoinen teksti kuvia ja semanttinen HTML-rakenne.

WAVEn luomat raportit ovat uskomattoman yksityiskohtaisia ​​ja voivat olla hieman ylivoimaisia, varsinkin jos olet uusi esteettömyyden suhteen. Antaaksemme sinulle selkeämmän yleiskatsauksen siitä, miten voit tehdä verkkosivustostasi helpommin saavutettavissa, olemme ottaneet esille muutamia avainalueita ja vinkkejä niiden parantamiseen.

Tapoja parantaa verkkosivustosi saavutettavuutta

Värit ja kontrasti

värit ja kontrasti ovat erityisen tärkeitä, jotta ihmiset, joilla on näkövamma ja värisokeus, voivat navigoida verkkosivustolla helposti.

Tämä vaikuttaa paljon suurempaan määrään käyttäjiä kuin odotat. Mukaan NHS8 % kaikista miehistä on värisokeita ja paljon enemmän ihmisiä kärsii jonkinasteisesta näön heikkenemisestä. Koska väestö ikääntyy, tämä on entistä tärkeämpi painopiste tulevaisuudessa.

Helppokäyttöinen verkkosuunnittelu varmistaa, että käytetyn tekstin ja sen taustan välillä on tarpeeksi kontrastia, jotta kaikki voivat lukea sen helposti.

Verkkosivustollasi käytettyjen värien kontrastin testaaminen on nopeaa työtä kontrastin tarkistustyökalu. Vähimmäiskontrastisuhteen on oltava 4,5:1, jotta se tarjoaa riittävän selkeyden käyttäjille, joilla on heikentynyt näkö.

Lisäksi esteettömyysohjeet määräävät, että värit eivät saa koskaan olla ainoa tapa välittää tietoa. Toisin sanoen, niissä on oltava ylimääräinen vihje (kuten hyperlinkkien alleviivattu teksti) niille käyttäjille, jotka havaitsevat värit eri tavalla ja saattavat unohtaa väripohjaiset ohjeet.

Fontin valinta ja koko

Fontin valinta ja koko ovat tärkeitä paitsi näkövammaisille käyttäjille, myös käyttäjille, joilla on kognitiivisia häiriöitä, kuten lukihäiriö.

Valinnan suhteen vältä Serif-fontit (Times New Roman, Georgia, Garamond). Koristeelliset koukut ja pyörteet kirjainten viivojen lopussa peittävät kirjainten muodot ja aiheuttavat lukihäiriöisille lukijoille ongelmia.

Hyvä uutinen on, että sinun ei tarvitse muuttaa verkkosivustoasi Comic Sansiksi, jotta se olisi lukihäiriöystävällinen. Sans Serif -kirjasimien (Helvetica, Arial, Open Sans, Roboto) kirjaimet voivat näyttää vähemmän täynnä ja ovat laajalti saatavilla useimmissa käyttöjärjestelmissä ja suunnitteluohjelmistoissa.

Selaintekstin oletusfonttikoko on yleensä 16 pikseliä (12 pt); tämä on myös saavutettavuusohjeiden mukaan leipätekstin pienin suositeltu kirjasinkoko.

Kyse ei kuitenkaan ole vain tekstin koosta. Tekstirivien ja yksittäisten sanojen välisen tyhjän tilan lisääminen voi todella auttaa käyttäjiä, joilla on näkövamma tai lukihäiriö.

Seuraava vähimmäisetäisyys varmistaa, että näiden käyttäjien vaatimukset täyttyvät:

• Kirjainväli: x0,12 fontin koko
• Sanojen väli: x0,16 fonttikoko
• Riviväli: x1,5 fontin koko
• Kappaleiden väli: x2 fontin koko

Vaihtoehtoinen teksti

Vaihtoehtoinen teksti (tai “alt-tunniste”) on HTML-koodisi tagi, jonka avulla voit syöttää kuville tekstikuvauksen.

Näitä tekstikuvauksia käytetään kuvailemaan kuvia näkövammaisille käyttäjille, jotka luottavat näytönlukuohjelmiin. Tämä tarkoittaa, että on tärkeää kuvata tarkasti kuvan merkitys tai tarkoitus niille, jotka eivät näe sitä.

Aina ei välttämättä ole tarpeen lisätä vaihtoehtoista tekstiä. Esimerkiksi kuvaa voi ympäröidä tarpeeksi kontekstuaalisia indikaattoreita tai kuvalla ei ole muuta tehtävää kuin esteettinen. Lisää tässä tapauksessa tyhjä alt-tunniste (alt=””) tai diagnostiikkatyökalut merkitsevät sen puuttuvaksi alt-tunnisteeksi.

Lomakkeet

Lomakkeet voi olla monimutkaista kenelle tahansa, mutta ne, joilla on muita esteettömyysongelmia, voivat usein kamppailla, kun muodot ovat liian minimalistisia ja epäselviä. Alla on lueteltu joitain yleisiä asioita, joihin on puututtava esteettömyystilanteen ratkaisemiseksi:

• Tarrat – Paikkamerkkitekstin käyttäminen otsikona kentän ulkopuolella olevan tekstin sijaan aiheuttaa sekaannusta, kun teksti katoaa, kun käyttäjä alkaa kirjoittaa. Keskeisten ohjeiden jättäminen pois käyttäjältä minimalismin tai estetiikan puolesta on suuri virhe, jota on vältettävä.
• Rajat – Jotain niinkin yksinkertaista kuin reunus tekstinsyötteen ympärillä on tärkeä kognitiivisille vammaisille käyttäjille, jotta on selvää, mistä heidän täytyy napsauttaa.
• Lisäohjeet – Usein lomakkeet käyttävät minimalistista lähestymistapaa yrittäessään häivyttää suunnittelua. Tämä kuitenkin haittaa käytettävyyttä ja siten saavutettavuutta.
• Virheilmoitukset – nämä tulee ilmaista useilla elementeillä, yleensä käytetään väriä, mutta tämän lisäksi virheet tulee ilmaista symboleilla tai tekstillä.
• Arvostelu – Lomakkeissa on oltava aikaa tarkistaa ennen lähettämistä, jotta käyttäjä voi korjata tiedot.

HTML-rakenne

Vaikka verkkosivu näyttää hyvältä yllä olevien perusteiden noudattamisen jälkeen, se voi silti kärsiä vakavista saavutettavuusongelmista, jos semanttinen rakenne koodisi ei ole aivan tyhjä.

On tärkeää varmistaa, että kaikki sisältörakenteet on merkitty oikein ja että ne noudattavat selkeää hierarkiaa, koska näytönlukuohjelmia käyttävät ihmiset käyttävät näitä rakenteellisia merkintöjä navigointiin.

Lisäbonuksena on, että se antaa Googlelle mahdollisuuden tulkita sisältöäsi paremmin, mikä voi hyödyttää hakukoneoptimointiasi.

Yksinkertainen neuvo olisi, että sivullasi on yksi

-elementti ja sitten

seuraavia tärkeitä osioita varten. Jos sinulla on alaosaston alaosa, käytä

-merkkiä ja niin edelleen:

Yleensä sivusi otsikko

Tässä kappaletekstiä

Seuraava tärkeä sivusi osa

Tässä kappaletekstiä

Jotain ei niin tärkeää, mutta liittyy yllä olevaan h2:een

Tässä kappaletekstiä

Seuraava tärkeä sivusi osa

Lyhyesti

Verkkosivustosi helpottaminen ei vaadi suurta budjettia tai paljon aikaa. Yllä olevien vinkkien ja temppujen käyttäminen voi jo muuttaa käyttökokemusta dramaattisesti ja tehdä siitä osallistavamman KAIKILLE käyttäjillesi.

Aloita esteettömän verkkosuunnittelun sisällyttäminen suunnitteluprosessiisi nyt, niin luot entistä helpomman ja kattavamman tilan käyttäjillesi, vaan myös parannat asemaasi Googlessa. Se on win-win kaikille.

Jos tarvitset lisää neuvoja verkkosivustojen saavutettavuudesta, älä epäröi ota meihin yhteyttä.

---

Jos tarvitset apua käyttäjäkokemus
älä epäröi ota meihin yhteyttä.