Kako opisati složene dizajne za korisnike s invaliditetom

Vi ste programer koji je upravo dobio složenu specifikaciju dizajna. Znate da dizajni podržavaju pristupačnost jer je vaš UX tim prije nekoliko mjeseci pročitao Medium post o dostupnom dizajnu. Na vama je samo da izgradite pristupačno iskustvo, ali gdje treba započeti?

Postoji WCAG 2.0, koji se široko uvažava kao "istina", jer se odnosi na međunarodne standarde pristupačnosti. Postoji i WAI-ARIA specifikacija koja je važan dio alata za razvojne programere usmjerenih na pristupačnost. Vraćajući se vremenu, postoji standard američke savezne vlade, članak 508. Zakona o rehabilitaciji.

Iako nije poznato po trajnoj važnosti, standardi tehničke dostupnosti u odjeljku 508. sadrže jedan vrlo mudri prijedlog. Kaže da,

„… Dovoljnim informacijama o elementu korisničkog sučelja, uključujući identitet, rad i stanje elementa, bit će dostupne pomoćne tehnologije.“

Izvorno napisane za softver, ove su riječi danas još relevantnije s obzirom na rasprostranjenost internetskih aplikacija. Oni opisuju vrstu informacija koje korisnici s invaliditetom trebaju kako bi uspješno dovršili zadatak. To može biti slijepi korisnik s čitačem zaslona, ​​korisnik unosa glasa s tjelesnim invaliditetom ili bilo koji broj drugih vrsta korisnika s različitim pomoćnim tehnologijama.

Osnovna osnova pristupa bilo kojoj interakciji s tipkovnicom i za korisnike čitača zaslona svodi se na pružanje tri osnovna podatka: identitet, rad i stanje.

Korisnici koji komuniciraju s elementom koji je osnovni kao potvrdni okvir, ili složenim kao iskustvo povlačenja i ispusta, moraju razmotriti ova tri pitanja:

  1. Identitet: S čime komuniciram?
  2. Postupak: Kako da koristim ovu stvar?
  3. Država: Kakvo je trenutno stanje ove stvari?

Bliži pogled na potvrdne okvire

Viđenom korisniku daju se mnogi vizualni znakovi vezani za identitet, rad i stanje. Pogledajmo jednostavni potvrdni okvir kao primjer.

Potvrdni okvir s naljepnicom

Kad vidim kvadrat pokraj riječi "Prihvaćam ove uvjete i odredbe", prepoznao sam potvrdni okvir.

Isti potvrdni okvir s mišem spreman za klik.

Znam kako upravljati kvačicom klikom na kvadrat. Ako to učinite, prebacit ćemo ga sa označenog na neprovjereno.

Potvrđeni potvrdni okvir s naljepnicom

Ako vidim kvačicu unutar tog trga, znam da je njegov status "označen".

Kako bi slijepi korisnik mogao dobiti ove informacije?

„Slažem se s ovim uvjetima i odredbama. Potvrdni okvir, neoznačeno. Pritisnite razmaknicu za provjeru. "

Ako čitač zaslona slijepo pročita korisnika, pročitaju mu tri važna podatka.

  1. Identitet objekta: potvrdni okvir za prijavu slažem li se ili ne
  2. Stanje: neprovjereno
  3. Operacija: pritiskom na razmaknicu prebacit ćete stanje

Imajući to u vidu, razmotrimo tri metode, od najpoželjnije do najmanje poželjne, za pružanje identiteta, rada i stanja do pomoćne tehnologije: korištenje izvornih kontrola, korištenje ARIA i, kao posljednje sredstvo, pametno skrivanje teksta i regija uživo.

Native Control

Native kontrole kao što su kontrole oblika i gumbi uvijek će biti najbolja opcija. U gornjem primjeru pravi je potvrdni okvir idealan, jer radi sav posao za vas. Ne morate kreirati operaciju pomoću JavaScripta, potvrdni okvir već identificira sebe i stanje, a osim toga, ljudi ga znaju koristiti.

Za složenije interakcije, poput povuci i ispusti, razmisli može li se izvorni element upotrijebiti iza scene. Razmislite o promjeni veličine širine stupaca u tablici:

Povucite i ispustite za promjenu veličine širine stupca

Unos klizača ili raspona savršen je izvorni ekvivalent takvom ponašanju i pruža vlastiti identitet, rad i stanje.

