Olet siis kuullut paljon puhetta esteettömyydestä. Ehkä olet jopa kuullut ihmisistä haastavan suuria yrityksiä oikeuteen niiden tarjoamista palveluista, joihin ei ole pääsyä. Mutta tiedätkö tarkalleen mitä saavutettavuus tarkoittaa?

Onneksi saavutettavuus ei ole liian vaikea ymmärtää tai toteuttaa, kun siihen sitoutuu. Kun olet oppinut, mitä esteettömyys on, voit soveltaa tätä teoriaa käytäntöön kirjoittamalla esteettömiä Vue.js-sovelluksia.

Mikä on saavutettavuus?

Esteettömyys on suosittu muotisana verkossa, mutta mitä se tarkalleen tarkoittaa? Osoittautuu, että nimi on melko kuvaava. Esteettömyys on yksinkertaisesti mitta siitä, kuinka käyttökelpoinen verkkosovellus on kaikentyyppisille ihmisille.

Kaikki eivät koe verkkoa samalla tavalla. Joillakin ihmisillä on vammoja, jotka voivat vaikuttaa kuuloon tai näköön. Jotkut eivät voi käyttää nykyaikaista laitteistoa tai nopeaa Internetiä, ja ihmisten on usein käytettävä Internetiä vähemmän kuin ihanteellisissa olosuhteissa. Esteettömyys tarkoittaa sitä, että kaikki nämä ihmiset voivat silti käyttää verkkosovellusta mahdollisimman sujuvasti.

Miksi saavutettavuus on tärkeää?

Esteettömyys on tärkeää, koska kun sovellus on helposti saavutettavissa, se voi palvella mahdollisimman monia ihmisiä. Kun joku tarjoaa palvelua tai tietoa verkkosivustolla, hänen tavoitteenaan on, että muut ihmiset käyttävät kyseistä palvelua tai lukevat tietoja.

Esteettömyysoptimointi varmistaa, että mahdollisimman harvat ihmiset eivät pysty käyttämään verkkosovellusta. Lisäksi helpommin saavutettavissa olevat verkkosovellukset sijoittuvat yleensä korkeammalle hakutuloksissa. Näin entistä useammat ihmiset voivat löytää ja käyttää helppokäyttöisempiä verkkosovelluksia.

Yleiset kehittäjien virheet, jotka haittaavat käytettävyyttä

Monet verkkosovellukset ovat vähemmän saatavilla kuin voisivat olla. Tämä on yleensä seurausta niiden rakentajien virheistä. Joitakin yleisiä esteettömyysvirheitä, joita kehittäjät tekevät sovelluksia rakentaessaan:

Käyttämättömien kirjastojen käyttö

Voit luottaa kolmannen osapuolen kirjastoihin säästääksesi aikaa ja vaivaa, kun kehität sovelluksiasi. Valitettavasti kaikki kirjastot eivät ota saavutettavuutta vakavasti, ja hyvien kirjastojen tunnistaminen voi olla vaikeaa. On helppo päätyä vahingossa heikentämään sovellusten saavutettavuutta tällä tavalla.

Semanttisen HTML: n huomiotta jättäminen komponentteja rakennettaessa

Semanttinen HTML on HTML, jonka merkitys ja rakenne ovat oikein. Jokaisella HTML-tunnisteella on luontainen tarkoitus, jonka avulla aputekniikka päättelee sisällön merkityksen. Esimerkiksi otsikkotunniste merkitsee verkkosivuston otsikkoa. Näytönlukijan pitäisi pystyä ilmoittamaan, että kaikki otsikkotunnisteen sisällä on verkkosivuston otsikkoa.

Valitettavasti mikään ei estä sinua käyttämästä tunnistetta väärään tarkoitukseen. Toinen yleinen esimerkki on painiketunnisteen käyttö linkkinä tai päinvastoin.

HTML: n kirjoittaminen tällä tavalla vahingoittaa saavutettavuutta, koska aputekniikka ei voi enää olla varma minkään HTML-elementin tarkoituksesta. Se voi päätyä tuottamaan hämmentäviä tai turhauttavia tuloksia tekniikan käyttäjille. Jotta saavutettavuus olisi mahdollisimman suuri, sinun tulee aina kirjoittaa semanttista HTML: ää, vaikka se tarkoittaisi hieman enemmän työtä.

Käytettävyyttä ei testata

