Kuidas kirjeldada keerulisi kujundusi puuetega kasutajatele

Olete arendaja, kellele on just antud keeruka kujunduse spetsifikatsioon. Teate, et kujundused toetavad juurdepääsetavust, kuna teie UX-i meeskond luges mõni kuu tagasi keskmise postituse juurdepääsetava disaini kohta. Nüüd on teie ülesanne luua juurdepääsetav kogemus, kuid kust peaksite alustama?

Seal on WCAG 2.0, mida austatakse laialt kui tõde, kuna see seob rahvusvahelisi juurdepääsetavuse standardeid. Samuti on olemas WAI-ARIA spetsifikatsioon, mis on oluline osa juurdepääsetavusele suunatud arendaja tööriistakomplektist. Ajaliselt tagasi jõudes on olemas USA föderaalvalitsuse standard, rehabilitatsiooniseaduse paragrahv 508.

Ehkki jaotises 508 olevad tehnilised juurdepääsetavuse standardid pole teada, sisaldavad need ühte väga mõistlikku soovitust. Selles öeldakse, et

“… Abitehnoloogiale peab olema kättesaadav piisav teave kasutajaliidese elemendi, sealhulgas elemendi identiteedi, toimimise ja oleku kohta.”

Algselt tarkvara jaoks kirjutatud sõnad on tänapäeval veelgi asjakohasemad, arvestades veebipõhiste rakenduste levimust. Need kirjeldavad, millist tüüpi teavet puudega kasutajad vajavad ülesande edukaks täitmiseks. See võib olla pime kasutaja ekraanilugejaga, füüsilise puudega häälsisendi kasutaja või suvaline arv muid kasutajaid, kellel on mitmesugused abitehnoloogiad.

Mis tahes interaktsiooni nii klaviatuuri kui ka ekraanilugeja kasutajatele juurdepääsetavaks tegemise põhialused on kolme põhiteabe pakkumine: identiteet, toimimine ja olek.

Kasutajad, kes suhtlevad elemendiga, mis on nii põhiline nagu ruut või mis on keerukas nagu lohistamiskogemus, peavad kaaluma järgmisi kolme küsimust:

  1. Identiteet: millega ma suhtlen?
  2. Operatsioon: kuidas seda asja kasutada?
  3. Riik: Milline on selle asja praegune seis?

Vaata lähemalt märkeruute

Nägevale kasutajale antakse palju visuaalseid näpunäiteid, mis on seotud identiteedi, toimimise ja olekuga. Vaatame näitena lihtsat ruutu.

Märkeruut sildiga „Nõustun tingimustega”.

Kui näen ruutu sõnade “Nõustun nende tingimustega” kõrval, tuvastasin märkeruudu.

Sama märkeruut hiire klõpsamiseks.

Ma tean, kuidas ruutu klõpsates seda ruutu kasutada. Sel viisil lülitatakse see kontrollitud ruumist valimata.

Märgitud ruut sildiga „Nõustun tingimustega”.

Kui näen ruudu sees linnukese, tean, et selle olek on märgitud.

Kuidas pime kasutaja seda teavet saaks?

“Nõustun nende tingimustega. Märkeruut, märkimata. Vajutage tühikuklahvi kontrollimiseks. ”

Kui ekraanilugeja loeb seda pimedale kasutajale, antakse talle kolm olulist teavet.

  1. Objekti identiteet: märkeruut, et teatada, kas olen nõus või mitte
  2. Olek: kontrollimata
  3. Toiming: tühiku vajutamine lülitab oleku ümber

Sellega seoses kaalugeme identiteedi, toimimise ja oleku pakkumisel abitehnoloogia jaoks kolme meetodit, eelistatuimast väikseima eelistamiseni: loomulike juhtelementide kasutamine, ARIA kasutamine ja viimase võimalusena nutika varjatud teksti ja reaalajatega tutvumine.

Natiivkontrollid

Natiivkontrollid, näiteks vormikontrollid ja nupud, on alati parim valik. Ülaltoodud näites on tõeline märkeruut ideaalne, kuna see teeb kogu töö teie heaks. Te ei pea toimingut JavaScripti abil looma, märkeruut tuvastab juba iseenda ja selle oleku ning lisaks teavad inimesed, kuidas neid kasutada.

Keerukamate interaktsioonide, näiteks lohistamise korral kaaluge, kas põnevat elementi saab kasutada kulisside taga. Kaaluge veergude laiuse muutmist tabelis:

Veeru laiuse muutmiseks lohistage

Liug- või vahemikusisend on selle käitumise jaoks täiuslik looduslik ekvivalent ning see pakub oma identiteeti, toimimist ja olekut.

