Veebi juurdepääsetavad kasutajaliidese komponendid

Juurdepääsuks peavad kasutajaliidese komponendid töötama erinevates ekraanides, erineva ekraanisuuruse ja sisendiga. Lisaks peaksid komponendid olema kasutatavad kõige laiemale kasutajarühmale, sealhulgas puuetega inimestele.

Ligipääsetavuse kavandamisel tuleb arvestada puude nelja põhivaldkonnaga: nägemine, kuulmine, liikuvus ja tunnetus.

Visuaalsed probleemid võivad ulatuda võimetusest eristada värve kuni nägemiseni.

  • Veenduge, et tekstisisalduse minimaalne kontrastsussuhe oleks täidetud.
  • Vältige teabe edastamist ainult värviliselt ja veenduge, et kogu teksti suurust saab muuta.
  • Veenduge, et kõiki kasutajaliidese komponente saaks kasutada abitehnoloogiatega, näiteks ekraanilugejate, luupide ja punktkirjaekraanidega. See eeldab, et kasutajaliidese komponendid oleksid märgistatud nii, et juurdepääsetavuse API-d saaksid programmiliselt kindlaks määrata mis tahes elemendi rolli, oleku, väärtuse ja pealkirja.

Kuulmisprobleemid tähendavad, et kasutajal võib tekkida probleeme lehe heli kuulmisega.

  • Muutke sisu arusaadavaks, kasutades teksti alternatiive kogu sisu jaoks, mis ei ole rangelt tekst.
  • Veenduge, et testiksite, kas teie kasutajaliidese komponendid on endiselt helivabad.

Liikuvusprobleemid võivad hõlmata suutmatust juhtida hiirt, klaviatuuri või puutetundlikku ekraani.

  • Muutke kasutajaliidese komponentide sisu klaviatuurilt funktsionaalselt juurdepääsetavaks kõigi toimingute jaoks, mille jaoks muidu kasutataks hiirt.
  • Veenduge, et kasutajaliidese komponendid on abitehnoloogiate jaoks õigesti märgistatud; need kasutajad võivad kasutada tehnoloogiaid, näiteks hääljuhtimistarkvara ja füüsiliste lülitite juhtelemente, mis kipuvad kasutama samu API-sid kui muud abitehnoloogiad, näiteks ekraanilugejad.

Kognitiivsed probleemid tähendavad seda, et kasutaja võib teksti lugemiseks vajada abitehnoloogiaid, seetõttu on oluline tagada, et tekstivõimalused oleksid olemas.

  • Vältige korduvat või vilkuvat visuaalset esitlust, kuna see võib mõne kasutaja jaoks probleeme tekitada.
  • Vältige ajapõhist koostoimimist.

See võib tunduda palju aluseid, kuid katame teie UI-komponendi juurdepääsetavuse hindamise ja parandamise protsessi.

Kas teie kasutajaliidese komponent on juurdepääsetav?

Kokkuvõte (tl; dr)

Juurdepääsutaotluse auditeerimisel küsige endalt:

  • Kas saate kasutajaliidese komponenti kasutada ainult klaviatuuriga? Kas sellega õnnestub keskenduda ja vältida fookuslõksusid? Kas see reageerib sobivatele klaviatuurisündmustele?
  • Kas saate oma kasutajaliidese komponenti kasutada ekraanilugejaga? Kas olete visuaalselt esitatud teabe jaoks pakkunud teksti alternatiivid? Kas olete ARIA abil lisanud semantilist teavet?
  • Kas teie kasutajaliidese komponent saab töötada ilma helita? Lülitage kõlarid välja ja uurige oma juhtumeid.
  • Kas see saab ilma värvita hakkama? Veenduge, et teie kasutajaliidese komponenti saaks kasutada keegi, kes ei näe värve. Kasulik tööriist värvipimeduse simuleerimiseks on Chrome'i laiendus nimega SEE (proovige kõiki nelja värvipimeduse simulatsiooni vormi). Samuti võite olla huvitatud laiendusest Daltonize, mis on sama kasulik.
  • Kas teie kasutajaliidese komponent saab töötada suure kontrastsusega režiimis? Kõik kaasaegsed opsüsteemid toetavad suure kontrastsusega režiimi. High Contrast on saadaval Chrome'i laiendus, millest võib siin abi olla.

