WAI-ARIA

Introducció

WAI-ÀRIA (Web Accessibility Initiative - Accessible Rich Internet Applications) és una especificació del W3C, recomanació des del 20 de març de 2014. La versió actual és la 1.1.

WAI-ÀRIA (ÀRIA i els controls desenvolupats amb Ajax, HTML, Javascript i les seues tecnologies relacionades.

WAI-ÀRIA (ÀRIA d'ara en avant) està pensat per a fer més accessible el contingut dinàmic ?principalment Javascript i Ajax- transmetent a les APIs d'accessibilitat dels navegadors web informació sobre el comportament de la interfície i la seua estructura, perquè els productes de suport puguen accedir a aquesta informació.

Exemples de components que necessiten atributs WAI-ÀRIA són els quadres modals, carrusels, àrees interacticas en les quals es recarrega el contingut dinàmicament, menús desplegables, etc.

En els següents apartats es descriuen els principals atributs i propietats de WAI-ÀRIA.

 

Tabindex

És convenient recordar que en HTML només poden rebre el focus del teclat els enllaços, botons i elements de formulari.

Per contra els elements HTML com ara llestes, paràgrafs, capes div o span, etc mai rebran el focus del teclat en tractar-se d'elements amb un propòsit diferent: marcar i maquetar el contingut.

Per aquest motiu, no s'ha d'incloure mai esdeveniments javascript com ara onclick o onkeypress en elements de mara i maquetació, ja que estaríem deixant fora als usuaris que accedeixen sense ratolí, com poden ser usuaris de lectors de pantalla o el robot de cerca de Google

Vegem un exemple: si incluímos un esdeveniment onclick en un element div:

 

Prem-me

 

El que estem fent és crear una capa div que simula el comportament d'un enllaç o un botó, que no és el seu propòsit i a més, mai es podrà accedir per teclat ja que aquest element mai rebrà el focus.

Per aquesta raó, no hauríem d'agregar esdeveniments javascript a elements que no siguen enllaços, botons o elements de formulari.

Dit l'anterior, a vegades es fa necessari utilitzar elemensots de marca i maquetació com div o li per a realitzar accions dinàmiques, en aquests coses podem utilitzar l'atribut de WAI-ÀRIA tabindex  per a informar els navegadors web que aqueix element pot rebre el focus i per tant, executar esdeveniments com onclick.

siguiend l'exemple anterior del div amb onclick, li afegiríem l'atribut tabindex amb el valor 0 per a indicar que l'element pot rebre el focus:

 

Prem-me

 

D'aquesta manera, si en un navegador web, anem prement la tecla TAB de nusetro teclat, el focus s'anirà col·locant sobre els enllaços, botons, elements de formulari i els elements marcats amb tabindex="0".

L'atribut tabindex pot utilitzar-se per a diverses comeses depenent del valor que li assignem:

  • tabindex="0": com hem vist en l'exemple permet que un element de marca o maquetació com div, p, li, ..., que no poden rebre el focus per defecte, puguen rebre'l. D'aquesta forma es podrà accedir amb el tabulador fins ell i l'ordre en el qual s'incorpora en la pàgina és el lloc que ocupa en el codi HTML.
  • tabindex="-1": es diferencia del cas anterior que no podrem tabular fins a l'element. El que permet és que puga agafar el focus mitjançant JavasScript amb la funció focus(), per a fer scroll a una part de la pàgina.
    • Un exemple d'ús real seria per a un quadre de diàleg DIV (
      ...
      ): en prémer el botó d'obrir diálgoo, el focus haurà de moure's a l'element que hem marcat amb tabindex="-1" i en tancar-la haurà de tornar a l'enllaç o botó que la va obrir.
  • tabindex=”x” on x és un nombre enter. Defineix un ordre de tabulació explícit: 1,2, 3, etc. Això vol dir que si posem un element
    ...
    , encara que el codi en la pàgina HTML estiga al final, quan premem tabulador serà el primer element que rep el focus del teclat.
    • No es recomana el seu ús perquè pot crear confusió.

 

Rols

Incloure informació sobre el rol o funció d'un element de la nostra pàgina mitjançant ÀRIA és tan senzill com afegir a l'etiqueta de l'element role=”[nom_de el_rol]”.

Per exemple:

 


      ,



  •  

No s'ha de canviar dinàmicament el rol d'un element, aquest és fix. Si es vol canviar caldria eliminar del DOM l'element i crear un nou amb el nou rol.

Pots consultar tots els rols en Rols of AI-ÀRIA 1.1 (en anglès) .

Existeixen dos tipus de rols, aquells que defineixen elements de la interfície (arbres, alertes, sliders, etc.) i els que defineixen l'estructura de la pàgina (capçalera, navegació, peu).

Landmark rols

Dins dels quals defineixen l'estructura de la pàgina es distingeixen els landmark rols, que s'usen per a identificar àrees separades de la pàgina i transmetre la naturalesa d'aquestes.

Es tracta d'afegir característiques útils de navegació global, consistents en qualsevol document (X)HTML, que transmeten informació de l'estructura de la pàgina i informació semàntica sobre aquestes zones.

Els rols d'estructura i la seua funció són:

  • role=”bàner”. Només ha d'existir un en la pàgina i és per a marcar generalment la capçalera de la pàgina web on es troba el títol, logo, etc.
  • role=”navigation”. Se de utilitzar per a marcar els elements que que formen un menú, per exemple una llista ul.
  • role=”main”.Marca on està el contingut principal de la pàgina.
  • role=”complementary”. Continguts que no són imprescindibles el contingut, per exemple un slider, barra lateral amb publicitat, etc.
  • role=”contentinfo”. Per a marcar una zona en la qual hi ha informació sobre la pàgina i que es repeteix en totes, per exemple la informaicón legal, enllaços de navegació d'un lloc i altra informació que generalment se situa en la part inferior de la pàgina web..
  • role=”search.Per a marcar les zones on hi ha un cercador en la pàgina.
  • role=”form”. Per a marcar les zones on hi ha formularis.
  • role=”application”. Es marca aquesta zona si hi ha una aplicació web interactiva, com a jocs i similar que canvien les regles de l'ús normal del teclat.

En geneal, és recomanable utilitzar les etiquetes natives d'HTML5 per a marcar zones d'un lloc web com pot ser

Ària-label, ària-labelledly i ària-describedby

Aquests atributs ens permeten donar un nom accessible, etiquetar o donar una descripció als elements HTML que ho necessiten. En la referència pots trobar tots els atributs i el seu propòsit (en anglès) .

Ària-label

Serveix per a donar nom accessible a un element. Ha d'usar-se només a vegades que ho requerisquen, per defecte el nom d'un element ha de ser el seu contingut.

Exemple, si tenim un enllaç que tanca un quadre modal i l'escrivim amb una X, el nom accessible hauria de ser tancar.

x

Ària-labelledby

Com a ària-label, serveix per a donar un nom a un element HTML, la diferència és que amb ària-label indiques directament el text i amb ària-labelledby l'aneu/ids de l'element/s de la pàgina que actua/n com a contingut.

Exemple:

 

Descarregar l'informe d'accessibilitat en: 
PDF  
Word  
Powerpoint<>

Ària-describedby

D'altra banda, ària-describedby permet associar una descripció llarga a un element indicant l'aneu de l'element que proporciona la descripció.

Ària-describedat

Similar a ària-describedby, però permet incloure la URL de la pàgina que descriu a l'element.

 

Estats i propietats

Els elements dinàmics canvien d'estat, per exemple un menú desplegable pot estar plegat o desplegat. ÀRIA permet definir les propietats i estats dels elements.

<li role="treeitem" aria-expanded="false" tabindex="0" onclick="a()" onkeypress="a()">Llenguatges</li>

En aquest exemple s'indica que l'element de l'arbre "Llenguatges" està plegat. Quan l'usuari el desplegue hauràs de canviar dinàmicament el seu estat mitjançant javascript perquè els productes de suport puguen transmetre el canvi a l'usuari.

$id.attr('aria-expanded', 'true');

Per tant, el rol és fix, no es canvia, els estats i propietats són dinàmics.

El més important, i que no has d'oblidar, és que no sols has d'indicar l'estat i propietats inicials, sinó que has de modificar-los dinàmicament per javacript quan aquests canvien, de manera que l'usuari de productes de suport conega sempre el seu estat actual. Els rols no s'actualitzen, els estats i propietats sí.

Live regions: ària-live

ària-live permet identificar una zona dinàmica del nostre contingut que s'actualitza automàticament, d'aquesta manera els canvis s'anunciaran a l'usuari dels productes de suport. En funció del seu valor (off, polite, assertive) indicarem quan volem que s'anuncie l'actualització.

Es combina amb ària-atomic per a indicar si volem que s'anuncie tota la regió o solo les parts que canvien, i amb ària-relevant per a indicar el tipus d'actualització que volem que s'anuncie.

 

Conclusions

Per a finalitzar, es llisten unes recomanacions i bones pràctiques per a aplicar WAI-ÀRIA que es troben en la referència oficial de WAI-ÀRIA 1.1 del W3C:

  • Usa marcat nadiu quan siga possible. Si pots usar <input type=”checkbox”> o <button> usa'ls en comptes de <div role=”checkbox”> o <div role=”button>.
  • Tingues en compte que el rol ÀRIA anul·la el rol natiu. Pots consultar la llista d'elements natius que hauries d'intentar usar abans que el seu rol equivalent en una referència ràpida en "What is WAI-ÀRIA, what does it do for em, and what not?", marcozehe.de, març 2014; o íntegrament, amb exemples de males pràctiques i errors comuns en Using WAI-ÀRIA in HTML, W3C.
  • Usa els rols adequats segons l'especificació i recorda que el rol no s'ha de canviar dinàmicament.
  • Forma grups lògics (per exemple amb role=”group”, role=”toolbar”); inclou landmark rols per a facilitar la navegació per teclat; defineix les live regions (zones que canvien dinàmicament sense intervenció de l'usuari)
  • Construeix relacions on siga necessari.

Referències