Pristupačne komponente korisničkog sučelja za web

Da bi bili dostupni, komponente UI moraju raditi na više uređaja s različitim veličinama zaslona i različitim vrstama unosa. Štoviše, komponente bi trebale koristiti široka skupina korisnika, uključujući one s invaliditetom.

Prilikom oblikovanja pristupačnosti potrebno je razmotriti četiri ključna područja invaliditeta: vid, sluh, pokretljivost i kognicija.

Problemi s vidom mogu se kretati od nemogućnosti razlikovanja boja do uopće ne vida.

  • Osigurajte da je zadovoljen minimalni prag omjera kontrasta za tekstualni sadržaj.
  • Izbjegavajte komuniciranje informacija koristeći isključivo boju i osigurajte da se sav tekst može mijenjati.
  • Osigurajte da se sve komponente korisničkog sučelja mogu upotrebljavati s pomoćnim tehnologijama poput čitača zaslona, ​​lupa i brajevih zaslona. To uključuje osiguranje da su komponente UI označene tako da API-ji pristupačnosti mogu programski odrediti ulogu, stanje, vrijednost i naslov bilo kojeg elementa.

Problemi sa sluhom znače da korisnik može imati problema sa zvukom koji se emitira sa stranice.

  • Učinite sadržaj razumljivim koristeći tekstualne alternative za sav sadržaj koji nije strogo tekst.
  • Obavezno provjerite jesu li vaše UI komponente i dalje funkcionalne bez zvuka.

Problemi s mobilnošću mogu uključivati ​​nemogućnost upravljanja mišem, tipkovnicom ili dodirnim zaslonom.

  • Učinite sadržaj vaših komponenata korisničkog sučelja funkcionalno dostupnim s tipkovnice za sve radnje za koje bi inače koristio miš.
  • Osigurajte da su komponente UI ispravno označene za pomoćne tehnologije; ovi korisnici mogu koristiti tehnologije kao što su softver za upravljanje glasom i fizičke kontrole preklopnika, koje imaju tendenciju da koriste iste API-je kao i druge pomoćne tehnologije poput čitača zaslona.

Kognitivni problemi znače da korisnik može zahtijevati pomoćne tehnologije kako bi im pomogao u čitanju teksta, pa je važno osigurati postojanje alternativa za tekst.

  • Izbjegavajte da se vizualna prezentacija ponavlja ili treperi jer to kod nekih korisnika može uzrokovati probleme.
  • Izbjegavajte interakcije temeljene na vremenu.

To može izgledati kao puno osnova koje treba pokriti, ali proći ćemo kroz postupak za procjenu i poboljšanje pristupačnosti vaše UI komponente.

Je li dostupna vaša korisnička sučelja?

Sažetak (tl; dr)

Prilikom revizije vaše prijave za pristupačnost zapitajte se:

  • Možete li koristiti svoj UI komponentu samo s tipkovnicom? Uspijeva li se usredotočiti i izbjegava zamke fokusa? Može li reagirati na odgovarajuće događaje na tipkovnici?
  • Možete li koristiti svoj UI komponentu s čitačem zaslona? Jeste li unijeli tekstualne alternative za bilo koje informacije koje su predstavljene vizualno? Jeste li dodali semantičke podatke pomoću ARIA?
  • Može li vaš UI komponenta raditi bez zvuka? Isključite zvučnike i prođite kroz slučajeve upotrebe.
  • Može li raditi bez boje? Osigurajte da vaše komponente UI može koristiti netko tko ne može vidjeti boje. Korisni alat za simuliranje sljepoće boja je Chrome proširenje pod nazivom SEE (isprobajte sva četiri oblika simulacije sljepoće u boji na raspolaganju). Možda će vam biti zanimljivo i Daltonize proširenje koje je na sličan način korisno.
  • Može li vaš UI komponenta raditi s načinom visokog kontrasta? Svi moderni operativni sustavi podržavaju način visokog kontrasta. High Contrast je Chrome dostupno proširenje koje vam ovdje mogu pomoći.