Natiivsetel juhtelementidel (näiteks ja ) on brauseri sisseehitatud juurdepääsetavus. Need on fokuseeritavad sakiklahvi abil, reageerivad klaviatuuri sündmustele (nagu sisestusklahv, tühik ja nooleklahvid) ning neil on semantilised rollid, olekud ja atribuudid, mida hõlbustusvahendid kasutavad. Vaikekujundus peaks vastama ka ülaltoodud juurdepääsetavuse nõuetele.

Kasutajaliidese kohandatud komponentidel (välja arvatud komponendid, mis laiendavad natiivseid elemente nagu ) pole sisseehitatud funktsioone, sealhulgas juurdepääsetavust, seega peate selle ise pakkuma. Hea juurdepääs alustamiseks juurdepääsetavuse rakendamisel on oma komponentide võrdlemine analoogse natiivse elemendiga (või mitme natiivse elemendi kombinatsiooniga, sõltuvalt sellest, kui keeruline teie komponent on).

Järgnevas loendis on küsimusi, mida saate endalt küsida, kui üritate oma kasutajaliidese komponente paremini juurdepääsetavaks teha.

Kas teie kasutajaliidese komponenti saab kasutada ainult klaviatuuriga?

Ideaalis veenduge, et kasutajaliidese komponendi kõigi funktsioonide juurde pääseb klaviatuuri abil. UX-i kujundamisel mõelge, kuidas saaksite oma elementi kasutada ainult klaviatuuriga, ja mõelge välja klaviatuuri interaktsioonide järjepidev komplekt.

Esiteks veenduge, et teil oleks iga komponendi jaoks mõistlik fookuseesmärk. Näiteks võib keeruline komponent, näiteks menüü, olla üks lehe fookuse sihtmärk, kuid peaks siis haldama fookust enda sees, nii et aktiivne menüüelement keskendub alati.

Fookuse juhtimine keeruka elemendi piires

Tabindeksi kasutamine

Atribuut tabindex võimaldab klaviatuuri abil elemente / kasutajaliidese komponente fokuseerida. Ainult klaviatuuri ja abitehnoloogia kasutajad peavad nendega suheldes suutma keskenduda klaviatuuril elementidele. Looduslikud interaktiivsed elemendid on kaudselt fokuseeritavad, nii et nad ei vaja atribuuti tabindex, välja arvatud juhul, kui me soovime nende asukohta vahekaartide järjekorras muuta.

Tabiindeksi väärtusi on kolme tüüpi:

  • tabindex = ”0” on kõige tavalisem ja paigutab elemendi vahekaardi “looduslik” järjekorda (määratletud DOM-i korraldusega).
  • kui tabiindeksi väärtus on suurem kui 0, paigutatakse element käsitsi vahekaartide järjekorda - kõik positiivse tabiindeksi väärtusega lehe elemendid külastatakse numbrilises järjekorras enne elementide loomulikku vahekaardi järjekorda.
  • kui vahekaardi indeksväärtus on -1, tuleb element programmeeritavalt fokuseerida, kuid mitte vahekaartide järjekorras.

Kasutajaliidese kohandatud komponentide puhul kasutage alati tabindeksi väärtusi 0 või -1, kuna te ei saa etteantud lehel elementide järjekorda enne tähtaega kindlaks teha - ja isegi kui me seda teeksime, võivad need muutuda. Tabiindeksi väärtus -1 on eriti kasulik ülaltoodud keerukate komponentide fookuse juhtimiseks.

Samuti veenduge, et fookus on alati nähtav, kas lubades vaikimisi kasutatava fookusrõngastiili või rakendades eristatavat fookusstiili. Ärge unustage klaviatuuri kasutajat lõksus hoida - fookus peaks olema võimalik elemendist eemale viia, kasutades ainult klaviatuuri.

Teid võivad huvitada ka MDN-is käsitletud tabindeksi või aaria-aktiivsete järeltulijate lähenemisviisid.

Autofookuse kasutamine

