WAI-ARIA Accessibilitat Digital

Ir a contenido Ir a Estudios, Gobernanza y organización
Logo UA
Realizar búsqueda
Menú
Altres llocs
Logo Accessibilitat Digital   Accessibilitat Digital
Accessibilitat Digital

WAI-ARIA

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.0 i s'està elaborat la 1.1.

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

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

Tabindex

Cal recordar que en HTML 4 i XHTML solament poden rebre el focus els enllaços i elements de formulari. No succeeix el mateix amb els esdeveniments, ja que en tots els elements es poden incloure esdeveniments.

Per exemple en un element LI d'una llista, si incloem els esdeveniments onclick i onkeypress no podrem accedir a l'element mitjançant el teclat %u2013com poden ser els usuaris de lectors de pantalla- perquè mai rebrà el focus.

Perquè un element, que no siga un enllaç o control de formulari, puga rebre el focus s'utilitza l'atribut tabindex. A continuació es llisten els possibles valors que pot tenir:

tabindex="0": permet que un element que no agafa el focus per defecte puga rebre el focus. Podràs accedir amb el tabulador fins a ell i l'ordre vindrà definit per la seua posició en el document.

Exemple:

  • tabindex="-1": es diferencia del cas anterior en què no podrem tabular fins a l'element. El que permet és que puga agafar el focus mitjançant JavasScript amb .focus().

    Exemple:

    Per a una finestra emergent simulada mitjançant un DIV (div role=%u201Ddialog%u201D): en obrir-la el focus haurà de moure's al seu primer element i en tancar-la haurà de tornar a l'element que la va obrir.

    tabindex=%u201Dx%u201D on x és un nombre enter. Defineix un ordre de tabulació explícit: 1,2, 3, etc.

    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=%u201D[nom_de el_rol]%u201D.

    Per exemple:


      ,


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

    Pots consultar tots els rols en WAI-ÀRIA 1.0 (Categorization of Rols) (http://www.w3.org/tr/wai-aria/roles#rols_categorization )

    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)

    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 pagina i transmetre la naturalesa de les mateixes. D'aquesta manera afegim 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.

    Estats i propietats

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

  • Llenguatges
  • En aquest exemple s'indica que l'element de l'arbre "Llenguatges" està plegat. Quan l'usuari ho 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.

    $aneu.attr('ària-expanded', 'true');


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

    Podeu trobar el llistat i descripció de tots ells en ÀRIA 1.0 (Supported States and Properties): (http://www.w3.org/tr/wai-aria/states_and_properties )

    Alguns exemples d'ú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 solament les parts que canvien, i amb ària-relevant per a indicar el tipus d'actualització que volem que s'anuncie.

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

    Tant ària-label com a ària-labelledby permeten etiquetar un element.

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

    Exemple d'ària-label:




    Exemple d'ària-labelledby:

    Download 2012 Sales Report:
    PDF
    Word
    Powerpoint

    Cal anar amb compte amb el seu ús. ària-label poden ser desatesa si s'usa amb ària-labelledby i anul·la altres formes natives d'etiquetatge com ALT en les imatges o

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

    Un de les novetats previstes en la versió WAI-ÀRIA 1.1 serà la inclusió d'ària-describedat que permetrà incloure la URL de la pàgina que descriu a l'element.

    Altres estats i propietats
    ària-autocomplete i ària-activedescendant permeten millorar l'accessibilitat dels suggeriments en els camps de formularis.

    Suggeriments en la caixa de cerca de Google. Ària-activedescendant to add focus to child elements. This alert screen readers to read suggestions aloud.

    El més important, i que no has d'oblidar, és que no solament 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í.

    Passos i bones pràctiques per a aplicar WAI-ÀRIA

    En el document del W3C, WAI-ÀRIA 1.0 Primer, se'ns indiquen els passos i bones pràctiques per a aplicar WAI-ÀRIA.