Što su atributi Aria u HTML-u i zašto su važni?

Što su atributi Aria u HTML-u i zašto su važni?
Čitatelji poput vas podržavaju MUO. Kada kupite putem poveznica na našoj stranici, možemo zaraditi partnersku proviziju. Čitaj više.

Web dizajneri koji su novi u HTML-u mogu naići na skup nepoznatih atributa. S prefiksom riječi ARIA, ti se atributi pojavljuju posvuda na webu, ali njihova svrha može biti misterija novim korisnicima.





ARIA atributi imaju važnu svrhu u pristupačnosti vaših web stranica. Oni opisuju i sadržaj danog elementa i način na koji se element odnosi na stranicu ili druge elemente oko nje.



MAKEUSEOF VIDEO DANA POMICI SE ZA NASTAVAK SA SADRŽAJEM

Dodavanje ovih iznimno važnih atributa vašoj web-lokaciji pomoći će osigurati da svi posjetitelji dobiju isto iskustvo, bez obzira na tehnologiju koju koriste.





Što su ARIA atributi?

ARIA je akronim za Accessible Rich Internet Applications. U modernom HTML-u, posebno aplikacijama bogatim JavaScriptom, nije uvijek jasno na temelju sintakse kakvu ulogu imaju pojedini elementi.

Poteškoće u raspoznavanju uloga mogu predstavljati problem kada korisnici pregledavaju web mjesto pomoću alata za pristupačnost poput čitača zaslona. U nedostatku odgovarajućeg semantičkog HTML-a, vaš krajnji korisnik možda neće moći navigirati web mjestom kada koristi alate za pristupačnost.



Zaslon laptopa s nekim kodom na njemu.

Iako je najbolji način da riješite ovaj problem koristite odgovarajuće semantičke elemente u HTML5 , to nije uvijek praktično niti moguće. Ovdje stupaju ARIA atributi na HTML elementima. Ovi atributi pomažu definirati ulogu i atribute vašeg elementa na način koji alati za pristupačnost mogu obraditi.

Zašto su ARIA atributi važni?

Ukratko, ARIA atributi omogućuju korisnicima s invaliditetom korištenje vaše web stranice. Ove uloge i atributi definiraju dodatne informacije o različitim elementima na vašem web-mjestu koji inače ne bi bili lako dostupni.



Postoji širok izbor ARIA atributa koje možete dodijeliti. Trebali biste ih koristiti svugdje gdje je potreban dodatni kontekst kako bi dokument imao smisla na nevizualni način.