HTML-i autofookuse atribuut võimaldab autoril täpsustada, et konkreetne element peaks lehe laadimisel automaatselt keskenduma. Seda toetatakse juba kõigis veebivormi juhtelementides, sealhulgas . Elementide automaatseks teravustamiseks oma kohandatud kasutajaliidese komponentides kutsuge fookuse () meetodit, mida toetatakse kõigil fokuseeritavatel HTML-elementidel (nt document.getElementById ('myButton'. Focus. ()).

Klaviatuuri interaktsiooni lisamine

Kui teie kasutajaliidese komponent on teravustatav, proovige komponendi fokuseerimisel pakkuda klaviatuuri koostoime lugu, käsitledes sobivaid klaviatuurisündmusi - näiteks laske kasutajal menüüsuvandite valimiseks kasutada nooleklahve ja tühikut või sisestage nuppude aktiveerimiseks. ARIA kujundusmustrite juhend annab siin mõned juhised.

Lõpuks veenduge, et klaviatuuri otseteed on leitavad. Näiteks on tavaline tava, et klaviatuuri otsetee legend (ekraanil olev tekst) annab kasutajale teada, et otseteed on olemas. Näiteks „Press? kiirklahvide jaoks ”. Alternatiivina võiks sellist vihjet kasutada ka kasutaja teavitamiseks olemasolevast otseteedest.

Fookuse juhtimise olulisust ei saa alahinnata. Üks näide on navigeerimissahtlid. Kui lisate lehele kasutajaliidese komponendi, peate fookuse suunama lehel olevale elemendile, vastasel juhul võivad kasutajad selle saamiseks pääseda kogu lehe vahele. See võib olla pettumust valmistav kogemus, nii et katsetage kindlasti kõigi oma lehe kõigi klaviatuuril navigeeritavate komponentide fookust.

Kas saate oma kasutajaliidese komponenti kasutada ekraanilugejaga?

Umbes 1–2% kasutajatest kasutab ekraanilugejat. Selle artikli lõpus loetleme mõned ekraanilugejad, mida saab tasuta kasutada: proovige oma komponenti kasutada vähemalt ühega neist ekraanilugejatest. Kas saate kogu olulise teabe kindlaks teha ja komponendiga suhelda, kasutades ainult ekraanilugejat ja klaviatuuri?

Järgmised küsimused peaksid teid ekraanilugeja juurdepääsetavuse määramisel juhendama:

Kas kõigil komponentidel ja piltidel on mõtestatud tekstivariandid?

Kui interaktiivse komponendi nime või eesmärgi kohta visuaalselt teavet edastatakse, tuleb pakkuda juurdepääsetavat teksti alternatiivi.

Näiteks kui teie kasutajaliidese komponent kuvab ainult sellist ikooni nagu ..

Seadete menüü ikoon

et näidata, et see on seadete menüü, vajab see juurdepääsetavat teksti alternatiivi, näiteks „seaded”, mis edastab sama teavet. Sõltuvalt kontekstist võib see varju DOM-is kasutada atribuuti alt, aria-label atribuuti, aaria-labelledby atribuuti või lihtteksti. Üldised tehnilised näpunäited leiate WebAIMi kiirjuhendist.

Iga kasutajaliidese komponent, mis pilti kuvab, peaks pakkuma mehhanismi selle pildi jaoks alternatiivse teksti pakkumiseks, mis on analoogne atribuudiga alt.

Kas teie komponendid pakuvad semantilist teavet?

Abitehnoloogia edastab semantilist teavet, mida muidu nähtavatele kasutajatele väljendatakse visuaalsete näpunäidete abil, näiteks vormindamine, kursori stiil või asukoht. Algsetes elementides on see semantiline teave sisseehitatud brauseri poolt, kuid kohandatud komponentide jaoks peate selle teabe lisamiseks kasutama ARIA-d.

Rusikareeglina peaks hiireklõpsu või kursoriüritust kuulaval komponendil olema mitte ainult mingi klaviatuurisündmuse kuulaja, vaid ka ARIA roll ning potentsiaalselt ARIA olekud ja atribuudid.

Näiteks võib kohandatud UI komponent võtta liugurina ARIA rolli, millel on mõned seotud ARIA atribuudid: aria-valuenow, aria-valuemin ja aria-valuemax. Sidudes need atribuudid teie kohandatud komponendi asjakohaste omadustega, saate abitehnoloogia kasutajatel lubada elementidega suhelda ja selle väärtust muuta ning isegi muuta elemendi visuaalset esitust vastavalt.

Kauguse liuguri komponent
 

Kas kasutajad saavad kõigest aru ilma värvile lootmata?

Värvi ei tohiks kasutada ainsa vahendina teabe edastamiseks, näiteks oleku näitamiseks, vastuse küsimiseks või visuaalse kohandatud komponendi eristamiseks. Näiteks kui lõite intensiivse, mõõduka ja kergliikluse eristamiseks värviga komponendi , tuleks kasutada ka alternatiivseid võimalusi liikluse taseme eristamiseks: üks lahendus võib olla hõljutada teabe kuvamist elemendi kohal kohtspikris.

Kas teksti / piltide ja tausta vahel on piisavalt kontrasti?

Kõik teie komponendis kuvatavad tekstid peaksid vastama minimaalsele (AA) kontrastsusribale. Kaaluge kõrge kontrastsusega teema pakkumist, mis vastab kõrgemale (AAA) ribale, ja veenduge ka, et kasutajaagendi stiililehti saab rakendada juhul, kui kasutajad vajavad äärmist kontrasti või erinevaid värve. Saate seda värvi kontrastsuse kontrollijat kasutada abivahendina disainimisel.

Kas teie komponentide liikuv või vilkuv sisu on suletav ja ohutu?

Sisu, mis liigub, kerib või vilgub ja kestab üle 5 sekundi, peaks saama peatada, peatada või peita. Üldiselt proovige välku mitte rohkem kui kolm korda sekundis.

Juurdepääsetavuse tööriistad

Saadaval on arvukalt tööriistu, mis aitavad teie visuaalsete komponentide juurdepääsetavust siluda. Need sisaldavad:

  • ax - automatiseeritud juurdepääsetavuse testimine teie valitud raamistiku või brauseri jaoks
  • Chrome'i tuletorni juurdepääsetavuse auditid pakuvad kasulikku teavet hõlbustusprobleemide avastamiseks.
Natiivse ligipääsetavuse kontroll DevTools'is
  • Tenon.io - kasulik tavaliste juurdepääsetavuse probleemide testimiseks. Tenonil on tugev integreerimise tugi ehitustööriistade, brauserite (laiendite kaudu) ja isegi tekstiredaktorite jaoks.
  • Saate uurida, kuidas abitehnoloogiad veebisisu näevad, kasutades hõlbustusinspektorit (Mac) või Windows Automation API testimisriistu ja AccProbe (Windows). Lisaks näete täielikku juurdepääsetavuse puud, mille Chrome loob, liikudes aadressile chrome: // juurdepääsetavus.
  • Parim viis Macis ekraanilugeja toe testimiseks on VoiceOver utiliidi kasutamine. Võite kasutada enableF5 lubamiseks / keelamiseks, Ctrl + Valik ← → lehe liikumiseks ja Ctrl + Tõstuklahv + Valik + ↑ ↑ puu üles / alla liikumiseks. Üksikasjalikumate juhiste saamiseks vaadake VoiceOver-käskude täielikku loendit ja VoiceOver-i veebikäskude loendit.
  • tota11y on abistava tehnoloogia küsimustes kasulik visualiseerija, mille on ehitanud Khan Academy. See on skript, mis lisab dokumendile nupu, mis käivitab mitu pistikprogrammi märkuste tegemiseks, näiteks ebapiisav kontrastsuse suhe ja muud rikkumised
  • ally.js (autor Rodney Rehm) on kogu, mis üritab teie rakendusele mõne hõlbustusfunktsiooni lisamist lihtsustada. See aitab DOM-ist päringu teha kõigi fokuseeritavate või tabbleeritavate elementide kohta, püüab fokuseerida konkreetsete DOM-i alapuude juurde, aitab kindlaks teha, kuidas fookus on muutunud ja kuidas see koos mitme teise abilisega kaasas on.
  • Windowsis on NVDA tasuta avatud lähtekoodiga ekraanilugeja, mis on täielikult esile toodud ja kogub kiiresti populaarsust. Pange aga tähele, et sellel on nägemiskasutajate jaoks palju järsem õppimiskõver kui VoiceOveril.
  • ChromeLens aitab arendada vaegnägijaid. Samuti on see suurepärane tugi klaviatuuri navigatsiooniteede visualiseerimiseks http://chromelens.xyz/
Laiend ChromeLens DevTools, millel on mitu võimalust erinevate pimedate vormide jäljendamiseks, vahelehtede jälgimiseks ja juurdepääsetavuse kontrollimiseks.
  • ChromeVox on ekraanilugeja, mis on saadaval Chrome'i laiendusena ja sisse ehitatud ChromeOS-i seadmetele.

Märkus. Suur tänu kuulub Alice Boxhalli ja Rob Dodsonile artikli abistamise eest.

PS: kui olete huvitatud rohkem teada saama, saate hõlpsasti juurdepääsetavuse põhialuste kohta tutvuda sellel tasuta Udacity kursusel https://bit.ly/web-a11y