Kaj so atributi Aria v HTML in zakaj so pomembni?

Spletni oblikovalci, ki šele spoznavajo HTML, lahko naletijo na vrsto neznanih atributov. Ti atributi s predpono besede ARIA se pojavljajo po vsem spletu, vendar je njihov namen za nove uporabnike lahko skrivnost.

Atributi ARIA imajo pomemben namen pri dostopnosti vaših spletnih mest. Opisujejo vsebino danega elementa in način, kako se element nanaša na stran ali druge elemente okoli nje.

Če na svoje spletno mesto dodate te zelo pomembne lastnosti, boste zagotovili enako izkušnjo vsem obiskovalcem, ne glede na tehnologijo, ki jo uporabljajo.

Kaj so atributi ARIA?

ARIA je akronim za Accessible Rich Internet Applications. V sodobnem HTML-ju, zlasti aplikacijah, bogatih z JavaScriptom, na podlagi sintakse ni vedno takoj očitno, kakšno vlogo imajo posamezni elementi.

Težava pri razločevanju vlog je lahko težava, ko si uporabniki ogledujejo spletno mesto z orodji za dostopnost, kot so bralniki zaslona. Če nimate ustreznega semantičnega HTML-ja, vaš končni uporabnik morda ne bo mogel krmariti po spletnem mestu, ko uporablja orodja za ljudi s posebnimi potrebami.

Medtem ko je najprimernejši način za rešitev te težave uporabite ustrezne semantične elemente v HTML5, to ni vedno praktično ali mogoče. Tu nastopijo atributi ARIA na elementih HTML. Ti atributi pomagajo definirati vlogo in atribute vašega elementa na način, ki ga lahko obdelajo orodja za dostopnost.

Zakaj so atributi ARIA pomembni?

Skratka, atributi ARIA omogočajo uporabnikom s posebnimi potrebami uporabo vaše spletne strani. Te vloge in atributi določajo dodatne informacije o različnih elementih na vašem spletnem mestu, ki sicer morda ne bi bili na voljo.

Obstaja veliko različnih atributov ARIA, ki jih lahko dodelite. Uporabite jih povsod, kjer potrebujete dodaten kontekst, da bo dokument imel smisel na nevizualni način.

Na primer, razmislite o spletnem mestu, ki ima glavno navigacijo, sestavljeno iz a element, ovit v a element, namesto a element:

<divrazred="nav">
<ul>
<li>domovli>
<li>Trgovinali>
<li>O temli>
ul>
div>

Za pomoč uporabnikom pri navigaciji lahko uporabite atribute ARIA. Dodajanje atributov role in aria-label v omogoča bralniku zaslona in podpornim tehnologijam, da vedo, kje je vaš meni.

<divrazred="nav">
<ulvlogo="navigacija"arija-oznaka="glavni">
<li>domovli>
<li>Trgovinali>
<li>O temli>
ul>
div>

Čeprav bi morali v večini primerov uporabiti ustrezne elemente, to morda ni vedno mogoče v okviru omejitev tega, kar počnete. Če na primer vaše spletno mesto zahteva uporabo vrstice napredka, vendar želite obliko, ki je standardna vrstica ne dovoljuje.

V tem scenariju bi lahko ustvarili nabor elementov po meri za prikaz vrstice napredka. Za bralnik zaslona pa bodo ti elementi videti kot zmešana zmešnjava; ne bo mogel posredovati uporabnih informacij obiskovalcem vašega spletnega mesta.

Z nastavitvijo vloge ovoja na vrstica napredka, in dodajanje arija-valuenow, arija-valuemin, in arija-vrednostmaks atributov za ovoj, lahko še vedno nakazujete napredek.

V moderni dobi je izdelava dostopnih spletnih mest pomembnejša kot kdaj koli prej. obstajajo več knjižnic komponent React, zgrajenih z mislijo na dostopnost.

Ne le, da lahko dostopno spletno mesto pomaga pri vaši uvrstitvi pri iskanju v več večjih iskalnikih, zagotavlja tudi, da ne izločite potencialne skupine uporabnikov iz svoje baze uporabnikov.

