ARIA - Pomagalnik

ARIA (Assistive Rich Internet Applications) je specifikacija World Wide Web Consortium-a (W3C) in je namenjena izboljšanju spletne dostopnosti. ARIA omogoča aplikacijam oz. bralnikom zaslona dodatne informacije preko HTML atributov.

V osnovi bralniki zaslonov delujejo dobro s standardno HTML kodo, ampak v primerih ko dodamo še ARIA atribute lahko povezljivost in interaktivnost še izboljšamo. ARIA nima nobenega vpliva na to, kako se elementi prikazujejo v brskalnikih. Prav tako ne dodajajo nobene nove funkcionalnosti, njihova naloga je le informativne narave v obliki nove opisne plasti za bralnike zaslonov.

Uporabne povezave:

HTML5 ARIA spec – http://www.w3.org/html/wg/drafts/html/CR/dom.html#wai-aria
ARIA spec – http://www.w3.org/WAI/PF/aria/

ARIA atributi

ARIA atributi so razdeljeni v dve kategorije, in sicer v “roles” in “states & properties”. Obe kategorije lahko dodamo neposredno v HTML kodo ali pa jo vstavimo s pomočjo JavaScripta. ARIA atribute, ki temeljijo na interakciji je potrebno ob uporabniških interakcijah tudi posodobiti. Seveda obstajajo tudi pravila, kateri elementi lahko uporabljajo določene ARIA atribute. Prav tako so postavljene tudi smernice za načrtovanje, kako in kdaj je potrebno določene elemente posodobiti.

Uporabne povezave:

Roles – http://www.w3.org/TR/wai-aria/roles
States and Properties – http://www.w3.org/TR/wai-aria/states_and_properties
Design Patterns – http://www.w3.org/TR/wai-aria-practices/#aria_ex

ARIA Roles

ARIA Roles (vloge) se dodajajo preko atributa role=”<ROLE TYPE>”. Atribut, ki je določen se ne spreminja več, na voljo pa imamo 4 različne kategorije:

Landmark
Landmark Roles opredeljujejo večja vsebinska področja, kot so npr. navigacija. Bralniki zaslonov jih uporabljajo predvsem za navigiranje. Če uporabljamo Landmark Role je priporočljivo za vse vsebine na strani določiti posamezno vlogo.

Documents
Documents Roles zagotavljajo strukturni opis za določen del in običajno niso interaktivni. Nekatere vloge lahko združimo z obstoječimi HTML atributi, npr. <div role=”form”>, uporabljamo pa jih le v primerih, kjer osnovnih atributov ne moremo uporabiti. Dodajanje ARIA roles na obstoječe HTML atribute, ki so že sedaj semantično pravilni je odveč. Primer: <form role=”form”>.

Widget
Widget Roles opisujejo interaktivne module, ki trenutno nimajo dovolj dobre semantične podpore v HTMLju. Primer: <div role=”tooltip”>

Abstract
Abstract Roles se uporabljajo samo v brskalnikih za lažjo organizacijo vsebine. Ne zagotavljajo nobene dodatne informacije za bralnike zaslona.

ARIA states & properties

ARIA states & properties (stanja in lastnosti) se pogosto uporabljajo za podporo ARIA vlogam, ki obstajajo na strani. Lastnosti običajno opisujejo odnose z drugimi elementi in se običajno, ko jih nastavimo ne spreminjajo. Stanja pa so bolj dinamična in se običajno spreminjajo z JavaSriptom glede na interakcijo uporabnika na spletni strani. Bralniki zaslona so obveščeni ob vsaki spremembi atributa in uporabnika tudi obvestijo o spremembi.

ARIA primer kode


<nav role="navigation">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/contact">Contact Page</a></li>
</ul>
</nav>

Kdaj uporabimo ARIA kodo?

Vsekakor moramo uporabljati osnovne HTML elemente, kadar je le mogoče. Vendar v primerih, ko to ni mogoče pa je priporočljivo uporabiti ARIA elemente. ARIA nam priskoči na pomoč tudi pri novejših HTML elementih, ki še nimajo široke podpore brskalnikov.

Če želite ustvarjati dostopne aplikacije, spletne strani, … uporabljate osnovne HTML elemente, zagotovite podporo tipkovnice in uporabljate prave kontraste pri barvah. To bi moralo zadostovati v osnovi, v primerih ko pa vsebina spletnega mesta ni razumljiva ali podprta v bralnikih zaslona pa uporabite ARIA kodo.

Uporabne povezave: