Pogled u ARIA web standarde i pristupačnost HTML aplikacija
Istinski otvoren i uključiv web zahtijeva tehnologije koje omogućuju korisnicima s invaliditetom oslanjanje na pomoćne tehnologije za uživanje u dinamičnom web sadržaju i modernim web-aplikacijama. W3C-ovi standardi pristupačnosti weba nastoje popuniti web pristupačnim bogatim internetskim aplikacijama (ARIA) koje korisnici s invaliditetom mogu učinkovito koristiti.
ARIA je jedan od brojnih standarda i smjernica za pristupačnost koje objavljuje inicijativa Web Accessibility Intitiative (WAI). Pruža dodatnu oznaku koja se može lako umetnuti u HTML dokumente. WAI-ARIA je cross-platformsko rješenje za sve uređaje koje cilja na Open Web Platform, stoga ne razmišljajte samo o web-lokacijama, već io igrama, digitalnoj zabavi, zdravstvenoj skrbi, mobilnim i drugim vrstama aplikacija.
U ovom postu ćemo pogledati kako možete dodati pristupačnost HTML dokumentima uz pomoć WAI-ARIA standarda.
Okvir ARIA
Sintaksa HTML-a ne dopušta programerima da ispravno opisuju elemente, identificiraju njihove uloge i navode odnose između njih. Iako je to rijetko problem za posjetitelje koji u potpunosti posjeduju svoja osjetila, oni mogu onemogućiti korisnike pomoćne tehnologije da shvate što se događa na zaslonu i istražuju njihove opcije.
To je točka na kojoj ARIA dolazi u našu pomoć, jer omogućuje definiranje svrhe različitih elemenata uz pomoć značajne uloge, i opisati njihovu prirodu atributi s prefiksom arije. Atributi s prefiksom Aria imaju dvije vrste: nekretnine koji opisuju značajke koje se manje vjerojatno mijenjaju tijekom cijelog životnog ciklusa stranice, i Države koji pružaju informacije o stvarima koje se često mijenjaju zbog interakcije korisnika.
Značajne uloge
Značajne uloge su najpoznatiji oblici ARIA modela uloga (drugi su apstraktne uloge, uloge widgeta i uloge strukture dokumenata). Značajne uloge omogućuju razvojnim programerima prepoznavanje velikih vidljive regije na web-stranici koje korisnici pomoćne tehnologije mogu htjeti brzo pristupiti.
Postoji 8 vrsta ARIA orijentirnih uloga, koje je potrebno dodati kao atribute povezanim HTML oznakama.
uloga =”zastava”
Uloga bannera namijenjena je uglavnom za sadržaj koji se odnosi na cijelu web-lokaciju, a ne samo na pojedinačne stranice. Obično se dodaje kao atribut glavnom zaglavlju web-lokacije za logotip i druge važne informacije za cijelu web-lokaciju. Važno je da ulogu bannera možete koristiti samo jednom u bilo kojem HTML dokumentu ili aplikaciji.
uloga =”glavni”
Glavna uloga povezuje se s glavnim sadržajem dokumenta. Ne može se koristiti više od jednom na bilo kojoj HTML stranici. Obično slijedi Navigacijska uloga namijenjena je za označavanje područja koje sadrži navigacijske elemente kao što su veze i popisi na web-lokaciji. Uloga komplementarnih orijentira opisuje dodatni sadržaj koji je povezan s glavnim sadržajem web-lokacije. Treba ga postaviti na sličnu razinu u hijerarhiji DOM-a kao Uloga contentinfo informira korisničke agente o prisutnosti regije u kojoj se mogu naći različite vrste metapodataka, kao što su informacije o autorskim pravima, pravne i izjave o privatnosti. Obično se koristi za podnožje web-lokacije. Uloga orijentira obrasca označava obrazac koji čeka korisnički unos. Za obrasce pretraživanja koje biste trebali koristiti Uloga pretraživanja je sama po sebi razumljiva, a namijenjena je pomoći pomoćnim tehnologijama da identificiraju funkcionalnost pretraživanja web-lokacije. Možete koristiti ulogu orijentira aplikacije za regiju koju želite deklarirati kao web-aplikaciju, a ne kao web-dokument. Nije preporučljivo uključiti ga na tradicionalne web-lokacije jer to upućuje na pomoćne tehnologije za prebacivanje s normalnog načina pregledavanja na način pregledavanja aplikacija. Ovu ulogu možete koristiti samo s velikom pažnjom. Dok vam uloge omogućuju definiranje značenja HTML oznaka, stanja i svojstva pružaju korisniku dodatne informacije o načinu interakcije s njima. I stanja i svojstva označena su s atributi s prefiksom arije sa sintaksom arija-*. Najpoznatiji ARIA atributi su vjerojatno svojstvo koje se traži od arije i stanje koje se provjerava arijom. Arija-potrebna je a svojstvo jer je to trajno obilježje ulaznog elementa (tj. korisnik ga mora popuniti), dok je aria-označeno a država jer okvir za provjeru često može mijenjati vrijednost zbog interakcije korisnika. Države i svojstva ponekad uzimaju vrijednosti tokena (ograničeni skup unaprijed definiranih vrijednosti), na primjer svojstvo aria-live može imati 3 različite vrijednosti: od, pristojan, deklarativan. Sintaksa u ovom primjeru izgleda ovako: U drugim slučajevima vrijednosti arija-prefiksnih atributa su predstavljene žice, brojevi, cijeli brojevi, ID reference ili točno netočno vrijednosti. Upotrijebite atribute odnosa da biste označili odnose između različitih elemenata na web-lokaciji koji se ne mogu drugačije odrediti iz strukture dokumenta. Na primjer Nakon što postavite ulogu ARIA orijentira za vidljivo područje na vašoj HTML stranici, ona može pomoći pomoćnim tehnologijama puno ako promijenite stanja i svojstva podređenih elemenata s prefiksom ARIA u skladu s događajima koji se događaju na zaslonu. To može biti presudno kada korisnici moraju komunicirati s web-lokacijom, primjerice, ispuniti obrazac ili pokrenuti upit za pretraživanje. Opće pravilo o dizajnu pristupačnosti je da trenutno stanje korisničkog sučelja uvijek mora biti vidljivo pomoću pomoćnih tehnologija. Na primjer, ako korisnik odabere opciju u obliku, ona se mora pojaviti i kao pomoćna pomoćna tehnologija. To se može lako postići korištenjem stanja odabranog s arijom sa sljedećom sintaksom: W3C-ova smjernica WAI-ARIA Authoring Practices može vam pružiti mnoge druge ideje o tome kako pravilno uskladiti vizualna i dostupna sučelja vaše web-lokacije. Uporaba ARIA uloga i atributa ponekad može biti suvišna. Kada koristite semantičke oznake HTML5 kao što su Na primjer, nepotrebno je koristiti oblik oznaka uloga za definiranje Dakle, ako ste već dodali skriven HTML atribut za unos obrasca, nepotrebno je dodavati Aria-skrivena stanje, jer ga preglednik prema zadanim postavkama uključuje.. Potonji je dodan W3C specifikacijama u svrhu mapiranja glavni ARIA orijentirna uloga za element semantičkog HTML-a.
uloga =”navigacija”
uloga =”dopunski”
Uloga = „glavni”
. Povezani postovi, popularni članci, najnoviji komentari tipični su primjeri autonomnog komplementarnog sadržaja.uloga =”contentinfo”
uloga =”oblik”
Uloga = „traži”
umjesto.uloga =”traži”
uloga =”primjena”
Stanja i svojstva
Sintaksa atributa s prefiksom Aria
Kako koristiti ARIA države i svojstva
1. Izgradite odnose između elemenata s atributima odnosa
arija-labelledby
svojstvo identificira element koji označava trenutni element.arija-labelledby
- među mnogim drugim stvarima - mogu vezati naslove za ARIA regije na sljedeći način:Ovo je naslov
Glavni sadržaj… 2. Sinkronizirajte stanja i svojstva sa životnim ciklusom elementa
3. Podudaranje vizualnog i pristupačnog sučelja
.
Nemoj prekomjerno koristiti ARIA
ili
, moderni web-preglednici po defaultu dodaju odgovarajuću ARIA semantiku. U ovom slučaju nema smisla zasebno postaviti ARIA-ine značajne uloge.
element. Umjesto
sintaksa je sasvim dovoljno za korištenje samo
. Također je suvišno koristiti HTML atribute kao i odgovarajući ARIA atribut.