Atributo aria HTML5: ¿Qué son y como se usan correctamente?.

¿Qué son exactamente los atributos ARIA en HTML5 y cómo pueden ser utilizados para mejorar la accesibilidad de las aplicaciones web? Estos atributos, utilizados para mejorar la accesibilidad de las aplicaciones web para personas con discapacidades, son una pieza clave en la construcción de interfaces inclusivas y accesibles. Acompáñanos mientras exploramos ejemplos prácticos y descubrimos cómo implementarlos efectivamente en tu código HTML.

Sigue las palabras fuertes si quieres un resumen de todo el artículo.

1. ¿Qué son los atributos aria en HTML5?

Los atributos ARIA, que significa «Accessible Rich Internet Applications» (Aplicaciones Ricas de Internet Accesibles), son una serie de atributos en HTML utilizados para mejorar la accesibilidad de las páginas web para personas con discapacidades.

Estos atributos proporcionan información adicional sobre la estructura, comportamiento e interacción de los elementos en una página web, lo que ayuda a los lectores de pantalla y otras tecnologías de asistencia a comprender y navegar por el contenido de manera más efectiva.

2. Ejemplo para entender para que sirven los atributos aria HTML5.

Imagina que tienes un formulario de registro en una página web. El formulario tiene varios campos, incluido un campo para el nombre de usuario y otro para la contraseña. Además, hay un botón «Enviar» para enviar el formulario.

Sin atributos ARIA, un lector de pantalla podría tener dificultades para entender la estructura y la función de estos elementos. Pero al agregar atributos ARIA, podemos proporcionar información adicional que ayuda a los usuarios con discapacidades a comprender y navegar por el formulario de manera más efectiva.

Aquí hay un ejemplo de cómo podríamos mejorar la accesibilidad del formulario utilizando atributos ARIA en HTML:

En este ejemplo:

• Se utilizan atributos aria-label para proporcionar etiquetas accesibles para los campos de entrada y el botón de envío. Esto permite que los usuarios que dependen de lectores de pantalla sepan qué información se espera en cada campo y cuál es la función del botón.
• Se utiliza el atributo aria-required para indicar que tanto el nombre de usuario como la contraseña son campos obligatorios. Esto ayuda a los usuarios a comprender que deben completar estos campos antes de enviar el formulario.
• Se asegura de que los campos de entrada estén asociados con sus etiquetas correspondientes utilizando el atributo for en las etiquetas <label>. Esto ayuda a los usuarios a relacionar los campos de entrada con sus etiquetas, incluso si no pueden ver visualmente la página.

Estos son solo algunos ejemplos de cómo los atributos ARIA pueden mejorar la accesibilidad de una aplicación web para personas con discapacidades. Al utilizar atributos ARIA de manera efectiva, podemos hacer que nuestras aplicaciones sean más accesibles y utilizables para todos los usuarios.

3. Sintaxis del atributo ARIA.

La sintaxis general para un atributo ARIA es la siguiente:

• elemento es el elemento HTML al que se quiere añadir el atributo ARIA.
• aria-atributo es el nombre del atributo ARIA.
• valor es el valor del atributo ARIA.

3.1. Ejemplo de uso del atributo aria en una etiqueta HTML de imagen.

<img src="image.jpg" alt="Imagen de un gato" aria-label="Gato sentado en una almohada">

En este ejemplo, el atributo aria-label se añade al elemento <img> para proporcionar una etiqueta de texto alternativa más descriptiva que la etiqueta alt predeterminada.

3.2. Consideraciones adicionales sobre el uso del atributo aria:

• Los nombres de los atributos ARIA siempre empiezan por aria-.
• Los valores de los atributos ARIA deben estar entre comillas dobles.
• Se pueden añadir varios atributos ARIA al mismo elemento.
• Es importante utilizar los atributos ARIA correctamente para evitar confusiones y garantizar que el contenido web sea accesible para todos los usuarios.

4. ¿Cómo usar los atributos ARIA en HTML5? Paso a paso

Puedes seguir esta guía para implementar los atributos aria en los elementos HTML de una página web:

1. Identificar la necesidad de usar el atributo ARIA:

