Mis on Aria atribuudid HTML-is ja miks need on olulised?

Veebidisainerid, kes pole HTML-i kasutanud, võivad kokku puutuda võõraste atribuutidega. Sõna ARIA eesliitega kuvatakse need atribuudid kõikjal veebis, kuid nende eesmärk võib olla uutele kasutajatele mõistatuslik.

ARIA atribuudid täidavad teie veebisaitide juurdepääsetavuse olulist eesmärki. Need kirjeldavad nii antud elemendi sisu kui ka seda, kuidas element on seotud lehe või teiste seda ümbritsevate elementidega.

Nende ülitähtsate atribuutide lisamine saidile aitab tagada, et kõik külastajad saavad sama kogemuse, olenemata kasutatavast tehnoloogiast.

Mis on ARIA atribuudid?

ARIA on juurdepääsetavate rikkalike Interneti-rakenduste akronüüm. Kaasaegses HTML-is, eriti JavaScripti rikastes rakendustes, ei ole süntaksi põhjal alati selge, millist rolli üksikud elemendid täidavad.

Rollide eristamise raskus võib olla probleem, kui kasutajad vaatavad saiti juurdepääsetavuse tööriistade (nt ekraanilugejad) abil. Õige semantilise HTML-i puudumisel ei pruugi teie lõppkasutaja juurdepääsetavuse tööriistu kasutades saidil navigeerida.

Kuigi teie eelistatud viis selle probleemi lahendamiseks on kasutage HTML5-s õigeid semantilisi elemente, see ei ole alati praktiline ega võimalik. Siin astuvad sisse ARIA atribuudid HTML-elementidel. Need atribuudid aitavad määratleda teie elemendi rolli ja atribuute viisil, mida juurdepääsetavuse tööriistad suudavad töödelda.

Miks on ARIA atribuudid olulised?

Lühidalt, ARIA atribuudid võimaldavad puuetega kasutajatel teie veebisaiti kasutada. Need rollid ja atribuudid määratlevad lisateavet teie saidi erinevate elementide kohta, mis muidu ei pruugi olla kergesti kättesaadavad.

Saate määrata laias valikus ARIA atribuute. Peaksite neid kasutama kõikjal, kus on vaja täiendavat konteksti, et võimaldada dokumendil mittevisuaalsel viisil mõtestada.

Mõelge näiteks saidile, mille põhinavigeerimisseade koosneb a element, mis on mähitud a element, mitte a element:

<divklass="nav">
<ul>
<li>Koduli>
<li>Poodli>
<li>Umbesli>
ul>
div>

Saate kasutajatel navigeerimise hõlbustamiseks kasutada ARIA atribuute. Rolli ja aria-sildi atribuutide lisamine võimaldab ekraanilugejal ja abitehnoloogiatel teada, kus teie menüü on.

<divklass="nav">
<ulrolli="navigeerimine"aaria-silt="Peamine">
<li>Koduli>
<li>Poodli>
<li>Umbesli>
ul>
div>

Kuigi enamikul juhtudel peaksite kasutama õigeid elemente, ei pruugi see teie tegevuse piires alati võimalik olla. Kui näiteks teie sait nõuab edenemisriba kasutamist, kuid soovite kujundust, mida standardriba ei luba.

Selle stsenaariumi korral saate oma edenemisriba kuvamiseks luua kohandatud elementide komplekti. Ekraanilugejale tunduvad need elemendid aga segamini; see ei saa teie saidi külastajatele kasulikku teavet edastada.

Määrates ümbrise rolliks edenemisribaja lisades aria-valuenow, aaria-valumiin, ja aria-valuemax atribuudid ümbrisele, saate siiski edusamme näidata.

Kaasaegsel ajastul on juurdepääsetavate veebisaitide loomine olulisem kui kunagi varem. Seal on mitu Reacti komponentide teeki, mis on loodud juurdepääsetavust silmas pidades.

Juurdepääsetav veebisait ei aita mitte ainult teie otsingujärjestust mitme suurema otsingumootori jaoks, vaid tagab, et te ei lõika oma kasutajabaasist välja potentsiaalseid kasutajarühmi.

Asjakohaste ARIA-atribuutide lisamine saidile aitab tagada teabe esitamise kõigile kasutajatele. Lõpptulemuseks on sait, mis tervitab kõiki vaatajaskondi ja pakub kõigile võimalikult sarnaseid kogemusi.

Milliseid ARIA atribuute peaksin kasutama?

Seal on palju erinevaid atribuute, mida peaksite oma saidil kasutama. Üldiselt jagunevad need atribuudid kahte erinevasse kategooriasse. Esimene neist on vidina atribuudid, mis tavaliselt kirjeldavad kohandatud interaktiivset elementi.

Teine kategooria, mida peate teadma, on suhte atribuudid. Need on atribuudid, mis edastavad teavet abitehnoloogiatele selle kohta, kuidas konkreetne element on seotud ülejäänud saidi või muude elementidega.

Kui mõelda, milliseid ARIA atribuute peaksite kaasama, on lihtne vastus olla nii palju kui võimalik. Kõikjal, kus kasutatav element ei kirjelda rolli, mida element täidab, peaksite kasutama rolliatribuuti.

Kui teil on sildiga väli, peaks sellel väljal olema aaria-märgistatud atribuut. Niikaua kui kasutatavad atribuudid on mõistlikud, muudate nende lisamisega oma saidi juurdepääsetavamaks.

Vidinaatribuudid on palju suurem kategooria. See sisaldab enamikku ARIA atribuutidest, mille peate standardsaidile lisama. Kohandatud edenemisriba varasemas näites on aria-valuenow, aria-valuemin ja aria-valuemax kõik vidina atribuudid. Need kirjeldavad elemendi olekut või võimalikke olekuid, milles nad on.

Elemendi oleku kirjeldamiseks on palju erinevaid atribuute. Üks levinumaid on aaria-silt. See atribuut lisab elemendile, millele selle asetate, sildi, mis on nähtav ainult abitehnoloogiatele.

Teine levinud ARIA atribuutide paar, mis sellesse kategooriasse kuulub, on aaria-peidetud ja aria-puuetega. Need võivad edastada elemendi hetkeoleku ja seda, kas ekraanilugeja peaks selle kasutajale ette lugema. See on kasulik paljude erinevate seadmete jaoks, millel on oma ekraanilugejad.

Suhete atribuudid

Erinevalt vidinaatribuutidest annavad seoseatribuudid abistavatele tehnoloogiatele viiteid elemendi seose ja kasutamise kohta teiste seda ümbritsevate elementidega. Kõige tavalisem neist on rolliatribuut. Roll määrab, millist eesmärki element saidil teenib.

Kui määrate rolli omistada navigeerimine, tuvastatakse see kohe navigeerimisümbrisena.

Mõned suhteatribuudid määravad, kuidas element on seotud teiste seda ümbritsevate elementidega. The aaria-märgistatud atribuut näitab näiteks, milline element toimib selle elemendi sildina. See võib olla kasulik, kui kasutate paigutusi, mis on visuaalselt mõistlikud, kuid millel on dokumendivoos konkreetsete vormijuhtelementide sildid.

Kuigi suhteatribuute on vähem kui vidina atribuute, on need atribuudid sageli suurema tähtsusega. Need võivad sageli kirjeldada dokumendi voogu ja juhtimist ning anda täiendavaid üksikasju selle kohta, kuidas kasutaja saab teie saidil navigeerida.

Need atribuudid on eriti olulised, kui kujundate oma saidil vorme ja navigeerimisüksusi.

Miks on nii oluline ARIA atribuutide kaasamine oma HTML-i?

ARIA atribuudid täidavad teie veebisaidil lihtsat ja vajalikku eesmärki. Nende eesmärk on tagada, et sait on juurdepääsetav kõigile kasutajatele, olenemata juurdepääsetavuse tarkvara kasutamisest. Puuetega kasutajate jaoks võib nende atribuutide olemasolu saidil muuta saidi kasutatavaks.

Abitehnoloogiaga töötamise eelistatud meetod on õigete semantiliste elementide kasutamine. Kui see pole aga võimalik, võimaldavad ARIA atribuudid vabalt töötada, ilma et teie kasutajad sisu kaotaksid.