Advertisement
  1. Web Design
  2. Accessibility

Cómo usar los roles, propiedades y estados de ARIA en HTML

Read Time:9 minsLanguages:

Spanish (Español) translation by Marilu (you can also view the original English article)

En este tutorial de accesibilidad para principiantes vamos a aprender qué es ARIA, por qué es necesario escribir nuestro HTML teniendo en cuenta ARIA, cuáles son los roles, propiedades y estados de ARIA, y (muy importante) las 5 reglas de uso de ARIA.

¿Qué es ARIA?

ARIA son las siglas de Accessible Rich Internet Applications (Aplicaciones Ricas Accesibles de Internet) y fue creado por el Consorcio de la World Wide Web (W3C). Hoy en día, como mejor práctica, los desarrolladores web utilizan HTML semántico al construir sitios y páginas web. El HTML semántico es donde se utilizan los elementos HTML más apropiados y descriptivos, ayudando a los robots, a los servicios y a aquellos que dependen de las tecnologías de asistencia (AT) a comprender el significado del contenido.

ARIA va un paso más allá, agregando un conjunto de atributos que ayudan a definir el contenido de una página más allá de lo que el HTML puede hacer por sí solo. Estos atributos ARIA añaden cosas como navegación accesible, consejos sobre formularios, mensajes de error y otros útiles potenciadores.

Aquí hay un ejemplo de HTML semántico, hecho mal y luego correctamente:

Mala semántica

Aquí, podemos ver un elemento body que contiene texto anidado usando etiquetas div o span. Aunque esta página puede ser estilizada para que se vea perfectamente bien usando CSS, sería difícil para las personas que confían en los lectores de pantalla entender completamente este contenido porque no está construido adecuadamente.

Buena semántica

En este ejemplo hemos hecho el mismo contenido más accesible utilizando los elementos HTML correctos en la estructura de la página.

  1. El header contiene el contenido introductorio.
  2. El elemento p sirve como logotipo.
  3. main indica que el usuario está entrando en el contenido principal de la página.
  4. Un elemento h1 indica el título del contenido.
  5. Otra etiqueta p indica un párrafo.
  6. Un footer indica que el usuario ha llegado al final de la página; contiene cosas como información sobre derechos de autor y enlaces adicionales.

Con el HTML semántico es más fácil para los usuarios que confían en los lectores de pantalla para entender el contenido de la página; los lectores de pantalla pueden interpretar los elementos de HTML semántico bien utilizados.

Otro ejemplo común que involucra el uso de mala semántica involucra el uso de divs como botones en HTML, estilizándolos para que se vean como un botón real con CSS.

¿Qué son los roles de ARIA?

Siempre que sea posible, se debe utilizar el HTML semántico nativo, pero se pueden utilizar los roles ARIA para rellenar cualquier hueco. Los roles ARIA son aplicados a elementos HTML usando el atributo role, y pueden ser usados:.

  • para describir los elementos más nuevos o conceptuales que podrían no tener un soporte completo para el navegador o ser entendidos por los lectores de pantalla, por ejemplo <button role=''tab''>Tab</button>.
  • para "arreglar" (lo mejor posible) el HTML implementado incorrectamente donde no se ha usado la semántica, por ejemplo <div role=''button''>Button</div>. .

Con estos ejemplos, los usuarios no visuales, con la ayuda de lectores de pantalla, podrán identificar los elementos como pretendemos.

Clasificación de los roles de ARIA

