Kas ir Aria atribūti HTML un kāpēc tie ir svarīgi?

Tīmekļa dizaineri, kuriem HTML nav svešs, var saskarties ar nepazīstamu atribūtu kopu. Šie atribūti ir pievienoti vārdam ARIA, un tie parādās visā tīmeklī, taču to mērķis var būt noslēpums jauniem lietotājiem.

ARIA atribūti kalpo svarīgam mērķim jūsu vietņu pieejamības nodrošināšanā. Tie apraksta gan konkrētā elementa saturu, gan veidu, kā elements ir saistīts ar lapu vai citiem elementiem ap to.

Šo ļoti svarīgo atribūtu pievienošana savai vietnei palīdzēs nodrošināt, ka visi apmeklētāji saņem vienādu pieredzi neatkarīgi no izmantotās tehnoloģijas.

Kas ir ARIA atribūti?

ARIA ir Accessible Rich Internet Applications akronīms. Mūsdienu HTML, īpaši ar JavaScript bagātinātās lietojumprogrammās, ne vienmēr ir uzreiz skaidrs, pamatojoties uz sintakse, kāda loma ir atsevišķiem elementiem.

Grūtības noteikt lomu var būt problēmas, ja lietotāji skata vietni, izmantojot pieejamības rīkus, piemēram, ekrāna lasītājus. Ja nav atbilstoša semantiskā HTML, jūsu galalietotājs, iespējams, nevarēs pārvietoties vietnē, izmantojot pieejamības rīkus.

Lai gan vēlamais veids, kā atrisināt šo problēmu, ir izmantojiet pareizos semantiskos elementus HTML5, tas ne vienmēr ir praktiski vai iespējams. Šeit tiek ieviesti ARIA atribūti HTML elementos. Šie atribūti palīdz definēt jūsu elementa lomu un atribūtus tā, lai pieejamības rīki to varētu apstrādāt.

Kāpēc ARIA atribūti ir svarīgi?

Īsāk sakot, ARIA atribūti ļauj lietotājiem ar invaliditāti izmantot jūsu vietni. Šīs lomas un atribūti definē papildu informāciju par dažādiem jūsu vietnes elementiem, kas citādi varētu nebūt viegli pieejami.

Ir daudz dažādu ARIA atribūtu, kurus varat piešķirt. Tie ir jāizmanto visur, kur nepieciešams papildu konteksts, lai dokumentam būtu jēga nevizuālā veidā.

Piemēram, apsveriet vietni, kuras galvenā navigācija sastāv no a elements, kas ietīts a elements, nevis a elements:

<divklasē="nav">
<ul>
<li>Mājasli>
<li>Veikalsli>
<li>Parli>
ul>
div>

Varat izmantot ARIA atribūtus, lai palīdzētu lietotājiem orientēties. Lomu un ārijas apzīmējuma atribūtu pievienošana Elements ļauj ekrāna lasītājam un palīgtehnoloģijām uzzināt, kur atrodas jūsu izvēlne.

<divklasē="nav">
<ullomu="navigācija"ārijas etiķete="Galvenais">
<li>Mājasli>
<li>Veikalsli>
<li>Parli>
ul>
div>

Lai gan vairumā gadījumu jums vajadzētu izmantot pareizos elementus, tas ne vienmēr var būt iespējams, ņemot vērā jūsu darbības ierobežojumus. Ja, piemēram, jūsu vietnei ir nepieciešams izmantot norises joslu, bet vēlaties tādu dizainu, ko standarta josla neatļauj.

Šajā scenārijā varat izveidot pielāgotu elementu kopu, lai parādītu progresa joslu. Tomēr ekrāna lasītājam šie elementi izskatīsies kā juceklis. tas nevarēs sniegt noderīgu informāciju jūsu vietnes apmeklētājiem.

Iestatot iesaiņojuma lomu uz progresa joslaun pievienojot aria-valuenow, ārija-valuemīns, un aria-valuemax atribūtus iesaiņojumam, joprojām varat norādīt progresu.

Mūsdienu laikmetā pieejamu vietņu izveide ir svarīgāka nekā jebkad agrāk. Tur ir vairākas React komponentu bibliotēkas, kas izveidotas, paturot prātā pieejamību.

Pieejama vietne var ne tikai palīdzēt noteikt jūsu meklēšanas rangu vairākās lielākajās meklētājprogrammās, bet arī nodrošināt, ka jūs neizslēdzat potenciālo lietotāju grupu no savas lietotāju bāzes.