Nativne kontrole (kao što su i ) imaju preglednik ugrađen pristup. Fokusiraju se pomoću tipke tab, reagiraju na događaje na tipkovnici (poput Enter, razmaka i tipke sa strelicama) i imaju semantičke uloge, stanja i svojstva koja koriste alati za pristup. Zadani stil također bi trebao zadovoljiti gore navedene zahtjeve za pristup.

Komponente prilagođenog korisničkog sučelja (s izuzetkom komponenti koje proširuju izvorne elemente poput ) nemaju ugrađenu funkcionalnost, uključujući i pristup, tako da to morate osigurati vi. Dobro mjesto za započinjanje implementacije pristupačnosti je usporedba komponenata s analognim izvornim elementom (ili kombinacijom nekoliko nativnih elemenata, ovisno o tome koliko je komponenta složena).

Slijedi popis pitanja koja možete postaviti sebi kada pokušavate učiniti da komponente UI-a postanu pristupačnije.

Može li se vaš UI komponent koristiti samo s tipkovnicom?

U idealnom slučaju, osigurajte da se sva funkcionalnost u vašem korisničkom sučelju može postići tipkovnicom. Tijekom svog UX dizajna razmislite o tome kako biste koristili svoj element samo s tipkovnicom, i smislite dosljedan skup interakcija tipkovnice.

Prvo, osigurajte da imate razumnu ciljnu fokusu za svaku komponentu. Na primjer, složena komponenta poput izbornika može biti jedan cilj fokusiranja unutar stranice, ali tada bi trebala upravljati fokusom unutar sebe tako da aktivna stavka izbornika uvijek preuzme fokus.

Upravljanje fokusom u složenom elementu

Korištenje tabindexa

Atribut tabindex omogućuje fokusiranje elemenata / korisničkih sučelja pomoću tipkovnice. Korisnici koji koriste samo tipkovnicu i pomoćne tehnologije moraju biti u mogućnosti fokusirati tipkovnicu na elemente kako bi mogli komunicirati s njima. Nativni interaktivni elementi su implicitno fokusirani, pa im ne treba atribut tabindex, osim ako ne želimo promijeniti njihov položaj u redoslijedu kartica.

Postoje tri vrste vrijednosti tabindeksa:

  • tabindex = "0" je najčešći i element će smjestiti u red "prirodnih" kartica (definiran redoslijedom DOM).
  • tabindex vrijednost veća od 0 stavit će element u ručni redoslijed kartica - svi elementi na stranici s pozitivnom tabindex vrijednosti posjetit će se u numeričkom redoslijedu prije elemenata u prirodnom redoslijedu kartica.
  • tabindex vrijednost jednaka -1 uzrokovat će da se element može programsko fokusirati, ali ne redoslijedom kartica.

Za prilagođene komponente korisničkog sučelja uvijek upotrijebite vrijednosti tabindex-a 0 ili -1, jer nećete moći odrediti redoslijed elemenata na određenoj stranici prije vremena - čak i ako to učinimo, oni mogu biti podložni promjenama. Tabindeks vrijednost -1 osobito je korisna za upravljanje fokusom unutar složenih komponenti kako je gore opisano.

Osigurajte da je fokus uvijek vidljiv, bilo da li dopuštate zadani stil zvona ili primjenjujete vidljivi stil fokusiranja. Ne zaboravite da ne zarobljavate korisnika tipkovnice - fokus bi se trebao moći odmaknuti od elementa koji koristi samo tipkovnicu.

Možda će vas zanimati i roving tabindex ili aria-activedescendantni pristupi, pokriveni na MDN-u.

Korištenje automatskog fokusiranja

Atribut HTML automatskog fokusiranja omogućava autoru da precizira da bi se određeni element automatski trebao fokusirati prilikom učitavanja stranice. Već je podržana na svim kontrolama web obrasca, uključujući . Da biste autofokusirali elemente u vlastitim prilagođenim komponentama korisničkog sučelja, nazovite metodu fokus () podržanu na svim HTML elementima na koje je moguće fokusirati (npr. Document.getElementById ('myButton'). Fokus ()).

Dodavanje interakcije s tipkovnicom

Jednom kada je vaša komponenta korisničkog sučelja fokusirana, pokušajte pružiti dobru priču o interakciji na tipkovnici kada je komponenta fokusirana, rukovanjem odgovarajućim događajima na tipkovnici - na primjer, dopustite korisniku da koristi tipke sa strelicama za odabir opcija izbornika i razmak ili uđite da biste aktivirali gumbe. Vodič za oblikovanje modela ARIA ovdje sadrži neke smjernice.

