Kas yra Aria atributai HTML ir kodėl jie svarbūs?

Žiniatinklio dizaineriai, kurie dar nepažįsta HTML, gali susidurti su nepažįstamų atributų rinkiniu. Šie atributai su priešdėliu žodžiu ARIA rodomi visame žiniatinklyje, tačiau naujiems vartotojams jų paskirtis gali būti paslaptis.

ARIA atributai yra svarbūs jūsų svetainių prieinamumo tikslais. Jie apibūdina ir tam tikro elemento turinį, ir tai, kaip elementas yra susijęs su puslapiu ar kitais jį supančiais elementais.

Pridėję šiuos labai svarbius atributus prie savo svetainės užtikrinsite, kad visi lankytojai, nepaisant jų naudojamos technologijos, patirtų tą pačią patirtį.

Kas yra ARIA atributai?

ARIA yra Accessible Rich Internet Applications akronimas. Šiuolaikinėse HTML, ypač „JavaScript“ programose, pagal sintaksę ne visada iš karto aišku, kokį vaidmenį atlieka atskiri elementai.

Sunku atskirti vaidmenis gali būti problema, kai naudotojai peržiūri svetainę naudodami pritaikymo neįgaliesiems įrankius, pvz., ekrano skaitytuvus. Jei nėra tinkamo semantinio HTML, galutinis vartotojas gali negalėti naršyti svetainėje naudodamas pritaikymo neįgaliesiems įrankius.

Nors pageidaujamas būdas išspręsti šią problemą yra naudoti tinkamus semantinius elementus HTML5, tai ne visada praktiška ar įmanoma. Čia įsijungia ARIA atributai HTML elementuose. Šie atributai padeda apibrėžti jūsų elemento vaidmenį ir atributus taip, kad pritaikymo neįgaliesiems įrankiai galėtų apdoroti.

Kodėl ARIA atributai yra svarbūs?

Trumpai tariant, ARIA atributai leidžia naudotojams su negalia naudotis jūsų svetaine. Šie vaidmenys ir atributai apibrėžia papildomą informaciją apie įvairius jūsų svetainės elementus, kurie kitu atveju nebūtų lengvai pasiekiami.

Yra daug įvairių ARIA atributų, kuriuos galite priskirti. Turėtumėte juos naudoti visur, kur reikia papildomo konteksto, kad dokumentas būtų prasmingas ne vizualiai.

Pavyzdžiui, apsvarstykite svetainę, kurios pagrindinė naršymo juosta sudaryta iš a elementas suvyniotas į a elementas, o ne a elementas:

<divklasė="nav">
<ul>
<li>Namaili>
<li>Parduotuvėli>
<li>Apieli>
ul>
div>

Norėdami padėti naudotojams naršyti, galite naudoti ARIA atributus. Vaidmens ir arijos etiketės atributų pridėjimas prie elementas leidžia ekrano skaitytuvui ir pagalbinėms technologijoms žinoti, kur yra jūsų meniu.

<divklasė="nav">
<ulvaidmenį="navigacija"arija-etiketė="Pagrindinis">
<li>Namaili>
<li>Parduotuvėli>
<li>Apieli>
ul>
div>

Nors daugeliu atvejų turėtumėte naudoti tinkamus elementus, tai ne visada gali būti įmanoma atsižvelgiant į tai, ką darote. Jei, pavyzdžiui, svetainėje reikia naudoti eigos juostą, bet norite dizaino, kurio standartinė juosta neleidžia.

Pagal šį scenarijų galite sukurti pasirinktinį elementų rinkinį, kad būtų rodoma eigos juosta. Tačiau ekrano skaitytuvui šie elementai atrodys kaip sumaišyta netvarka; ji negalės pateikti naudingos informacijos jūsų svetainės lankytojams.

Nustatydami įvyniotojo vaidmenį progreso juostair pridedant aria-valuenow, arija-valueminas, ir aria-valuemax atributus, vis tiek galite nurodyti pažangą.

Šiuolaikinėje eroje prieinamų svetainių kūrimas yra svarbesnis nei bet kada anksčiau. Yra kelios „React“ komponentų bibliotekos, sukurtos atsižvelgiant į pritaikymą neįgaliesiems.

Ne tik prieinama svetainė gali padėti nustatyti kelių pagrindinių paieškos sistemų paieškos reitingą, bet ir užtikrinti, kad iš savo vartotojų bazės neatskirtumėte potencialios vartotojų grupės.