• Determine si el elemento HTML tiene suficiente semántica nativa para ser interpretado correctamente por las tecnologías de asistencia.
• Si no es así, o si necesita información adicional, considere usar atributos ARIA.

2. Seleccionar el atributo ARIA correcto:

• Elija el atributo ARIA que mejor se adapte a la información que desea proporcionar.
• Algunos ejemplos comunes incluyen:
  • aria-role: Define el rol semántico de un elemento, como button, menu, alertdialog, etc.
  • aria-label: Proporciona una descripción textual para un elemento no textual, como una imagen o un icono.
  • aria-pressed: Indica si un elemento está presionado, como un botón o una casilla de verificación.
  • aria-selected: Indica si un elemento está seleccionado, como una opción en un menú desplegable.

3. Agregar el atributo ARIA al elemento HTML:

• La sintaxis para agregar un atributo ARIA es similar a la de cualquier otro atributo HTML (para este paso puedes guiarte mejor desde elpunto 3).
• Ejemplo: <button aria-role="button">Mi botón</button>

4. Proporcionar información precisa y concisa:

• El valor del atributo ARIA debe ser preciso, conciso y descriptivo.
• Evite usar información irrelevante o redundante.

5. Probar y evaluar la accesibilidad:

• Es importante probar su código para asegurarse de que los atributos ARIA se estén utilizando correctamente.
• Puede usar herramientas de desarrollo web para probar la accesibilidad de su código.

5. Tipos de atributos ARIA en HTML5.

En HTML5, hay varios tipos de atributos ARIA que se utilizan para mejorar la accesibilidad de las aplicaciones web. Estos atributos se dividen en tres categorías principales:

1. Atributos aria de roles:
2. Atributos aria de propiedades:
3. Atributos aria de estados:

Aquí hay una descripción de cada una de estas categorías junto con algunos ejemplos de atributos ARIA comunes en cada una:

5.1. Atributos aria de roles:

Estos atributos son utilizados para indicar la función o tipo de un elemento en una página web. Estos atributos ayudan a los lectores de pantalla y otras tecnologías de asistencia a comprender la estructura y el propósito de los elementos en la interfaz de usuario. Aquí tienes algunos ejemplos comunes:

• role="button": Indica que un elemento es un botón interactivo.
• role="link": Indica que un elemento es un enlace.
• role="menu": Indica que un elemento es un menú.
• role="list": Indica que un elemento es una lista.
• role="listitem": Indica que un elemento es un ítem en una lista.
• role="checkbox": Indica que un elemento es una casilla de verificación.
• role="radio": Indica que un elemento es un botón de radio.
• role="textbox": Indica que un elemento es un campo de texto.
• role="dialog": Indica que un elemento es un cuadro de diálogo o ventana modal.
• role="tabpanel": Indica que un elemento es un panel de pestañas.
• role="alert": Indica que un elemento es un mensaje de alerta.
• role="status": Indica que un elemento es un área de estado que proporciona información sobre el estado de la aplicación.

Ejemplos prácticos en donde es beneficioso usar estos atributos aria de rol:

1. BOTONES PERSONALIZADOS: Si tienes botones personalizados que no son elementos <button> estándar, como botones creados con <div> o <span>, asignarles el atributo role="button" ayuda a los usuarios con discapacidades a identificarlos como botones interactivos.

2. MENÚS PERSONALIZADOS: Si utilizas menús desplegables personalizados, como menús creados con listas <ul> y CSS, asignarles el atributo role="menu" ayuda a los usuarios con discapacidades a entender que se trata de menús interactivos.

3. LISTAS INTERACTIVAS: Si utilizas listas interactivas que no son listas <ul> o <ol>, como listas creadas con <div> o <span>, asignarles el atributo role="list" ayuda a los usuarios con discapacidades a entender que se trata de listas.

En cada uno de estos ejemplos, el uso de atributos ARIA de rol proporciona una descripción semántica adicional que ayuda a los usuarios con discapacidades a entender la estructura y la función de los elementos en la interfaz de usuario, mejorando así la accesibilidad de la aplicación web.

5.2. Atributos aria de propiedad:

Los atributos ARIA de propiedad proporcionan información adicional sobre un elemento en una página web. Estos atributos se utilizan para describir características específicas o estados de un elemento, lo que ayuda a los usuarios con discapacidades a entender mejor su función y comportamiento. Aquí tienes algunos ejemplos comunes:

• aria-label: Proporciona un nombre descriptivo para un elemento, especialmente útil cuando no hay etiquetas visibles asociadas al elemento.
• aria-labelledby: Permite que un elemento se asocie con otro elemento que lo etiqueta. El valor de este atributo es el ID del elemento que proporciona la etiqueta.
• aria-describedby: Permite que un elemento se asocie con otro elemento que proporciona una descripción adicional. El valor de este atributo es el ID del elemento que proporciona la descripción.
• aria-hidden: Indica si un elemento debe ser oculto de las tecnologías de asistencia. Se utiliza para elementos que son puramente decorativos o no son relevantes para los usuarios.
• aria-required: Indica si un elemento es obligatorio o no. Es útil en formularios para indicar campos obligatorios a los usuarios.

Ejemplos prácticos en donde ese beneficioso usar estos atributos aria de propiedad:

1. FORMULARIOS CON CAMPOS OBLIGATORIOS: En un formulario donde algunos campos son obligatorios, es útil utilizar el atributo aria-required para indicar claramente a los usuarios que esos campos deben completarse antes de enviar el formulario. Esto ayuda especialmente a los usuarios con discapacidades visuales que utilizan lectores de pantalla.

2. CUADROS DE DÍALOGO CON INSTRUCCIONES ADICIONALES: Cuando se muestra un cuadro de diálogo que requiere instrucciones adicionales para los usuarios, se puede utilizar el atributo aria-describedby para asociar un elemento de descripción con el cuadro de diálogo. Esto permite a los usuarios acceder fácilmente a la información adicional utilizando lectores de pantalla u otras tecnologías de asistencia.

3. ICONOS DECORATIVOS O GRÁFICOS: Cuando se utilizan elementos visuales como iconos decorativos o gráficos que no aportan información significativa para los usuarios, se puede utilizar el atributo aria-hidden para ocultar estos elementos a los lectores de pantalla y otras tecnologías de asistencia. Esto evita que los usuarios reciban información innecesaria o confusa.

En cada uno de estos ejemplos, el uso de atributos ARIA de propiedad proporciona información adicional que mejora la accesibilidad de la aplicación web y facilita una experiencia más significativa para los usuarios con discapacidades.

3.3. Atributos aria de estados:

Los atributos ARIA de estado se utilizan para indicar el estado actual de un elemento en una página web. Estos atributos proporcionan información importante sobre el comportamiento interactivo de los elementos y ayudan a los usuarios con discapacidades a comprender mejor cómo interactuar con ellos. Aquí tienes algunos ejemplos comunes:

• aria-disabled: Indica si un elemento está deshabilitado o no. Se utiliza en elementos interactivos, como botones o enlaces, para indicar que no se pueden seleccionar o activar en su estado actual.
• aria-checked: Indica si un elemento de selección, como una casilla de verificación o un botón de alternancia, está marcado o no.
• aria-expanded: Indica si un elemento con contenido desplegable, como un menú desplegable o un acordeón, está expandido o colapsado.
• aria-selected: Indica si un elemento está seleccionado o no en un grupo de elementos similares, como en una lista de opciones.
• aria-hidden: Indica si un elemento debe ser oculto de las tecnologías de asistencia. Se utiliza para elementos que son puramente decorativos o no son relevantes para los usuarios.

Ejemplos prácticos en donde ese beneficioso usar estos atributos aria de estado:

1. BOTONES DESHABILITADOS: Cuando un botón está deshabilitado en una interfaz de usuario debido a ciertas condiciones, es útil utilizar el atributo aria-disabled para indicar claramente a los usuarios que el botón no está disponible actualmente para su interacción.

2. MENÚS DESPLEGABLES O ACORDEONES: En un menú desplegable o acordeón que se puede expandir o colapsar, es importante utilizar el atributo aria-expanded para indicar si el menú está actualmente expandido o colapsado.