Na kraju, osigurajte otkrivanje prečaca na tipkovnici. Na primjer, uobičajena je praksa da postoji legenda prečaca na tipkovnici (tekst na ekranu) da se korisnik obavijesti da prečaci postoje. Na primjer, "Pritisnite? za tipkovne prečace ”. Alternativno, nagovještaj da bi se takav alat mogao upotrijebiti za informiranje korisnika o postojećoj prečaci.

Važnost upravljanja fokusom ne može se umanjiti. Jedan primjer je navigacijska ladica. Ako dodate komponentu korisničkog sučelja na stranicu, trebate usmjeriti fokus na neki element unutar nje, a u suprotnom će korisnici morati pregledati cijelu stranicu da bi došli do nje. To može biti frustrirajuće iskustvo, pa svakako provjerite fokus svih komponenti koje se mogu kretati tipkovnicom na vašoj stranici.

Možete li koristiti svoj UI komponentu s čitačem zaslona?

Oko 1-2% korisnika koristit će čitač zaslona. Na kraju ovog članka nabrajamo nekoliko čitača zaslona koji su slobodni za upotrebu: pokušajte koristiti svoju komponentu s barem jednim od ovih čitača zaslona. Možete li odrediti sve važne podatke i komunicirati s komponentom koristeći samo čitač zaslona i tipkovnicu?

Sljedeća pitanja trebala bi vam pomoći u rješavanju pristupačnosti čitača zaslona:

Imaju li sve komponente i slike smislene alternative u tekstu?

Gdje god se informacije o imenu ili svrsi interaktivne komponente vizualno prenose, treba pružiti dostupnu alternativu za tekst.

Na primjer, ako komponenta korisničkog sučelja prikazuje samo ikonu poput ..

Ikona izbornika postavki

da biste naznačili da je izbornik postavki, potrebna mu je alternativna tekstualna alternativa, poput "postavki", koje prenose iste podatke. Ovisno o kontekstu, to može koristiti atribut alt, atribut aria-label, atribut aria-labelledby ili obični tekst u DOMU Sjene. Općenite tehničke savjete možete pronaći u WebAIM-ovoj kratkoj referenci.

Svaka komponenta korisničkog sučelja koja prikazuje sliku trebala bi osigurati mehanizam za alternativni tekst za tu sliku, analogan atributu alt.

Daju li vaše komponente semantičke informacije?

Pomoćna tehnologija prenosi semantičke informacije koje se inače izražavaju vidnim korisnicima vizualnim znakovima kao što su oblikovanje, stil pokazivača ili položaj. Izvorni elementi imaju ovaj semantički podatak ugrađen u preglednik, ali za prilagođene komponente trebate koristiti ARIA da biste im dodali te podatke.

U pravilu, svaka komponenta koja sluša događaj klika miša ili pokazivača miša ne bi trebala imati samo slušatelja događaja tipkovnice, već i ulogu ARIA-e i potencijalno stanja i atribute ARIA-e.

Na primjer, prilagođena korisnička sučelja može preuzeti ARIA ulogu klizača koji ima neke povezane atribute ARIA: aria-valuenow, aria-valuemin i aria-valuemax. Vezujući ove atribute za relevantna svojstva na vašoj prilagođenoj komponenti, možete omogućiti korisnicima pomoćne tehnologije da komuniciraju s elementom i promijene njegovu vrijednost, pa čak i uzrokovati da se vizualni prikaz elementa promijeni u skladu s tim.

Komponenta klizača raspona
 

Mogu li korisnici razumjeti sve bez oslanjanja na boju?

Boja se ne treba upotrebljavati kao jedino sredstvo prijenosa informacija, poput navođenja statusa, zahtjeva za odgovor ili razlikovanja vizualno prilagođene komponente. Na primjer, ako ste stvorili komponentu pomoću boje za razlikovanje između gustog, umjerenog i lakog prometa, također bi trebalo biti dostupno alternativno sredstvo za razlikovanje razine prometa: jedno rješenje bi moglo biti lebdjeti iznad elementa za prikaz informacija u obliku alata.

