Početna » šifriranje » Pogled u ARIA web standarde i pristupačnost HTML aplikacija

    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

    sintaksa, ili u HTML5 više semantički
    . Potonji je dodan W3C specifikacijama u svrhu mapiranja glavni ARIA orijentirna uloga za element semantičkog HTML-a.

    uloga =”navigacija”

    Navigacijska uloga namijenjena je za označavanje područja koje sadrži navigacijske elemente kao što su veze i popisi na web-lokaciji.

    uloga =”dopunski”

    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 = „glavni”. Povezani postovi, popularni članci, najnoviji komentari tipični su primjeri autonomnog komplementarnog sadržaja.

    uloga =”contentinfo”

    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 =”oblik”

    Uloga orijentira obrasca označava obrazac koji čeka korisnički unos. Za obrasce pretraživanja koje biste trebali koristiti Uloga = „traži” umjesto.

    uloga =”traži”

    Uloga pretraživanja je sama po sebi razumljiva, a namijenjena je pomoći pomoćnim tehnologijama da identificiraju funkcionalnost pretraživanja web-lokacije.

    uloga =”primjena”

    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.

    SLIKA: Sky.com resursi za pristupačnost

    Stanja i svojstva

    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.

    Sintaksa atributa s prefiksom Aria

    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.

    Kako koristiti ARIA države i svojstva

    1. Izgradite odnose između elemenata s atributima odnosa

    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 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

    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.

    3. Podudaranje vizualnog i pristupačnog sučelja

    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.

    Nemoj prekomjerno koristiti ARIA

    Uporaba ARIA uloga i atributa ponekad može biti suvišna. Kada koristite semantičke oznake HTML5 kao što su ili

    , moderni web-preglednici po defaultu dodaju odgovarajuću ARIA semantiku. U ovom slučaju nema smisla zasebno postaviti ARIA-ine značajne uloge.

    Na primjer, nepotrebno je koristiti oblik oznaka uloga za definiranje

    element. Umjesto
    sintaksa je sasvim dovoljno za korištenje samo
    . Također je suvišno koristiti HTML atribute kao i odgovarajući ARIA atribut.

    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.

    © Savtec
    Korisni podaci i savjeti za web-razvoj. Programiranje, web dizajn, CSS, HTML, JAVASCRIPT. Konfigurirajte i ponovno instalirajte WINDOWS. Izrada web stranica i aplikacija ispočetka.