Če na spletno mesto dodate ustrezne atribute ARIA, boste zagotovili, da boste informacije predstavili vsem uporabnikom. Končni rezultat bo spletno mesto, ki bo sprejelo vso publiko in vsem predstavilo čim bolj enako izkušnjo.

Katere atribute ARIA naj uporabim?

Obstaja veliko različnih atributov, ki bi jih morali uporabiti na svojem spletnem mestu. Na splošno ti atributi spadajo v dve različni kategoriji. Prvi so atributi pripomočka, ki običajno opisujejo interaktivni element po meri.

Druga kategorija, ki se je morate zavedati, so atributi razmerja. To so atributi, ki podpornim tehnologijam posredujejo informacije o tem, kako je določen element povezan s preostalim delom spletnega mesta ali drugimi elementi.

Ko gre za razmislek, katere atribute ARIA bi morali vključiti, je preprost odgovor čim več. Kjer koli element, ki ga uporabljate, ne opisuje vloge, ki jo element izpolnjuje, morate uporabiti atribut vloge.

Če imate polje z oznako, mora imeti to polje arija-labeledby atribut. Dokler so atributi, ki jih uporabljate, smiselni, samo z njihovim dodajanjem naredite svoje spletno mesto bolj dostopno.

Atributi gradnikov so veliko večja kategorija. Vsebuje večino atributov ARIA, ki jih boste morali dodati standardnemu mestu. V prejšnjem primeru prilagojene vrstice napredka so vsi atributi gradnika aria-valuenow, aria-valuemin in aria-valuemax. Opisujejo stanje ali možna stanja elementa, na katerem so.

Obstaja veliko različnih atributov, ki jih lahko uporabite za opis stanja elementa. Eden najpogostejših je arija-oznaka. Ta atribut elementu, na katerega ga postavite, doda oznako, ki je vidna samo podpornim tehnologijam.

Drug pogost par atributov ARIA, ki spadajo v to kategorijo, je arija-skrita in arija-onemogočeno. Ti lahko sporočijo trenutno stanje elementa in ali naj ga bralnik zaslona prebere uporabniku. To je koristno za različne naprave z lastnimi bralniki zaslona.

Atributi razmerja

Za razliko od atributov gradnika, atributi odnosa dajejo podpornim tehnologijam indikacije o odnosu in uporabi elementa do drugih elementov okoli njega. Najpogostejši med njimi je atribut vloge. Vloga določa, kakšnemu namenu služi element na spletnem mestu.

Če nastavite vlogo pripisati navigacijo, bo takoj prepoznan kot ovoj navigacije.

Nekateri atributi odnosa določajo, kako je element povezan z drugimi elementi okoli njega. The arija-labeledby atribut na primer pokaže, kateri element deluje kot oznaka za ta element. To je lahko uporabno pri uporabi postavitev, ki so vizualno smiselne, vendar imajo za njimi oznake za določene kontrolnike obrazca v toku dokumenta.

Čeprav je atributov razmerij manj kot atributov pripomočkov, imajo ti atributi pogosto večji pomen. Pogosto lahko opišejo potek in nadzor nad dokumentom ter podajo dodatne podrobnosti o tem, kako lahko uporabnik krmari po vašem spletnem mestu.

Ti atributi so še posebej pomembni, ko načrtujete obrazce in elemente za krmarjenje na svojem spletnem mestu.

Zakaj je tako pomembno, da v svoj HTML vključite atribute ARIA

Atributi ARIA služijo preprostemu in potrebnemu namenu na vašem spletnem mestu. Služijo zagotavljanju, da je spletno mesto dostopno vsem uporabnikom, ne glede na uporabo programske opreme za dostopnost. Za uporabnike s posebnimi potrebami lahko s temi atributi na vašem spletnem mestu postane spletno mesto uporabno.

Najprimernejša metoda za delo s podporno tehnologijo je uporaba ustreznih pomenskih elementov. Ko pa to ni mogoče, atributi ARIA omogočajo svobodno delo, ne da bi vaši uporabniki izgubili vsebino.