Atbilstošu ARIA atribūtu pievienošana savai vietnei palīdzēs nodrošināt, ka informāciju sniedzat visiem lietotājiem. Gala rezultāts būs vietne, kas uzņem visas auditorijas un piedāvā visiem pēc iespējas tuvāk tādu pašu pieredzi.

Kurus ARIA atribūtus man vajadzētu izmantot?

Ir daudz dažādu atribūtu, kas jums jāizmanto savā vietnē. Kopumā šie atribūti iedalās divās dažādās kategorijās. Pirmais ir logrīku atribūti, kas parasti apraksta pielāgotu interaktīvu elementu.

Otra kategorija, kas jums jāzina, ir attiecību atribūti. Tie ir atribūti, kas nodod informāciju palīgtehnoloģijām par to, kā konkrēts elements ir saistīts ar pārējo vietni vai citiem elementiem.

Apsverot, kuri ARIA atribūti ir jāiekļauj, vienkāršā atbilde ir pēc iespējas vairāk. Visur, kur jūsu izmantotais elements neapraksta lomu, kuru elements pilda, ir jāizmanto lomas atribūts.

Ja jums ir lauks ar etiķeti, šajā laukā ir jābūt aria-labeledby atribūts. Kamēr jūsu izmantotajiem atribūtiem ir jēga, jūs tikai padarāt savu vietni pieejamāku, pievienojot tos.

Logrīku atribūti ir daudz lielāka kategorija. Tas satur lielāko daļu ARIA atribūtu, kas jums būs jāpievieno standarta vietnei. Iepriekšējā pielāgotās norises joslas piemērā aria-valuenow, aria-valuemin un aria-valuemax visi ir logrīku atribūti. Tie raksturo tā elementa stāvokli vai iespējamos stāvokļus, uz kuriem tie atrodas.

Ir daudz dažādu atribūtu, ko varat izmantot, lai aprakstītu elementa stāvokli. Viens no visizplatītākajiem ir ārijas etiķete. Šis atribūts elementam, kuram to ievietojat, pievieno etiķeti, kas ir redzama tikai palīgtehnoloģijām.

Vēl viens izplatīts ARIA atribūtu pāris, kas ietilpst šajā kategorijā, ir ārija-slēpta un ārija invalīds. Tie var paziņot lietotājam par elementa pašreizējo stāvokli un to, vai ekrāna lasītājam tas jānolasa. Tas ir noderīgi dažādām ierīcēm ar saviem ekrāna lasītājiem.

Attiecību atribūti

Atšķirībā no logrīku atribūtiem relāciju atribūti sniedz palīgtehnoloģijas norādes par elementa saistību un lietošanu ar citiem elementiem ap to. Visizplatītākais no tiem ir lomu atribūts. Loma norāda, kādam mērķim elements kalpo vietnē.

Ja iestatāt lomu piedēvēt navigācija, tas nekavējoties tiks identificēts kā navigācijas ietvars.

Daži attiecību atribūti nosaka, kā elements ir saistīts ar citiem elementiem ap to. The aria-labeledby atribūts, piemēram, parāda, kurš elements darbojas kā šī elementa etiķete. Tas var būt noderīgi, ja izmantojat izkārtojumus, kuriem ir vizuāla jēga, bet aiz tiem dokumenta plūsmā ir uzlīmes konkrētām veidlapas vadīklām.

Lai gan attiecību atribūtu ir mazāk nekā logrīku atribūtu, šiem atribūtiem bieži ir lielāka nozīme. Tie bieži vien var aprakstīt dokumenta plūsmu un kontroli, kā arī sniegt papildu informāciju par to, kā lietotājs var pārvietoties jūsu vietnē.

Šie atribūti ir īpaši svarīgi, veidojot veidlapas un navigācijas vienumus savā vietnē.

Kāpēc ir tik svarīgi iekļaut ARIA atribūtus savā HTML?

ARIA atribūti kalpo vienkāršam un nepieciešamam mērķim jūsu vietnē. Tie kalpo, lai nodrošinātu, ka vietne ir pieejama visiem lietotājiem neatkarīgi no pieejamības programmatūras izmantošanas. Lietotājiem ar invaliditāti, ja jūsu vietnē ir šie atribūti, vietne var kļūt lietojama.

Vēlamā metode darbam ar palīgtehnoloģiju ir izmantot pareizos semantiskos elementus. Tomēr, ja tas nav iespējams, ARIA atribūti ļauj brīvi strādāt, lietotājiem nezaudējot saturu.