Vahemiku liugur

Seda saab CSS-i abil visuaalselt varjata, jättes selle ekraanilugejate kasutajatele kättesaadavaks. Sünkroonige selle väärtus veeru laiusega ja pime kasutaja saab suhelda tuttava vormikontrolliga. Nägenud kasutaja lohistab endiselt, nagu arvatakse.

WAI-ARIA

Kohtades, kus loomuliku juhtelemendi kasutamine pole võimalik, järgige ARIA (juurdepääsetava rikkaliku Interneti-rakenduste) parimaid tavasid tavaliste kujundusmustrite, näiteks menüüde, dialoogide ja automaatse täitmise jaoks.

Need juhised on kirjutatud nii, et kasutajaliidese mustrid, mis pole HTML-is natiivselt saadaval, identifitseerivad end ikkagi abitehnoloogia kasutajatele õigesti.

Võtame näiteks standardse elemendi:

Põhiline valitav element.

See on looduslikult ligipääsetav element. See sobib suurepäraselt vormides kasutamiseks, nimekirjast valiku valimiseks. Neid saab menüüdena isegi kahekordistada. Kahjuks on need paljude disainimeeskondade silmis koledad ning neid on brauserites väga raske stiilida ja järjepidevaks pidada. Seetõttu lükatakse nende kasutamine tänapäevastes veebirakendustes laialdaselt tagasi. Selle asemel loovad inimesed oma rippmenüüd.

Menüü on ehitatud ARIA-ga

Enda interaktiivse kasutajaliidese nullist ehitamisel on väga oluline kasutada sobivat märgistust, pakkuda sobivat klaviatuurikäitumist ning lisada ja värskendada ARIA atribuute. Ainult nii saate abitehnoloogia kasutajatele õige identiteedi, toimimise ja oleku.

Reaalajad ja peidetud tekst

Kui teil pole ehitatavaga samaväärset looduslikku elementi ja ARIA juhend puudub, peate teabe esitama teadlikult, kasutades tehnikate kombinatsiooni.

  • , mis on CSS-i abil visuaalselt peidetud, kuid ekraanilugeja kasutajatele siiski loetav
  • „Aria-live” piirkond
  • JavaScripti meetod selle piirkonna teksti sisu värskendamiseks

Kui tekst lisatakse aktiivsesse piirkonda, paigutatakse see otse ekraanilugeja järjekorda ja räägitakse selle kasutajatega. Selle piirkonna visuaalset varjamist loome meetodi ekraanilugejate kasutajatega otse suhtlemiseks.

Kui loote keerulist kasutajaliidest, näiteks sorteeritavat loendit, mis kasutab lohistamist, peavad need meetodid olema kohustuslikud.

Loendi ümberkorraldamiseks lohistage.

Lohistamise tuvastamiseks kasutage aaria-kirjeldatud abil aariat, mille abil saate varjatud teksti seostada iga loendiüksusega, mis ütleb: „Selle üksuse haaramiseks vajutage tühiku klahvi.” See annab identiteedi. Kui kasutajad üksuse haaravad, pakkuge toimingut ja olekut, pannes teksti reaalajas:

“{Üksuse nimi} haaras, kasutage nooleklahve ümberkorraldamiseks, tühikuklahvi allalangemiseks. Escape tühistamiseks. Praegune positsioon nimekirjas, 1 seitsmest ”.

Pärast üksuse äralangemist saate anda ka lõpliku oleku:

„{Toote nimi} langes. Lõplik koht nimekirjas, 4 seitsmest ”.

Kordan, et seda meetodit tuleks kasutada ainult siis, kui natiivsed elemendid on välistatud ja ARIA määratletud komponente kas ei eksisteeri või ei tööta. Kuna pakute oma identiteeti, toimimist ja olekut iseseisvalt, on vaja kasutajatestimist, et selgitada välja parim viis selle teabe edastamiseks oma kasutajatele.

Nüüd tehke need juurdepääsetavad kujundused ja looge kogemus, mida saavad nautida kõik kasutajad, sealhulgas puuetega inimesed. Nende meetodite abil saate pakkuda identiteeti, toimimist ja olekuteavet kõigile oma kasutajatele, hoolimata sellest, kui lihtne või keeruline on interaktsioon.

Jesse on Salesforce'i peamine juurdepääsetavuse spetsialist. Saatke talle säutsu @jessehausler, tema telefon on üksildane.

Jälgi meid saidil @SalesforceUX.
Kas soovite meiega koostööd teha? Võtke ühendust aadressil uxcareers@salesforce.com
Tutvuge Salesforce'i välklambi disainisüsteemiga