3. CASILLAS DE VERIFICACÍON O BOTONES DE ALTERNANCIA: En elementos de selección como casillas de verificación o botones de alternancia, es importante utilizar el atributo aria-checked para indicar si el elemento está marcado o no.

En cada uno de estos ejemplos, el uso de atributos ARIA de estado proporciona información valiosa sobre el estado interactivo de los elementos en la interfaz de usuario, lo que mejora la accesibilidad y la usabilidad para usuarios con discapacidades.

6. ¿Cuándo usar atributos ARIA y cuándo no?

En general, se debe seguir un enfoque de «último recurso» para los atributos ARIA. Esto significa que primero se debe usar la semántica HTML nativa siempre que sea posible. Solo se deben usar atributos ARIA cuando no haya otra forma de proporcionar la información necesaria a las tecnologías de asistencia.

Aquí hay algunas pautas para saber cuándo usar atributos ARIA:

6.1. Cuando SI usar atributo ARIA:

• Elementos personalizados: Si está creando un elemento HTML personalizado que no tiene un equivalente semántico en HTML nativo, puede usar atributos ARIA para definir su rol, estado y propiedades.
• Controles dinámicos: Si está creando controles dinámicos con JavaScript, es posible que no tengan la semántica HTML adecuada. En estos casos, puede usar atributos ARIA para proporcionar información a las tecnologías de asistencia.
• Mejorar la compatibilidad con navegadores antiguos: Algunos navegadores antiguos no tienen un buen soporte para la accesibilidad moderna. En estos casos, puede usar atributos ARIA para proporcionar información adicional que los navegadores antiguos puedan entender.
• Describir elementos no textuales: Si un elemento no tiene texto visible, como una imagen o un icono, puede usar el atributo aria-label para proporcionar una descripción textual.
• Indicar el estado actual de un elemento: Puede usar atributos ARIA para indicar el estado actual de un elemento, como si está seleccionado, expandido o activo.
• Especificar relaciones entre elementos: Puede usar atributos ARIA para definir relaciones entre elementos, como el encabezado de una tabla o la descripción de una imagen.

6.2. Cuando No usar atributo ARIA:

• Si el elemento HTML tiene suficiente semántica nativa: No use ARIA si el elemento HTML ya tiene una representación semántica clara que las tecnologías de asistencia pueden comprender.
• Para estilos visuales: No use ARIA para controlar el estilo visual de un elemento. Use CSS para eso.
• Para duplicar información existente: No use ARIA para duplicar información que ya está presente en el código HTML.
• En lugar de una estructura HTML adecuada: No use ARIA como reemplazo de una estructura HTML adecuada. Asegúrese de que su HTML esté estructurado de manera lógica y semántica.

7 ¿Cuándo y como se incorporaron los atributos Aria en HTML5?

7.1. ¿Cuándo se incorporaron los atributos ARIA

Los atributos ARIA se introdujeron por primera vez en 2008 como parte de la especificación WAI-ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications) del W3C.

Cronología de la incorporación de los atributos ARIA:

• 2008: Se publica la primera versión de la especificación WAI-ARIA.
• 2014: La especificación WAI-ARIA se convierte en una recomendación oficial del W3C.
• 2015: Los principales navegadores web, como Chrome, Firefox y Safari, admiten completamente los atributos ARIA.
• 2018: Se publica la última versión de la especificación WAI-ARIA, que incluye nuevos roles, estados y propiedades.

7.2. ¿Cómo se incorporaron los atributos ARIA?

La incorporación de los atributos ARIA fue un proceso gradual que implicó la colaboración de varios grupos, incluyendo:

• W3C: El W3C desarrolló la especificación WAI-ARIA y proporcionó orientación sobre su implementación.
• Desarrolladores web: Los desarrolladores web adoptaron los atributos ARIA y comenzaron a utilizarlos en sus sitios web.
• Fabricantes de tecnologías de asistencia: Los fabricantes de tecnologías de asistencia actualizaron sus productos para admitir los atributos ARIA.
• Organizaciones de defensa de la discapacidad: Las organizaciones de defensa de la discapacidad abogaron por la adopción generalizada de los atributos ARIA.

PREGUNTAS FRECUENTES Y RESUMEN