Los roles de ARIA pueden clasificarse en 4 tipos;

  1. Roles abstractos: De acuerdo con la documentación oficial del W3C, estos son los roles utilizados por el navegador. Son la base sobre la que se construyen todos los demás roles de WAI-ARIA. Los autores del contenido no deben utilizar roles abstractos porque no se implementan en la vinculación del API. Ejemplos de roles abstractos incluyen widget, landmark, window, command, etc.
  2. Widget Roles: Los roles de los widgets se utilizan para definir un elemento de interfaz de usuario cuando no se utiliza el HTML semántico. Según el W3C, algunos roles de widget sirven como interfaces de usuario independientes o actúan como parte de un widget compuesto más grande. Algunos ejemplos de roles de los widgets son alert, dialog, checkbox, marquee, etc. Otros roles de los widgets sirven como contenedores que gestionan otros contenidos de widgets. Ejemplos de estos widgets son tree, tablist, menu, menubar, etc.
  3. Estructura del documento: Se trata de funciones que describen las estructuras que organizan el contenido de una página y que no suelen ser interactivas. Roles como estos ayudan a las tecnologías de asistencia a identificar y clasificar las diferentes secciones de una página. Algunos ejemplos son article, toolbar, row, list, etc.
  4. Roles de referencia: Roles de referencia que identifican grandes áreas de contenido. Esto ayuda a las tecnologías de asistencia a definir estas secciones a los usuarios que dependen de ellas. Ejemplos de funciones de referencia son application, form, main, etc.
a list of aria roles image from Introduction to ARIAa list of aria roles image from Introduction to ARIAa list of aria roles image from Introduction to ARIA
una lista de los roles de aria, imagen de la introducción de ARIA de Google

Llevando los papeles aún más lejos, también podemos añadir estados y propiedades de ARIA a los elementos.

¿Qué son los estados y propiedades de ARIA?

Los estados y propiedades de ARIA proporcionan apoyo a los roles de ARIA que existen en una página. Cuando se combinan con los roles, pueden suministrar tecnologías de asistencia con información adicional de la interfaz de usuario. Siempre que hay cambios en los estados o propiedades, las tecnologías de asistencia son notificadas de este cambio para que puedan alertar al usuario de que se ha producido un cambio.

Las propiedades de ARIA se diferencian de los estados en que el valor de una propiedad (como aria-labelledby) suele ser menos probable que cambie a lo largo del ciclo de vida de la aplicación, mientras que es probable que un estado (por ejemplo, aria-checked) cambie con bastante frecuencia debido a la interacción del usuario. Las propiedades y estados de ARIA pueden clasificarse como:

  1. Atributos del Widget
  2. Atributos de las regiones vivas
  3. Atributos de arrastrar y soltar
  4. Atributos de la relación

Atributos del Widget

Estos tipos de atributos se utilizan para los elementos comunes de la interfaz de usuario que reciben las aportaciones del usuario y procesan las acciones del usuario. También se utilizan para apoyar las funciones de los widgets. Entre los ejemplos figuran los siguientes: aria-readonly, aria-required, aria-checked.

Atributos de las regiones vivas

Estos atributos se utilizan para indicar a un usuario que un contenido específico puede cambiar o actualizarse (o, simplemente, que se trata de regiones vivas). Se aplican directamente sobre el elemento que cambia para que las tecnologías de asistencia puedan notificar a los usuarios el cambio en dicho documento/página. Por ejemplo, sería importante hacer uso de aria-live en un elemento que muestra datos en vivo desde un punto final como la bolsa de valores. Ejemplos de atributos como este son aria-live, aria-atomic, aria-busy y aria-relevant.

Atributos de arrastrar y soltar

Se utilizan para elementos que son arrastrables o son objetivos de lanzamiento. Las formas que requieren la carga de cualquier tipo de archivo (imagen, documento pdf, etc.) a menudo utilizan el método de arrastrar y soltar para cargar dicho archivo. Es importante que no se deje de lado a los usuarios que dependen de tecnologías de asistencia, y este tipo de atributo puede ayudar a ello. Ejemplos de ello son el aria-dropeffect para los elementos que reciben el evento de soltar y el aria-draggable para los elementos que son arrastrables.

Atributos de relación