Svetainėje pridėję atitinkamus ARIA atributus padėsite užtikrinti, kad informaciją pateiksite visiems naudotojams. Galutinis rezultatas bus svetainė, kuri sveikins visas auditorijas ir visiems pateiks kuo artimesnę patirtį.

Kokius ARIA atributus turėčiau naudoti?

Yra daugybė skirtingų atributų, kuriuos turėtumėte naudoti savo svetainėje. Apskritai šie požymiai skirstomi į dvi skirtingas kategorijas. Pirmasis yra valdiklių atributai, paprastai apibūdinantys tinkintą interaktyvų elementą.

Kita kategorija, kurią turite žinoti, yra santykių atributai. Tai yra atributai, perduodantys informaciją pagalbinėms technologijoms apie tai, kaip konkretus elementas yra susijęs su likusia svetainės dalimi ar kitais elementais.

Kalbant apie tai, kuriuos ARIA atributus turėtumėte įtraukti, paprastas atsakymas yra kuo daugiau. Visur, kur naudojamas elementas neapibrėžia vaidmens, kurį elementas atlieka, turėtumėte naudoti vaidmens atributą.

Jei turite lauką su etikete, tame lauke turi būti arija pažymėta atributas. Tol, kol jūsų naudojami atributai yra prasmingi, pridėdami savo svetainę padarysite ją prieinamesnę.

Valdiklių atributai yra daug didesnė kategorija. Jame yra dauguma ARIA atributų, kuriuos turėsite įtraukti į standartinę svetainę. Ankstesniame tinkintos eigos juostos pavyzdyje aria-valuenow, aria-valuemin ir aria-valuemax yra valdiklių atributai. Jie apibūdina elemento, kuriame jie yra, būseną arba galimas būsenas.

Yra daugybė skirtingų atributų, kuriuos galite naudoti apibūdindami elemento būseną. Vienas iš labiausiai paplitusių yra arija-etiketė. Šis atributas pritaiko etiketę elementui, ant kurio jį įdedate, ir matomą tik pagalbinėms technologijoms.

Kita įprasta ARIA atributų pora, patenkanti į šią kategoriją, yra arija-paslėpta ir arija neįgalus. Jie gali pranešti apie dabartinę elemento būseną ir tai, ar ekrano skaitytuvas turėtų jį perskaityti vartotojui. Tai naudinga įvairiems įrenginiams su savo ekrano skaitytuvais.

Santykių atributai

Skirtingai nuo valdiklių atributų, ryšio atributai suteikia pagalbinėms technologijoms nuorodas apie elemento ryšį ir naudojimą su kitais aplinkiniais elementais. Dažniausias iš jų yra vaidmens atributas. Vaidmuo nurodo, kokiu tikslu elementas naudojamas svetainėje.

Jei nustatysite vaidmenį priskirti navigacija, jis bus nedelsiant identifikuotas kaip navigacijos įvynioklis.

Kai kurie ryšio atributai apibrėžia, kaip elementas yra susijęs su kitais jį supančiais elementais. The arija pažymėta Pavyzdžiui, atributas rodo, kuris elementas veikia kaip šio elemento etiketė. Tai gali būti naudinga, kai naudojate vizualiai prasmingus maketus, bet po jų dokumento sraute yra konkrečių formų valdiklių etiketės.

Nors ryšio atributų yra mažiau nei valdiklių atributų, šie atributai dažnai yra svarbesni. Jie dažnai gali aprašyti dokumento eigą ir valdymą bei suteikti papildomos informacijos apie tai, kaip vartotojas gali naršyti svetainėje.

Šie atributai yra ypač svarbūs, kai kuriate formas ir naršymo elementus svetainėje.

Kodėl taip svarbu į savo HTML įtraukti ARIA atributus

ARIA atributai yra paprastas ir būtinas jūsų svetainės tikslas. Jie padeda užtikrinti, kad svetainė būtų prieinama visiems vartotojams, nepaisant to, ar naudojama pritaikymo neįgaliesiems programinė įranga. Naudotojams su negalia, jei jūsų svetainėje yra šie atributai, svetainė gali būti tinkama naudoti.

Pageidautinas būdas dirbti su pagalbinėmis technologijomis yra naudoti tinkamus semantinius elementus. Tačiau kai to padaryti neįmanoma, ARIA atributai leidžia laisvai dirbti naudotojams neprarandant turinio.