Kā aprakstīt sarežģītus dizainus lietotājiem ar īpašām vajadzībām

Jūs esat izstrādātājs, kuram tikko tika nodota sarežģīta dizaina specifikācija. Jūs zināt, ka dizainparaugi atbalsta piekļuvi, jo jūsu UX komanda dažus mēnešus atpakaļ lasīja vidēju ierakstu par pieejamu dizainu. Tagad jums ir jāizveido pieejama pieeja, taču kur sākt?

Ir WCAG 2.0, kuru plaši ievēro kā “patiesību”, jo tas attiecas uz starptautiskajiem pieejamības standartiem. Ir arī WAI-ARIA specifikācija, kas ir svarīga jebkura uz piekļuvi orientēta izstrādātāja rīkkopa sastāvdaļa. Laika gaitā ir ASV federālās valdības standarts, Rehabilitācijas likuma 508. pants.

Lai arī nav zināms, vai tie ir ilgstoši nozīmīgi, 508. sadaļā norādītie tehniskās pieejamības standarti satur vienu ļoti gudru ieteikumu. Tas nosaka, ka

“… Palīgtehnoloģijai ir jābūt pieejamai pietiekamai informācijai par lietotāja interfeisa elementu, ieskaitot elementa identitāti, darbību un stāvokli.”

Sākotnēji tie tika rakstīti programmatūrai, un šie vārdi mūsdienās ir vēl nozīmīgāki, ņemot vērā tīmekļa lietojumprogrammu izplatību. Tie apraksta, kāda veida informācija lietotājiem ar invaliditāti nepieciešama, lai veiksmīgi izpildītu uzdevumu. Tas var būt neredzīgs lietotājs ar ekrāna lasītāju, balss ievades lietotājs ar fizisku invaliditāti vai jebkurš cits lietotāju skaits ar dažādām palīgtehnoloģijām.

Pamata pamati tam, lai jebkura mijiedarbība būtu pieejama gan ar tastatūru, gan ekrāna lasītāja lietotājiem, ir trīs pamata informācijas sniegšana: identitāte, darbība un stāvoklis.

Lietotājiem, kas mijiedarbojas ar elementu, kas ir vienkāršs kā izvēles rūtiņa, vai tik sarežģīts kā vilkšanas un nomešanas pieredze, jāņem vērā šie trīs jautājumi:

  1. Identitāte: ar ko es mijiedarbojos?
  2. Darbība: kā es varu izmantot šo lietu?
  3. Valsts: Kāds ir šīs lietas pašreizējais statuss?

Ciešāk pārbaudiet rūtiņas

Redzamam lietotājam tiek dotas daudzas vizuālas norādes, kas saistītas ar identitāti, darbību un stāvokli. Kā piemēru apskatīsim vienkāršu izvēles rūtiņu.

Pārbaudiet izvēles rūtiņu ar uzrakstu “Es piekrītu noteikumiem un nosacījumiem”.

Kad es redzu kvadrātu blakus vārdiem “Es piekrītu šiem noteikumiem un nosacījumiem”, es esmu identificējis izvēles rūtiņu.

Tā pati izvēles rūtiņa ar peli, kas gatava noklikšķināt.

Es zinu, kā darbināt izvēles rūtiņu, noklikšķinot uz kvadrāta. To darot, tas tiks pārslēgts no atzīmētas uz neatzīmētu.

Atzīmēta izvēles rūtiņa ar etiķeti “Es piekrītu noteikumiem un nosacījumiem”.

Ja šī laukuma iekšpusē redzu atzīmi, es zinu, ka tā statuss ir “pārbaudīts”.

Kā neredzīgais lietotājs iegūtu šo informāciju?

“Es piekrītu šiem noteikumiem. Izvēles rūtiņa, nav atzīmēta. Nospiediet atstarpes taustiņu, lai pārbaudītu. ”

Ja ekrāna lasītājs to nolasa neredzīgajam lietotājam, viņam tiek sniegta trīs svarīga informācija.

  1. Objekta identitāte: izvēles rūtiņa, lai paziņotu, vai piekrītu vai nepiekrītu
  2. Stāvoklis: nav pārbaudīts
  3. Darbība: nospiežot atstarpes taustiņu, tiek pārslēgts stāvoklis

Paturot to prātā, apsvērsim trīs metodes, sākot no visizdevīgākajām līdz mazāk vēlamajām, lai nodrošinātu identitāti, darbību un stāvokli palīgtehnoloģijai: izmantojot vietējās vadīklas, izmantojot ARIA un kā pēdējo līdzekli, lai kļūtu gudrāks ar slēptu tekstu un tiešajiem reģioniem.

Vietējā kontrole

Vietējās vadīklas, piemēram, veidlapu vadīklas un pogas, vienmēr būs labākais risinājums. Iepriekš minētajā piemērā īsta izvēles rūtiņa ir ideāla, jo tā visu darbu veic jūsu labā. Jums operācija nav jāizveido, izmantojot JavaScript, izvēles rūtiņa jau identificē sevi un tās stāvokli, un turklāt cilvēki zina, kā tās izmantot.

Sarežģītākām mijiedarbībām, piemēram, velciet un nometiet, apsveriet, vai vietējos elementus var izmantot aiz ainas. Apsveriet tabulas kolonnu platuma mainīšanu:

Velciet un nometiet, lai mainītu kolonnas platumu

Bīdāmais vai diapazona ievads ir ideāls šīs darbības dabiskais ekvivalents, un tas nodrošina savu identitāti, darbību un stāvokli.

Diapazona slīdnis

To var vizuāli paslēpt, izmantojot CSS, vienlaikus atstājot to pieejamu ekrāna lasītāja lietotājiem. Sinhronizējiet tās vērtību ar kolonnas platumu, un neredzīgais lietotājs var mijiedarboties ar pazīstamu formas vadību. Redzēts lietotājs joprojām vilksies un nometīs, kā paredzēts.

WAI-ARIA

Vietās, kur nav iespējams izmantot vietējo vadību, ievērojiet ARIA (piekļuves bagātinātā interneta lietojumprogrammas) paraugpraksi, lai iegūtu parastos dizaina modeļus, piemēram, izvēlnes, dialogus un automātiskās pabeigšanas.

Šīs vadlīnijas ir sastādītas tā, lai lietotāja saskarnes modeļi, kas sākotnēji nav pieejami HTML, joprojām pareizi identificētu sevi palīgtehnoloģiju lietotājiem.

Pieņemsim, piemēram, standarta izvēles elementu:

Pamata izvēles elements.

Tas ir dabiski pieejams elements. Tas ir lieliski piemērots izmantošanai formās, lai izvēlētos opciju no saraksta. Tās var pat dubultoties kā izvēlnes. Diemžēl daudzu dizaina komandu acīs tie ir “neglīti”, un tos ir ļoti grūti veidot un saglabāt konsekvenci pārlūkprogrammās. Tāpēc to izmantošana mūsdienu tīmekļa lietojumprogrammās tiek plaši noraidīta. Tā vietā cilvēki izveido savas nolaižamās izvēlnes.

Izvēlne veidota ar ARIA

Ja no paša sākuma veidojat savu interaktīvo lietotāja saskarni, ir ļoti svarīgi izmantot atbilstošo marķējumu, nodrošināt atbilstošu tastatūras darbību un iekļaut, kā arī atjaunināt ARIA atribūtus. Tas ir vienīgais veids, kā palīgtehnoloģijas lietotājiem nodrošināt pienācīgu identitāti, darbību un stāvokli.

Dzīvie reģioni un slēptais teksts

Ja nav līdzvērtīga vietējā elementa tam, ko jūs veidojat, un nav ARIA vadlīniju, jums apzināti jāsniedz informācija, izmantojot metožu kombināciju.

  • , kas ir vizuāli paslēpts, izmantojot CSS, bet joprojām ir lasāms ekrāna lasītāja lietotājiem
  • “Aria-live” reģions
  • JavaScript metode, lai atjauninātu šī reģiona teksta saturu

Kad teksts tiek pievienots tiešajam reģionam, tas tiek novietots tieši ekrāna lasītāja rindā un tiek izrunāts ar tā lietotājiem. Slēpjot šo reģionu vizuāli, mēs izveidojam metodi tiešai saziņai ar ekrāna lasītāja lietotājiem.

Ja veidojat sarežģītu lietotāja saskarni, piemēram, sakārtojamu sarakstu, kurā tiek izmantots velciet un nometiet, šīs metodes ir obligātas.

Velciet un nometiet, lai pārkārtotu sarakstu.

Lai identificētu vilkšanu, izmantojiet aprakstīto ariju, lai saistītu slēpto tekstu katram saraksta vienumam, kas saka: “Nospiediet atstarpes taustiņu, lai satvertu šo vienumu.” Tas nodrošinās identitāti. Kad lietotāji satver vienumu, nodrošiniet darbību un stāvokli, ievietojot tekstu tiešajā reģionā:

“{Vienuma nosaukums} satverts, izmantojiet bulttaustiņus, lai pārkārtotu, atstarpes taustiņu, lai nomestu. Escape, lai atceltu. Pašreizējā pozīcija sarakstā, 1 no 7 ”.

Jūs varat arī sniegt galīgo statusu pēc preces pamešanas:

“{Vienuma nosaukums} ir samazinājies. Galīgā vieta sarakstā, 4 no 7 ”.

Lai atkārtotu, šī metode jāizmanto tikai pēc tam, kad vietējie elementi ir izslēgti un ARIA norādītie komponenti neeksistē vai nedarbojas. Tā kā jūs pats sniedzat identitāti, darbību un stāvokli, būs jāveic lietotāju pārbaude, lai noteiktu labāko veidu, kā paziņot šo informāciju lietotājiem.

Tagad nāciet paņemt šos pieejamos dizainus un izveidojiet pieredzi, kuru varēs baudīt visi lietotāji, arī cilvēki ar invaliditāti. Izmantojot šīs metodes, jūs visiem lietotājiem varēsit sniegt identitāti, darbību un stāvokļa informāciju neatkarīgi no tā, cik vienkārša vai sarežģīta ir mijiedarbība.

Džesija ir galvenā Salesforce pieejamības speciāliste. Nosūtiet viņam tvītu @jessehausler, viņa telefons ir vientuļš.

Seko mums @SalesforceUX.
Vai vēlaties strādāt ar mums? Sazinieties ar uxcareers@salesforce.com
Iepazīstieties ar Salesforce Lightning dizaina sistēmu