Reglas para usar ARIA en HTML

Qué es ARIA y cuáles son los principios fundamentales de ARIA

El acceso a Internet es un requisito previo para una plataforma exitosa. Desafortunadamente, muchos sitios web tienen barreras de accesibilidad que dificultan o imposibilitan que los usuarios con una discapacidad física vean e interactúen con todos los elementos del sitio web. Si desea que su sitio sea visto por todos los usuarios y obtenga más tráfico y más conversiones, debe invertir su tiempo y esfuerzo en mejorar la accesibilidad de sus páginas web.

¿Qué es la Accesibilidad a Internet?

Si el sitio es accesible, está diseñado para que las personas con discapacidad puedan interactuar con él y ver todo el contenido. Existen estándares específicos llamados Iniciativa de accesibilidad web (WAI) desarrollados por el W3C para ayudar a los propietarios de sitios web a hacer que sus sitios web sean más accesibles.

¿Qué es ARIA?

ARIA significa Aplicaciones de Internet Enriquecidas Accesibles. ARIA es un conjunto de atributos especiales publicados por el W3C que se pueden agregar a los elementos HTML para hacer que las páginas web y las aplicaciones sean más accesibles para las personas con discapacidades. Estos atributos no proporcionan funcionalidad. Proporcionan descripciones adicionales para tecnologías de asistencia (AT), como lectores de pantalla.

Principales funciones de ARIA

Los atributos de ARIA incluyen los siguientes componentes: roles, estados y propiedades.

Roles

Los roles definen el tipo de elemento de la interfaz de usuario. Los roles se agregan a través del atributo role=»<ROLE TYPE>». Después de la instalación, el rol no cambia.

Funciones de ARIA:

  • punto de referencia
  • artilugio
  • documento
  • abstracto
Reglas para usar ARIA en HTML

Roles emblemáticos de ARIA

Los roles de puntos de referencia facilitan la navegación al dividir la página en diferentes secciones, como búsqueda, banner, navegación, aplicación, etc. De esta forma, el lector de pantalla puede anunciar el inicio y el final de cada función importante que ayuda a las personas con discapacidad a identificar las diferentes partes de una página web.

Widget de roles ARIA

Los roles de los widgets se utilizan para dar significado a los elementos de la interfaz de usuario, como enlaces, botones, casillas de verificación, etc. Los atributos del widget permiten que las personas que usan AT interactúen con la página web. Por ejemplo, pueden abrir y cerrar pestañas, completar formularios, etc.

Documentar roles ARIA

Los roles de documento contienen descripciones de las estructuras que organizan el contenido de la página, como img, lista, fila, barra de herramientas, etc.

Funciones ARIA abstractas

Los roles abstractos no se utilizan en el código. Estos son los atributos que utiliza el navegador para dar a los roles su significado y concepto, y para ayudar a agregar nuevos roles.

Estados y Propiedades

Los estados (aria-grab, aria-disabled, aria-checked, etc.) y las propiedades (aria-label, aria-haspopup, aria-control, etc.) admiten roles ARIA. Los estados pueden cambiar por sí solos o en función de la interacción del usuario, mientras que las propiedades no suelen cambiar después de la configuración.

Categorías de estados y propiedades:

  • Atributos de widgets
  • Atributos de región en vivo
  • Atributos de arrastrar y soltar
  • Atributos de relación

Puede obtener más información sobre cada atributo de ARIA en la página de ARIA W3C. https://www.w3.org/TR/wai-aria/

¡Mejora la accesibilidad de tu sitio web!

Ahora comprende qué es ARIA y cómo proporciona información adicional a las tecnologías de asistencia. Al implementar estrategias ARIA, puede asegurarse de que las personas con discapacidad puedan interactuar con su sitio.