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

2 minuto(s)

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

Fuente: powermapper.com/tests/screen-readers/aria/

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.