Klizač dometa

To se može vizualno sakriti pomoću CSS-a, dok je i dalje dostupno korisnicima čitača zaslona. Sinkronizirajte njegovu vrijednost sa širinom stupca i slijepi korisnik stupa u interakciju s poznatom kontrolom obrasca. Vidljivi korisnik i dalje će se povlačiti i spuštati kako se očekuje.

WAI-ARIA

Na mjestima gdje uporaba nativne kontrole nije moguća, slijedite najbolje postupke ARIA (Pristupačne bogate internetske aplikacije) za uobičajene obrasce dizajna, kao što su izbornici, dijalozi i automatska dovršavanja.

Ove su upute napisane tako da će se obrasci korisničkog sučelja koji nisu izvorno dostupni u HTML-u i dalje ispravno identificirati korisnicima pomoćne tehnologije.

Uzmimo za primjer standardni element odabira:

Osnovni odabirni element.

Ovo je izvorno dostupan element. Savršeno je za upotrebu u obrascima, za odabir opcije s popisa. Oni čak mogu udvostručiti kao izbornici. Nažalost, oni su "ružni" u očima mnogih dizajnerskih timova i veoma ih je teško oblikovati i biti dosljedni u svim preglednicima. Zbog toga se njihova upotreba široko odbacuje u modernim web aplikacijama. Umjesto toga, ljudi stvaraju vlastite padajuće izbornike.

Izbornik izgrađen s ARIA-om

Ako samostalno sučelje izrađujete od nule, vrlo je važno upotrijebiti odgovarajuću oznaku, pružiti odgovarajuće ponašanje tipkovnice i uključiti, kao i ažurirati atribute ARIA. To je jedini način pružanja ispravnog identiteta, rada i stanja asistentima tehnoloških korisnika.

Regije uživo i skriveni tekst

Ako nema prirodnih elemenata onog što gradite i ne postoji ARIA smjernica, morate namjerno pružiti informacije koristeći kombinaciju tehnika.

  • koji je vizualno skriven pomoću CSS-a, ali ga i dalje čitaju korisnici čitača zaslona
  • Regija "aria-live"
  • JavaScript metoda za ažuriranje tekstualnog sadržaja ove regije

Kada se tekst doda u regiju uživo, on se postavlja izravno u red čitača zaslona i govori njihovim korisnicima. Vizualno sakrivajući ovu regiju, stvaramo metodu za neposrednu komunikaciju s korisnicima čitača zaslona.

Ako gradite složeno korisničko sučelje, kao što je popis za sortiranje koji koristi drag and drop, ove su metode nužne.

Povucite i ispustite da biste promijenili redoslijed popisa.

Da biste prepoznali povlačenje i ispuštanje, pomoću aria-opisani dodajte skriveni tekst svakoj stavci popisa koji kaže: "Pritisnite razmaknicu da biste preuzeli ovu stavku." To će osigurati identitet. Kad korisnik zgrabi stavku, osigurati rad i stanje stavljanjem teksta u područje uživo:

"{Ime predmeta} je zgrabljeno, upotrijebite tipke sa strelicama za promjenu redoslijeda, razmaknicu da biste ispalili. Bijeg odustati. Trenutačni položaj na popisu, 1 od 7 ”.

Možete unijeti i konačni status nakon što predmet padne:

„{Item name} je odustao. Konačna pozicija na popisu, 4 od 7 ”.

Da ponovim, ovu metodu treba koristiti samo nakon što se isključe izvorni elementi i ARIA određene komponente ili ne postoje ili ne rade. Dok sami dajete identitet, rad i stanje, testiranje korisnika bit će potrebno kako bi se utvrdio najbolji način za priopćavanje tih podataka svojim korisnicima.

Sada uzmite one dostupne dizajne i stvorite doživljaj koji može uživati ​​za sve korisnike, uključujući one s invaliditetom. Kroz ove metode moći ćete pružiti identitet, rad i podatke o stanju svim svojim korisnicima, bez obzira koliko jednostavna ili složena je interakcija.

Jesse je glavni stručnjak za pristupačnost u Salesforceu. Pošaljite mu tweet @jessehausler, njegov je telefon usamljen.

Pratite nas na @SalesforceUX.
Želite raditi s nama? Kontaktirajte uxcareers@salesforce.com
Pogledajte sustav za dizajn rasvjete Salesforce