Postoji li dovoljan kontrast između teksta / slike i pozadine?

Bilo koji tekstualni sadržaj prikazan u vašoj komponenti treba zadovoljiti minimalnu (AA) kontrastnu traku. Razmislite o pružanju teme s visokim kontrastom koja zadovoljava višu traku (AAA), a također osigurajte da se mogu primijeniti listovi stilova korisničkih agenata ako korisnici zahtijevaju ekstremni kontrast ili različite boje. Možete koristiti ovaj alat za provjeru kontrasta u boji kao pomoć pri dizajniranju.

Je li pokretni ili treperi sadržaj u vašim komponentama zaustavljiv i siguran?

Sadržaj koji se kreće, pomiče ili trepće i traje duže od 5 sekundi, treba ga moći zaustaviti, zaustaviti ili sakriti. Općenito, pokušajte treptati ne više od tri puta u sekundi.

Alat za pristupačnost

Na raspolaganju je nekoliko alata koji vam mogu pomoći u uklanjanju pogrešaka u pristupu vaših vizualnih komponenti. To uključuje:

  • ax - automatizirano testiranje pristupačnosti za vaš okvir ili preglednik po izboru
  • Revizije dostupnosti svjetionika za Chrome pružaju korisne uvide za otkrivanje problema s pristupom.
Izvorna inspekcija pristupačnosti u DevTools
  • Tenon.io - koristan za testiranje uobičajenih problema s pristupačnošću. Tenon ima snažnu podršku integracije preko alata za izradu, preglednika (putem ekstenzija), pa čak i uređivača teksta.
  • Možete istražiti način na koji pomoćne tehnologije vide web sadržaj upotrebom inspektora pristupačnosti (Mac) ili Alatima za testiranje API-ja za Windows automatizaciju i AccProbe (Windows). Uz to možete vidjeti stablo pune pristupačnosti koje Chrome stvara navigacijom do chrome: // accessibility.
  • Najbolji način za testiranje podrške za čitanje zaslona na Macu je upotreba VoiceOver alata. Možete koristiti ⌘F5 za omogućavanje / onemogućavanje, Ctrl + Option ← → za kretanje kroz stranicu i Ctrl + Shift + Option + ↑ ↓ za pomicanje stabla gore / dolje. Za detaljnije upute pogledajte potpuni popis VoiceOver naredbi i popis VoiceOver web naredbi.
  • tota11y je koristan vizualizator za pitanja pomoćnih tehnologija koja je izgradila Khan akademija. To je skripta koja vašem dokumentu dodaje gumb koji aktivira nekoliko dodataka za napomenu na stvari poput nedovoljnog omjera kontrasta i drugih a11y kršenja
  • ally.js (Rodney Rehm) knjižnica je koja pokušava pojednostaviti dodavanje nekoliko značajki pristupačnosti vašoj aplikaciji. Pomaže pri ispitivanju DOM-a za sve fokusirane ili tablabilne elemente, usredotočuje se na određene pod-stabla DOM-a, pomaže u utvrđivanju načina na koji se fokus promijenio i dolazi s nekoliko drugih pomagača.
  • Na Windows-u je NVDA besplatni čitač zaslona s otvorenim kodom koji je u potpunosti dostupan i brzo dobiva na popularnosti. Međutim, imajte na umu da on ima puno strmiju krivulju učenja za promatrane korisnike od VoiceOver-a.
  • ChromeLens pomaže u razvoju za slabovidne osobe. Super je podrška za vizualizaciju navigacijskih staza tipkovnice http://chromelens.xyz/
ChromeLens DevTools proširenje, s više mogućnosti za oponašanje različitih oblika sljepoće, praćenje kartica i reviziju pristupačnosti.
  • ChromeVox je čitač zaslona koji je dostupan kao Chrome proširenje i ugrađen u ChromeOS uređaje.

Napomena: Velika zahvalnost upućuje Alice Boxhall i Robu Dodsonu za pomoć u članku.

PS: Ako vas zanima što više možete saznati, o osnovama pristupačnosti možete saznati na ovom besplatnom tečaju Udacity https://bit.ly/web-a11y