Estos tipos de atributos ayudan a conectar dos elementos que son difíciles de identificar de otra manera utilizando la estructura del documento HTML. Un ejemplo de este tipo de atributo es el aria-labelledby por atributo. Este atributo ayuda a conectar un campo de entrada con una etiqueta en un formulario (pero puede utilizarse para relaciones menos obvias):

Otros ejemplos de atributos de relación son aria-colspan, aria-controls, aria-owns, aria-flowto, etc.

5 Reglas de uso de ARIA

Cuando se utiliza ARIA, hay algunas cosas que se deben y no se deben hacer para asegurarte que tu sitio o el proyecto en el que estas trabajando sea accesible a los usuarios que dependen de lectores de pantalla y otras tecnologías de asistencia. Estas son conocidas como las Reglas de Uso de ARIA y son cinco en número:

ARIA Regla #1

La primera regla del uso de ARIA es la siguiente;

Si puedes usar un elemento o atributo HTML nativo con la semántica y el comportamiento que requieres ya construído, en lugar de volver a utilizar un elemento y añadir un rol, estado o propiedad ARIA para hacerlo accesible, entonces hazlo...

Esto significa que es mejor usar HTML semántico donde esté disponible tanto como sea posible y no recurrir a usar elementos como div en lugar del elemento button y agregar roles, estados o propiedades ARIA para hacer que tales elementos sean accesibles. Hay algunos casos en los que esto podría no ser posible e incluyen:

  1. La función no está disponible actualmente en HTML
  2. Si las restricciones del diseño visual descartan el uso de un elemento nativo en particular porque el elemento no puede ser estilizado como se requiere.
  3. Cuando el elemento HTML nativo no tiene soporte de accesibilidad.

ARIA Regla #2

La segunda regla de uso de ARIA advierte contra el cambio de la semántica nativa del HTML con los roles, estados o propiedades de ARIA. Por ejemplo;

No hagas esto.

Has esto.

ARIA Regla #3

La tercera regla de uso del ARIA establece que todos los controles interactivos de ARIA deben ser accesibles a través del teclado. Esto significa que cualquier acción (arrastrar, soltar, hacer clic, etc.) que los elementos de una página requieran para realizar una acción, los usuarios también deben ser capaces de realizar el equivalente utilizando solo el teclado

Un ejemplo de esto sería presentar un formulario utilizando un botón. El usuario debe poder enviar el formulario pulsando el botón de entrada o de retorno, que también debe ser capaz de recibir el enfoque.

ARIA Regla #4

La cuarta regla de uso de ARIA advierte contra el uso del atributo role con presentation y aria-hidden='true' en elementos que son visibles y enfocables para el usuario. Hacer cualquiera de estas cosas resultaría en que el usuario no se centrara en nada al final. Solo usa aria-hidden='true' en los elementos que no son visibles o con los que no se puede interactuar (pero que son interactivos).

ARIA Regla #5

La quinta y última regla de uso de ARIA establece que todos los elementos interactivos deben tener nombres accesibles, es decir, el nombre de un elemento de la interfaz de usuario. Tomemos este ejemplo:

Esto es incorrecto porque las tecnologías de asistencia no podrían conectar el valor de la etiqueta con el campo input y sus usuarios también tendrían dificultades para comprender que el campo está destinado a su dirección de correo electrónico. En su lugar, haga cualquiera de las siguientes cosas;

o

¡Ahora entiendes ARIA!

Esta introducción te ha dado un conocimiento básico de ARIA. La próxima vez que escribas HTML o JavaScript piensa si ARIA mejoraría lo que has construido y ayudaría a aquellos con problemas de accesibilidad. Y ¡no olvides las 5 reglas de uso de los roles, propiedades y estados de ARIA!

Más tutoriales de accesibilidad

La accesibilidad es una parte esencial del desarrollo de la web que a menudo se pasa por alto. El artículo de Sami Keijonen sobre su importancia te motivará a pensar más en la accesibilidad web:

Aprende más sobre la accesibilidad aquí mismo en Tuts+:

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.