27

En muchas páginas web y en bastantes preguntas de StackOverflow se pueden encontrar atributos que comienzan con aria- y están relacionados con accesibilidad. Por ejemplo:

<div class="text">
    <label id="tp1-label" for="nombre">Nombre:</label>
    <input type="text" id="nombre" name="nombre" size="20"
           aria-labelledby="tp1-label"
           aria-describedby="tp1"
           aria-required="true" />
    <div id="tp1" class="tooltip"
         role="tooltip"
         aria-hidden="true">El nombre es obligatorio</div>
</div>

¿Qué son y para que sirven los atributos aria-*? ¿Cuántos hay y cuáles son los más importantes? ¿Y por qué deberían usarse?

1
  • 2
    Gracias a tus preguntas investigo y aprendo más :p
    – x4mp73r
    Commented el 23 sept. 2016 a las 15:25

3 respuestas 3

31

ARIA significa Accessible Rich Internet Applications, es una especificación técnica cuyo objetivo es aumentar la accesibilidad de los contenidos dinámicos y de los componentes de interfaces dinámicas desarrollados con HTML, JavaScript, Ajax y tecnologías asociadas.

ARIA describe como agregar la semántica y metadatos al contenido HTML con el fin de hacer que los controles de interfaz y los contenidos dinámicos sean más accesibles, especialmente para personas con alguna discapacidad.

Referencia


Los atributos aria-* sirven para agregar información semántica a los elementos de un sitio web, especìficamente propiedades y estados (los cuales forman parte de los roles), los cuales pueden:

  • Informar el estado o las acciones de un elemento de la interfaz gráfica.
  • Indicar que el contenido de una sección puede cambiar cuando hay interacción por parte del usuario, por ejemplo cuando se hace "focus".
  • Informar si hay elementos que forman parte de una interfaz "drag-and-drop", explicando el rol de cada elemento.
  • Indicar relaciones o asociaciones entre elementos del documento, las cuales no pueden ser determinadas según la estructura del mismo.

Referencia


La lista de los atributos aria-* es la siguiente:

  • aria-activedescendant
  • aria-atomic
  • aria-autocomplete
  • aria-busy (estado)
  • aria-checked (estado)
  • aria-controls
  • aria-describedby
  • aria-disabled (estado)
  • aria-dropeffect
  • aria-expanded (estado)
  • aria-flowto
  • aria-grabbed (estado)
  • aria-haspopup
  • aria-hidden (estado)
  • aria-invalid (estado)
  • aria-label
  • aria-labelledby
  • aria-level
  • aria-live
  • aria-multiline
  • aria-multiselectable
  • aria-orientation
  • aria-owns
  • aria-posinset
  • aria-pressed (estado)
  • aria-readonly
  • aria-relevant
  • aria-required
  • aria-selected (estado)
  • aria-setsize
  • aria-sort
  • aria-valuemax
  • aria-valuemin
  • aria-valuenow
  • aria-valuetext

Referencia


Para decir cuales son los atributos más importantes creo que es un poco subjetivo, no existe una referencia o recomendación oficial y considero que es mejor ver la compatibilidad que ofrecen o no los dispositivos como los lectores de pantallas, teclados Braille, etc.

Aquí dejo un enlace actualizado constantemente que muestra la compatibilidad de algunos atributos ARIA con los distintos lectores de pantalla que existen.


Los atributos ARIA deberíamos utilizarlos para que las personas que tienen (tenemos) alguna discapacidad puedan navegar y entender fácilmente la estructura de los sitios web que implementamos/desarrollamos/creamos.

Entre los dispositivos para personas con discapacidad están:

  • Apuntadores
  • Conmutadores
  • Lectores de pantalla
  • OCR
  • Teclados

En este enlace en inglés hay algunas historias de como algunas personas con discapacidad utilizar la web y que herramientas podemos usar para que estas personas puedan navegar mejor por nuestros sitios web.

4

Quizá no sea tomada como respuesta pero este articulo puede ayudar(en inglés) para conocer y comprender el estándar WAI-ARIA

En conclusión

¿Qué es ?

Se trata de un conjunto de atributos para ayudar a mejorar la semántica de un sitio web o una aplicación web para ayudar a las ayudas técnicas, tales como lectores de pantalla para ciegos, dar sentido a ciertas cosas que no son nativos de HTML.

¿sobre su uso?

0

Este artículo pude ayudar a comprender el estándar WAI-ARIA.

¿Qué es ARIA?

ARIA es la abreviatura de Accessible Rich Internet Applications. ARIA es un conjunto de atributos que puede agregar a los elementos HTML que definen formas de hacer que el contenido web y las aplicaciones sean accesibles para los usuarios con discapacidades que usan tecnologías de asistencia (AT). Cuando los problemas de accesibilidad no se pueden gestionar con HTML nativo, ARIA puede ayudar a cerrar esas brechas.

¿Cuántos hay y cuáles son los más importantes?

Estás son todos los roles en una imagen. Además de roles, cuenta con estados y propiedades.

introducir la descripción de la imagen aquí

Para obtener más información, consulta la documentación oficial de WAI-ARIA o la Introducción a ARIA de Google.

1

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.