Käytettävyys ja testaus

Esteettömyyden arvo

Mitä jos kerroin web-suunnittelijoille, että siellä on ihmisiä, jotka saattavat käydä sivustossasi, jotka eivät välitä siitä, miltä näyttää?

Näkövammaiset liikkuvat verkossa samoista syistä, joita me kaikki teemme, löytää tietoja, tehdä ostoksia ja tehdä lukemattomia tärkeitä tehtäviä web-pohjaisten sovellusten avulla. Mutta näkövammaiset kokevat verkon eri tavoin ja meidän on oltava herkkiä heidän tarpeilleen, kun suunnittelemme ja rakennamme verkkosivustoja.

Yhdysvaltain väestönlaskennan toimiston sekä YK: n ja Maailmanpankin mukaan yli 47 miljoonaa amerikkalaista ja jopa 650 miljoonaa ihmistä maailmanlaajuisesti ovat jonkinlaista vammaisuutta. Jokaisen suunnittujen sivustojen kävijöiden on pystyttävä löytämään etsimäsi tiedot ja suorittamaan tehtävät, jotka he aikovat suorittaa riippumatta siitä, mitä verkkosivu tai sovellus näyttää. Web-sivun tai sovelluksen luomiseen liittyvät monet tekijät voivat vaikuttaa esteettömyyteen.

Sinä otat sinisen pillerin - tarina päättyy, heräät sängyssäsi ja uskovat mitä haluatte uskoa. Otat punaisen pillerin - pysyt Wonderlandissa, ja minä näytän kuinka syvä kanin reikä menee. - Matriisi

Oletko valmis menemään alaspäin esteettömän kaniin pidossa minun kanssani? Meidän on sukeltava verkkosivujen teknisiin näkökohtiin. HTML on verkkosivun luuranko, kun taas CSS, JavaScript ja kuvat parantavat HTML: ää. Usein näkövammaiset ihmiset kaipaavat kaikkia näitä parannuksia. Vaikka esteettömyys on pääosin kehittäjä, joskus tekniset vaatimukset, jotka ovat tarpeen esteettömyyden säilyttämiseksi tai parantamiseksi, vaikuttavat verkkosivuston ulkoasuun. Tämä tarkoittaa, että suunnittelun, kopioinnin, käyttökokemuksen ja kehityksen kaikkien on toimittava yhteistyössä varmistaakseen, että navigointiohjaimet, lomakkeet, painikkeet, otsikot, painikkeet, linkit ja muut ovat käytettävissä.

suunnittelu, kopiointi, käyttökokemus ja kehittäminen tarvitsevat yhteistyötä varmistaakseen, että navigointiohjaimet, lomakkeet, painikkeet, otsikot, painikkeet, linkit ja muut ovat käytettävissä

Ihmiset, jotka ovat sokeita, näkövammaisia, lukutaidottomia tai oppimisen vajaakuntoiset, käyttävät avustavia tekniikoita navigoimaan Internetissä. Seulanlukijat ovat yleisimpiä web-apuvälineitä, ja nämä ohjelmat yrittävät tulkita sitä, mitä verkkosivustossa näytetään ja välittää käyttäjälle, tavallisesti tekstin muuntamisen kautta puheeksi, mutta joskus pistenäytön tulostuslaitteella. Näytön suurennuslaseja käytetään usein myös näytönlukijan yhteydessä. Tyypillisesti näytönlukija yrittää jäsentää HTML-tiedoston HTML-tiedoston yläosasta pohjaan ja puhua käyttäjälle relevantteja elementtejä. Ihannetapauksessa näytönlukija antaa käyttäjälle mahdollisuuden siirtää virtuaalikohdistimen alas sivulle lomakekenttien täyttämiseksi, napsauttamalla painikkeita ja tekemällä valintoja pudotusvalikoista ja muista kontrolleista.