Na primjer, razmotrite web mjesto koje ima glavnu navigaciju sastavljenu od

    element omotan u a
    element, a ne a element:



     <div class="nav"> 
        <ul> 
            <li>Home</li> 
            <li>Shop</li> 
            <li>About</li> 
        </ul> 
    </div>

    Možete koristiti ARIA atribute za pomoć korisnicima u navigaciji. Dodavanje atributa role i aria-label u

      omogućuje čitaču zaslona i pomoćnim tehnologijama da znaju gdje se nalazi vaš izbornik.

       <div class="nav"> 
          <ul role="navigation" aria-label="Main"> 
              <li>Home</li> 
              <li>Shop</li> 
              <li>About</li> 
          </ul> 
      </div>

      Iako biste u većini slučajeva trebali koristiti odgovarajuće elemente, to možda neće uvijek biti moguće unutar ograničenja onoga što radite. Ako, na primjer, vaše web mjesto zahtijeva upotrebu trake napretka, ali želite dizajn koji standardna traka ne dopušta.

      Windows 10 neće ostati povezan s WiFi -jem

      U ovom scenariju možete stvoriti prilagođeni skup elemenata za prikaz trake napretka. Međutim, čitaču zaslona ti će elementi izgledati kao zbrkani nered; neće moći isporučiti korisne informacije posjetiteljima vaše stranice.

      Postavljanjem uloge omotača na traka za napredak , i dodavanjem arija-valuenow , arija-valuemin , i arija-vrijednostmaks atributa omotu, još uvijek možete označiti napredak.

      U modernom dobu izrada dostupnih web stranica važnija je nego ikad. Tamo su nekoliko biblioteka React komponenti izgrađenih imajući na umu pristupačnost .

      Ne samo da dostupno web mjesto može pomoći u rangiranju u pretraživanju za nekoliko glavnih tražilica, ono osigurava da ne odsiječete potencijalnu skupinu korisnika iz vaše baze korisnika.

      Dodavanje odgovarajućih ARIA atributa vašoj web stranici pomoći će vam da informacije prezentirate svim korisnicima. Konačni rezultat bit će stranica koja prihvaća svu publiku i svima pruža što je moguće bliže istom iskustvu.

      Koje ARIA atribute trebam koristiti?

      Postoji mnogo različitih atributa koje biste trebali koristiti na svojoj web stranici. Općenito, ovi atributi spadaju u dvije različite kategorije. Prvi su atributi widgeta koji obično opisuju prilagođeni interaktivni element.

      Druga kategorija koje morate biti svjesni su atributi odnosa. To su atributi koji prenose informacije pomoćnim tehnologijama o tome kako se određeni element odnosi na ostatak stranice ili druge elemente.

      Osoba koja gleda početnu stranicu Googlea na prijenosnom računalu.

      Kada je u pitanju razmatranje koje biste ARIA atribute trebali uključiti, jednostavan je odgovor što je više moguće. Gdje god element koji koristite ne opisuje ulogu koju element ispunjava, trebali biste upotrijebiti atribut role.

      Ako imate polje s oznakom, to bi polje trebalo imati arija-označeno od strane atribut. Sve dok atributi koje koristite imaju smisla, samo njihovim dodavanjem svoju stranicu činite pristupačnijom.

      Atributi widgeta

      Atributi widgeta mnogo su veća kategorija. Sadrži većinu ARIA atributa koje ćete morati dodati standardnom mjestu. U ranijem primjeru prilagođene trake napretka, aria-valuenow, aria-valuemin i aria-valuemax atributi su widgeta. Oni opisuju stanje ili moguća stanja elementa na kojem se nalaze.

      Postoji mnogo različitih atributa koje možete koristiti za opisivanje stanja elementa. Jedan od najčešćih je arija-oznaka . Ovaj atribut primjenjuje oznaku na element na koji ga postavljate i koja je vidljiva samo pomoćnim tehnologijama.

      Osoba koja koristi prijenosno računalo dok sjedi u kafiću.

      Još jedan uobičajeni par ARIA atributa koji spadaju u ovu kategoriju su arija-skrivena i arija-invalid . Oni mogu priopćiti trenutno stanje elementa i treba li ga čitač zaslona pročitati korisniku. Ovo je korisno za niz različitih uređaja s vlastitim čitačima zaslona.

      Atributi odnosa

      Za razliku od atributa widgeta, atributi odnosa daju pomoćnim tehnologijama indikacije o odnosu i upotrebi elementa prema drugim elementima oko njega. Najčešći od njih je atribut uloge. Uloga određuje kojoj svrsi element služi unutar stranice.

      Ako postavite uloga pripisati navigacija , odmah će se prepoznati kao navigacijski omotač.

      zašto moj disk radi na 100%

      Neki atributi odnosa definiraju kako se element odnosi na druge elemente oko sebe. The arija-označeno od strane atribut, na primjer, pokazuje koji element služi kao oznaka za ovaj element. To može biti korisno kada koristite rasporede koji vizualno imaju smisla, ali imaju oznake za određene kontrole obrasca nakon njih u toku dokumenta.

      Web stranica otvorena u pregledniku s otvorenim alatima za razvojne programere.

      Iako ima manje atributa odnosa nego atributa widgeta, ti atributi često imaju veću važnost. Često mogu opisati tijek i kontrolu dokumenta te dati dodatne pojedinosti o načinu na koji korisnik može navigirati vašom web stranicom.

      Ovi su atributi od posebne važnosti kada dizajnirate obrasce i navigacijske stavke na svom web-mjestu.

      Zašto je tako važno uključiti ARIA atribute u svoj HTML

      ARIA atributi služe jednostavnoj i neophodnoj svrsi na vašoj web stranici. Oni služe kako bi osigurali da stranica bude dostupna svim korisnicima, bez obzira na korištenje softvera za pristupačnost. Za korisnike s invaliditetom, posjedovanje ovih atributa na vašem web-mjestu može učiniti web-mjesto upotrebljivim.

      Preferirana metoda za rad s pomoćnom tehnologijom je korištenje odgovarajućih semantičkih elemenata. Međutim, kada to nije moguće, ARIA atributi omogućuju slobodan rad, a da vaši korisnici ne izgube na sadržaju.