Frontendi ligipääsetavuse inseneritöö: ARIA mustrid ja ekraanilugejad

Näide:

JavaScript (lihtsustatud):

2. ARIA roll: `dialog` (Modaalne)

Atribuut `role="dialog"` tuvastab modaalse akna. Lisage `aria-modal="true"`, et näidata, et dialoog varjab selle taga oleva sisu, nõudes interaktsiooni ainult dialoogi sees. Fookuse haldamine on siin kriitilise tähtsusega; fookus peaks olema dialoogi sees lukustatud, kuni see suletakse.

Näide:

Fookuse haldamine (JavaScript - kontseptuaalne):

3. ARIA roll: `tablist`, `tab` ja `tabpanel`

Need rollid loovad vahelehtedega liidese. `tablist` sisaldab `tab` elemente ja iga `tab` on seotud vastava `tabpanel`-iga `aria-controls` kaudu. Kasutage `aria-selected="true"` praegu aktiivsel vahelehel ja `aria-hidden="true"` mitteaktiivsetel vahelehepaneelidel.

Näide:

JavaScript (Vahelehtede vahetamine):

4. ARIA roll: `alert` ja `alertdialog`

Kasutage `role="alert"` mitte-modaalsete hoiatusute jaoks, mis ei nõua kasutaja sekkumist. Ekraanilugejad kuulutavad hoiatused automaatselt välja. Modaalsete hoiatusute jaoks, mis nõuavad sekkumist, kasutage `role="alertdialog"` koos `role="dialog"`.

Näide (Hoiatus):

5. ARIA Live Regions: `aria-live`, `aria-atomic` ja `aria-relevant`

ARIA Live Regions võimaldavad dünaamilise sisu värskendusi kuulutada ekraanilugejate kasutajatele ilma lehe värskendamist nõudmata. Atribuut `aria-live` näitab värskenduse prioriteeti (`off`, `polite`, `assertive`). `aria-atomic="true"` täpsustab, et kogu piirkond tuleks värskendamise korral läbi lugeda, samas kui `aria-relevant` täpsustab, millised muudatuste tüübid peaksid kuulutust käivitama (nt `additions`, `removals`, `text`).

Näide (Live Region vestluse värskenduste jaoks):

Ekraanilugejad: testimine ja mõistmine

Ekraanilugejad on abitehnoloogiad, mida kasutavad nägemispuudega inimesed digitaalsele sisule juurdepääsuks. Nad teisendavad teksti ja muid visuaalseid elemente sünteetiliseks kõneks või braille'iks. Ekraanilugejatega oma veebisaidi testimine on selle ligipääsetavuse tagamiseks kriitilise tähtsusega.

Populaarsed ekraanilugejad:

• NVDA (NonVisual Desktop Access): Tasuta ja avatud lähtekoodiga ekraanilugeja Windowsile.
• JAWS (Job Access With Speech): Kaubanduslik ekraanilugeja Windowsile.
• VoiceOver: macOS-i ja iOS-i sisseehitatud ekraanilugeja.
• TalkBack: Androidi sisseehitatud ekraanilugeja.
• Orca: Tasuta ja avatud lähtekoodiga ekraanilugeja Linuxile.

Ekraanilugejate peamised funktsioonid:

• Navigeerimine pealkirjade järgi: Võimaldab kasutajatel kiiresti lehe erinevate jaotiste juurde liikuda.
• Navigeerimine maamärkide järgi: Kasutab HTML5 semantilisi elemente (nt `
• Vormirežiim: Hõlbustab vormide täitmist, teatades vormiväljadest ja andes juhiseid.
• Lugemisjärjestus: Määrab järjekorra, milles ekraanilugeja sisu loeb.
• ARIA tugi: Tõlgendab ARIA atribuute, et pakkuda täiendavat semantilist teavet.

Testimine ekraanilugejatega: praktiline juhend

1. Valige ekraanilugeja: Valige ekraanilugeja, mida teie sihtrühm laialdaselt kasutab. NVDA ja VoiceOver on esialgseks testimiseks suurepärased valikud.
2. Õppige põhilisi käsklusi: Tutvuge oma valitud ekraanilugeja põhiliste käskudega, nagu navigeerimine pealkirjade, linkide ja vormiväljade järgi. Igal ekraanilugejal on oma klaviatuuri otseteed ja žestid.
3. Navigeerige oma veebisaidil: Kasutage ekraanilugejat, et navigeerida oma veebisaidil nägemispuudega kasutaja perspektiivist. Pöörake tähelepanu järgmisele:
   • Teabe edasiandmine: Kas kogu oluline teave antakse tõhusalt edasi kõne või braille'i kaudu?
   • Navigeerimise selgus: Kas navigatsioon on loogiline ja kergesti mõistetav? Kas kasutajad leiavad kergesti seda, mida nad otsivad?
   • Vormide ligipääsetavus: Kas vormiväljad on korralikult märgistatud ja ligipääsetavad? Kas kasutajad saavad vorme kergesti täita ja esitada?
   • ARIA juurutamine: Kas ekraanilugeja tõlgendab ARIA atribuute õigesti? Kas dünaamilised sisu värskendused teada antakse sobivalt?
4. Probleemide tuvastamine ja parandamine: Oma veebisaidil navigeerides tuvastage kõik tekkivad ligipääsetavusprobleemid. Need probleemid võivad hõlmata puuduvaid märgiseid, valesid ARIA atribuute, halba fookuse haldamist või ebaselget navigatsiooni.
5. Itaarimine ja uuesti testimine: Pärast tuvastatud probleemide parandamist testige oma veebisaiti uuesti ekraanilugejaga, et tagada probleemide lahendamine ja et uusi probleeme ei ole tekkinud. See itereeriv protsess on optimaalse ligipääsetavuse saavutamiseks hädavajalik.

Vältige levinud ekraanilugeja testimise vigu:

• Ainult automaatsete tööriistade kasutamine: Kuigi automaatsed ligipääsetavuse testimise tööriistad võivad olla kasulikud, ei suuda nad kõiki ligipääsetavusprobleeme tuvastada. Ekraanilugejatega manuaalne testimine on hädavajalik.
• Ekraanilugeja kasutajate käitumise mittemõistmine: Oluline on mõista, kuidas ekraanilugeja kasutajad tavaliselt veebisaitidel navigeerivad ja sisuga suhtlevad. Vaadake kogenud ekraanilugejate kasutajaid või konsulteerige ligipääsetavuse ekspertidega, et paremini mõista.
• Kasutajate tagasiside eiramine: Koguge tagasisidet puuetega kasutajatelt ja lisage nende ettepanekud oma disaini- ja arendusprotsessi.
• Testimine ainult ühes brauseris: Testige oma veebisaiti ekraanilugejatega erinevates brauserites, et tagada brauseritevaheline ühilduvus.

Ligipääsetavus peale koodi: kaalutlused globaalse publiku jaoks

Kuigi ARIA ja ekraanilugejad on veebiligipääsetavuse olulised komponendid, on oluline kaaluda ligipääsetavust laiemast perspektiivist, eriti kui kujundate globaalsele publikule.

1. Keel ja lokaliseerimine

Pakkuge sisu mitmes keeles ja tagage, et teie veebisait oleks erinevate piirkondade jaoks korralikult lokaliseeritud. See hõlmab:

• Teksti suund: Toetage nii vasakult paremale (LTR) kui ka paremalt vasakule (RTL) keeli.
• Kuupäeva ja kellaaja vormingud: Kasutage erinevate lokalite jaoks sobivaid kuupäeva- ja kellaajavorminguid.
• Arvu- ja valuutavormingud: Kasutage erinevate piirkondade jaoks sobivaid arvu- ja valuutavorminguid.
• Tõlge: Kasutage professionaalseid tõlkijaid, et tagada täpsed ja kultuuriliselt tundlikud tõlked.
• Keele atribuudid: Kasutage `lang` atribuuti `` elemendil ja teistel asjakohastel elementidel, et määrata sisu keel. See aitab ekraanilugejatel ja muudel abitehnoloogiatel teksti õigesti hääldada.

2. Kultuuriline tundlikkus

Olge teadlik kultuurilistest erinevustest ja vältige piltide, sümbolite või metafooride kasutamist, mis võivad teatud kultuurides solvavad või valesti mõistetavad olla. Kaaluge:

• Värvide sümboolika: Värvidel võib erinevates kultuurides olla erinev tähendus. Näiteks on valge värv mõnes Aasia riigis seotud leinaga.
• Pildid: Vältige piltide kasutamist, mis kujutavad konkreetseid kultuuritavasid või stereotüüpe, mis võivad olla solvavad või välistavad.
• Huumor: Huumorit võib olla keeruline kultuuride vahel tõlkida. Vältige huumori kasutamist, mis põhineb kultuurilistele viidetele või eeldustele, mida kõik kasutajad ei pruugi mõista.

3. Kognitiivne ligipääsetavus

Kognitiivne ligipääsetavus keskendub veebisaitide hõlpsamaks mõistmiseks ja kasutamiseks tegemisele inimestele, kellel on kognitiivseid puudeid, nagu õpiraskused, mäluhäired ja tähelepanudefitsiit. Kognitiivse ligipääsetavuse parandamise strateegiad hõlmavad:

• Selge ja lühike keel: Kasutage lihtsat, otsekohest keelt ja vältige žargooni või tehnilisi termineid.
• Ühtne navigeerimine: Pakkuge ühtset navigeerimist ja saidi struktuuri.
• Visuaalne selgus: Kasutage selget tüpograafiat, piisavat kontrasti ja vältige segaseid paigutusi.
• Prognoositav suhtlus: Tagage, et suhtlus oleks prognoositav ja intuitiivne.
• Vigade ennetamine: Abistage kasutajaid vigade vältimisel, pakkudes selgeid juhiseid ja veateateid.

4. Mobiilne ligipääsetavus

Tagage, et teie veebisait oleks mobiilseadmetes ligipääsetav. Kaaluge:

• Responsiivne disain: Kasutage vastuvõtva disaini tehnikaid, et kohandada oma veebisaiti erinevate ekraanisuuruste ja eraldusvõimetega.
• Puutepunktide suurus: Veenduge, et puutepunktid oleksid piisavalt suured ja piisavalt kaugel, et neid oleks mobiilseadmetes kerge puudutada.
• Mobiilseid ekraanilugejaid: Testige oma veebisaiti mobiilsete ekraanilugejatega, nagu VoiceOver iOS-is ja TalkBack Androidis.

Järeldus

Frontendi ligipääsetavuse inseneritöö on pidev protsess, mis nõuab pidevat õppimist, testimist ja täiustamist. Mõistes ARIA mustreid, omandades ekraanilugejate testimistehnikaid ja kaaludes globaalse publiku vajadusi, saate luua kaasavaid digikogemusi, mis annavad võimu kõigi võimetega kasutajatele. Pidage meeles, et eelistage päris HTML-elemente ja atribuute, kasutage ARIA-t kaalutletult ja testige alati oma tööd abitehnoloogiatega. Ligipääsetavuse omaksvõtmine ei ole ainult tehniline oskus, vaid kohustus luua võrdsem ja kaasavam digimaailm. Muutes ligipääsetavuse oma arendusprotsessi põhiosaks, saate luua veebisaite ja rakendusi, mis pole mitte ainult funktsionaalsed ja kasutajasõbralikud, vaid ka ligipääsetavad kõigile, olenemata nende võimetest või asukohast. See kohustus tagab parema kasutajakogemuse, laiema publikuulatuse ja tugevama sotsiaalse vastutustunde.

Allikad

• WAI-ARIA Ülevaade
• ARIA - MDN Web Docs
• ARIA Authoring Practices Guide (APG)
• WebAIM