Jos haluat testata perusteellisesti esteettömyyttä, sinun on varmistettava, että verkkosivusto tai sovellus toimii hyvin jokaisessa käytettävissä olevasta monista näytönlukijoista. Jokaisella alustalla on useita suosittuja ilmaisia ​​ja / tai avoimen lähdekoodin lukulaitteita JAWS , ja NVDA . Microsoftin käyttäjät voivat käyttää NVDA: ta ja Apple-tietokoneita ja iOS-laitteita Selostus joka voi suurentaa näppäimistön hallintalaitteita ja lukea näytön sisältöä, ja Unix-laitteille on olemassa orca . Chrome-selaimessa on kaksi apuvälineprotokollaa, ChromeVox näytön lukemiseen ja ChromeVis suurennusta varten.

Suurin osa web-esteettömyysongelmista ilmenee, kun näytönlukijan virtuaalikursori joutuu heikosti suunniteltuun muotoon tai siirtyy tärkeän ohjauksen tai tärkeän tekstitiedon osan päälle. Sivustojen todenmukaisuuden varmistaminen on samanlainen kuin selaimen testaus, koska jokaisella näytönlukijalla on erilaiset vaatimukset ja rajoitukset. Siksi kunkin näytönlukijan käyttäytymisen ymmärtäminen on tärkeää. Erilaisten näyttölukijoiden tarpeet voidaan sijoittaa lisäämällä useita erityisiä HTML-tageja sivun tärkeisiin osioihin.

Moderni dynaaminen web-käyttöliittymä voi olla erityisen ongelmallinen esteettömyyden vuoksi, koska sivuille dynaamisesti lisätään tärkeitä elementtejä JavaScriptin avulla. Mukautetut avattavat valikot, modaalit, työkalupisteet, harmonisointisisältö ja dynaamiset virheet ja ilmoitukset voivat olla haastavia, jotta näytönlukijan käyttäjät voivat ymmärtää HTML-koodin, JavaScriptin ja näytönlukijan välisen viestinnän erittelyn. Native HTML ja JavaScript eivät ole millään tavoin viestimään sivun (Document Object Model) päivityksiä näytönlukijoille. Kehittäjien on siirrettävä "tarkennus" (näytönlukijan virtuaalinen kohdistin) muuttujan käyttöliittymän osaan. Kun modaali avaa kehittäjät, täytyy asettaa käyttäjän keskittyä tähän modaliin, jotta näytönlukija voi lukea kyseisen sisällön ja käyttäjä voi ymmärtää ja olla vuorovaikutuksessa sen kanssa.

WAI-ARIA voi silittää aukot, mitä sivun raaka-HTML sanoo ja mitä näkevät käyttäjät näkevät

Tämä tapahtuu käyttämällä erityisiä HTML-tunnisteita WAI-ARIA tunnisteita. WAI-ARIA (Accessible Rich Internet Applications) voi selata aukkoja sivun raaka-HTML: n mukaan ja mitkä näkevät käyttäjät näkevät tarjoamalla standardoidun tavan kehittäjille lisätä ylimääräistä merkitystä tilojen, ominaisuuksien, suhteiden, rooleihin ja eläville alueille, jotka näytönlukija muuten ei ymmärrä.   Kehittäjät voivat käyttää ilmatasoa selittämään näytönlukuja kunkin sivun otsikon hierarkiaan. Ilmaketjun kehittäjät voivat lisätä otsikon kuvaamaan erillisen elementin tarkoitusta sivulla. Tämä auttaa kehittäjiä luomaan selkeät suhteet eri elementtien välillä. Kehittäjät voivat myös kiinnittää huomiota tärkeisiin kontrolleihin merkitsemällä ne aero-roolimerkeillä, esimerkiksi avattavasta valikkopainikkeesta tulee merkintä seuraavalla tagilla: Aria-on ponnahdusikkuna: true.

Katso kynä Helppokäyttöiset välilehdet esittäjä (t): Scott Vinkle ( @svinkle ) päällä CodePen .

