Que es el Atributo Aria-* en HTML, como funciona y otros detalles

HTML cuenta con muchas propiedades y utilidades que lo hacen un Lenguaje de Marcado muy variado y potente, que nos ayuda a solucionar problemas y crear funcionalidad de manera rápida sin necesidad en algunos casos de usar un Lenguaje de Programación aparte, HTML cuenta con una propiedad llamada Aria y en este artículo explicaremos de que trata.

Que es Aria ?

Las iniciales ARIA significan Accessible Rich Internet Applications que en español quiere decir Aplicaciones de Internet Enriquecidas y Accesibles.

Aria comprende un conjunto de atributos que hacen a una aplicación o página web más accesible para las personas con discapacidades visuales o auditivas, de esta manera mejoramos su Experiencia y Usabilidad del usuario en nuestro proyecto.

Mediante el atributo Aria tambien podemos darle funcionalidades específicas a los elementos de una página o aplicación Web, estas funcionalidades puedes ser creadas por otros tipos de  Lenguaje de Programación como Javascript.

A continuación veamos el uso del atributo aria mediante aria-disable que proporciona el estado de habilitado o deshabilitado, en este ejemplo le décimos a una lista de postres que se ponga en estado deshabilitado

Lista de Atributos Aria

Los atributos aria que puedes usar son los siguientes:

• 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

Como funciona Aria ?

Una ves que colocas los atributos Aria en tu proyecto web, estos pueden ser leidos y detectados con aplicaciones y entornos diseñados específicamente para personas con discapacidades visuales y auditivas, los entornos más populares son:

• JAWS (Job Access With Speech)
• NVDA (Non Visual Desktop Access)
• Voice Over
• Window Eyes
• Dolphin
• SaToGo
• Entre otros

A continuación puedes ver un video en donde puedes ver el uso de JAWS con el Navegador Mozilla Firefox

Por otro lado Bootstrap 4 el popular Framework para desarrolladores Frontend, utiliza la etiqueta arial-label en el botón para cerrar su Componente Modal

Si no sabes que es Bootstrap te recomendamos leer nuestro artículo Que es Bootstrap, Historia y tu Primer Hola Mundo.

Tendencia del uso de Aria

El atributo Aria se esta haciendo uso cada ves más conforme van pasando los años, podemos ver a continuación como esta siendo Tendencia su uso

Notas

• El nombre general es WAI – ARIA que en español significa Iniciativa de Accesibilidad Web – Aplicaciones de Internet Enriquecidas y Accesibles.
• El 15 de septiembre de 2008, SVG 1.2 Tiny agregó soporte para WAI-ARIA y El 20 de marzo de 2014, WAI-ARIA 1.0 se convirtió en una recomendación de la W3C.

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.