Verkkosovelluksen rakentaminen voi usein olla työläs ja vaativat määräajat. Ominaisuuksien viimeistelemisen kiireen ja ohjelmiston muiden osien testaamisen välillä esteettömyystestaus jää taka-alalle. Sinulla saattaa olla houkutus ottaa sovellus käyttöön tuotantoon ennen kuin olet testannut sen esteettömyysongelmien varalta.

Miksi? Testaus vie aikaa ja saattaa vaatia laajoja muutoksia sovelluksen koodiin. Mutta web-sovelluksen testaamiseen on välttämätön osa kehitysprosessia. Sinun tulee testata sovelluksesi käytettävyyttä yhtä tarkasti kuin minkä tahansa muun näkökohdan.

Onneksi on olemassa työkaluja näiden ongelmien ratkaisemiseksi. Seuraavat viisi työkalua voivat auttaa sinua kirjoittamaan helppokäyttöisempiä Vue.js-sovelluksia:

WAVE on kokoelma työkaluja, joiden avulla kehittäjät voivat automaattisesti testata sovelluksiaan esteettömyysongelmien varalta. Vaikka WAVE ei korvaa loppukäyttäjien testausta, se voi silti auttaa sinua löytämään monia esteettömyysongelmia.

WAVE tarjoaa verkkosivuillaan online-testaustyökalun. Se tarjoaa myös selainlaajennuksia ja useita muita työkaluja, jotka auttavat monien verkkosovellusten esteettömyystestauksessa.

Monet vihjeet, joita verkkosovellukset käyttävät viestiessään toiminnasta, kuten edistymispalkit ja latausilmaisimet, ovat puhtaasti visuaalisia. Näkövammaiset tai näytönlukuohjelmia käyttävät ihmiset eivät voi havaita niitä.

Vue-announcer on kirjasto, jonka avulla voit ilmoittaa muutoksista Vue.js-sovelluksissasi tavalla, jota kaikki voivat käyttää.

Vue-skip-to on kirjasto, joka on luotu mahdollistamaan näytönlukuohjelmaa käyttävien ihmisten siirtyminen suoraan Vue.js-sovelluksen pääsisältöön. Tämä on hyödyllistä, koska monissa verkkosovelluksissa on navigointilinkit ja muut elementit ennen pääsisältöä. Joidenkin käyttäjien on helppo ohittaa nämä, mutta niiden käyttäminen näytönlukuohjelman kanssa voi olla hankalaa ja turhauttavaa.

ESLint on työkalu, joka auttaa sinua kirjoittamaan paremman JavaScriptin analysoimalla koodisi ja tarkistamalla sen virheiden varalta.

Tämä työkalu on ESLint-laajennus, jonka avulla voit varmistaa, että Vue.js-komponenttien rakenne on esteettömyyssääntöjen mukainen.

Asennettaessa tämä laajennus analysoi kaikki Vue.js-tiedostot ja osoittaa ongelmallisen koodin. Voit sitten maksimoida käytettävyyden kirjoittaessasi sovelluksiasi sen sijaan, että joutuisit vaihtamaan koodia testausvaiheen jälkeen.

Suurin esteettömyysongelmien lähde sovelluksissa on käyttökelvottomien komponenttikirjastojen käyttö. Vuetensils on Vue.js-komponenttien kirjasto.

Nämä komponentit on optimoitu pienimpään kokoon, maksimaaliseen saavutettavuuteen, helppokäyttöisyyteen ja helppoon muotoiluun. Voit säästää aikaa ja käyttää näitä valmiiksi rakennettuja komponentteja vahingoittamatta sovellusten käytettävyyttä.

Vue.js: n saavutettavuus on helppoa

Esteettömyys tarkoittaa sen varmistamista, että kaikki voivat käyttää sovellustasi missä tahansa kontekstissa. Käytettävyyden maksimointi on tärkeää, jotta mahdollisimman monet ihmiset voivat käyttää sovellusta.

Kehittäjät tekevät usein yleisiä, mutta estettävissä olevia esteettömyysvirheitä rakentaessaan sovelluksiaan. Yleisiä ongelmia ovat muun kuin semanttisen HTML: n testaamatta jättäminen ja kirjoittaminen. Mutta muutaman työkalun avulla on helpompi kirjoittaa erittäin helppokäyttöisiä Vue.js-sovelluksia.