Yllä olevassa esimerkissä HTML-välilehdet luodaan käyttämällä järjestämättömää luetteloa, jossa on luokat jokaisessa luettelokohteessa. JQuery ottaa napsautustilanteet napsauttamalla välilehteä ja lisää valitulle välilehdelle 'ajettu': 'true' ja 'tab-widget__tab-content-active' ja piilottaa muut välilehdet lisäämällä 'air-selected': ' vääriä "jäljellä oleviin välilehtiin. Rivillä 127 asetetaan välilehtien alkuasetukset, ja yhdessä nämä katkelmat auttavat näytönlukijoita tunnistamaan, mikä välilehti on näkyvissä. JavaScript-linjalla 35 on myös lisätty näppäimistötuki välilehdille. Muut tiedostot käsittelevät klikkaus- ja näppäimistötapahtumia, jotta jQuery voi lisätä "rooli "- ja" esitys "-attribuutit valitulle välilehdelle.

Aria-tagit voivat auttaa näytönlukijoita tulkitsemaan mukautettuja säätimiä radiopainikkeina, kun mukautetun ohjauksen merkintä on: Aria-rooli = valintanappi. Kun sovelluksessa on hiekkalaatikkoalue, joka välittää palautetta tai päivityksiä käyttäjälle, se voidaan merkitä elävän alueen tunnuksella: Aria-live. Tämä varmistaa, että kun tämän elementin teksti muuttuu, se puhutaan automaattisesti käyttäjälle näytönlukijan kautta.

Sivun päivitykset ovat keskeinen osa WWW-näytön lukulaitteille, koska kun sivun päivitys tapahtuu, se ilmoittaa näytönlukijalle, että sen pitäisi ilmoittaa uudelle sivulle käyttäjälle ja lukea sivun sisältö uudelleen käyttäjälle. Tämä tarkoittaa, että yhden sivun verkkosovellukset asettavat esteettömyyden erityishaasteita. Yhden sivun sovelluksessa ei koko sivua päivittyy, joten näytönlukijaa ja siksi käyttäjää ei ole varoitettu päivitetystä sisällöstä. Tuloksena on, että käyttäjä ei saa palautetta toimistaan. Paras ratkaisu on jäljitellä kotisivun päivitystapaa. Päivitä sivun otsikko ja päivitä se näkyviin käyttäjälle.

WAI-ARIA: n täydelliset erittelyt säilytetään W3: ssa kuten HTML: n eritelmät Web Accessibility Initiative (WAI) mukaan, mutta joskus ohjeet voivat olla hyödyllisempää kuin tekniset tiedot, joten tässä on muutamia suunnittelijoiden yleisiä ohjeita:

  • Varmista, että tekstin ja taustakuvan välillä on näkyvä kontrasti.
  • älä käytä väriä yksin tiedon välittämiseen;
  • anna verkkosivustosi selkeä ja johdonmukainen navigointi;
  • Varmista, että lomakkeen elementit sisältävät selkeästi merkinnät;
  • Varmista, että palauteelementit, kuten virheilmoitukset, voidaan helposti tunnistaa.
  • käytä otsikoita ja välimatka ryhmään liittyvään sisältöön;
  • tarjota vaihtoehtoista tekstiä kuville;
  • harkitse sivustosi suunnittelua niin, että kaikki toiminnot ovat käytettävissä näppäimistön kautta.

On olemassa useita yksinkertaisia ​​päätöksiä, joita voit tehdä, kun kehität verkkosivuja, jotka tekevät verkkosivustosta helpompaa joutumatta liian syvälle erityisiin esteettömyysmerkintöihin tai näytönlukijan testauksiin. Varmistaessasi, että HTML välittää merkitystensä rakenteensa avulla, näytönlukuohjelmat auttavat käsittelemään tietoja samalla tavalla kuin se näkyy sivulle nähtävien käyttäjien kannalta. Tämä on tärkeää käyttäjille, jotka käyttävät suurennuslaseja näytönlukijan yhteydessä.

Käyttämällä asianmukaista HTML-merkintää otsikoissa, luetteloissa, taulukoissa ja muissa elementeissä näytönlukija voi luokitella sivun rakenteen käyttäjälle tutulla tavalla. Saat enemmän mukana olevia ulkoasuja HTML5 tarjoaa lisää elementtejä, kuten