# 👀ARIA — Accesibilidad Web🐱‍🚀

Para muchas personas, la tecnología facilita las cosas. Para las personas con discapacidad, la tecnología hace que las cosas sean posibles

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1648468980614/MtU0Wis2f.png)

A la hora de generar una nueva aplicación web, nosotros como desarrolladores tenemos que tener en cuenta muchas cosas, entre ellas la accesibilidad para personas ciegas o que utilicen algún tipo de lector de pantallas.

> Para muchas personas, la tecnología facilita las cosas. Para las personas con discapacidad, la tecnología hace que las cosas sean posibles. La accesibilidad significa desarrollar contenido para que sea lo más accesible posible sin importar las habilidades físicas y cognitivas de un individuo y sin importar cómo accedan a la web. [https://developer.mozilla.org/](https://developer.mozilla.org/)

Uno de los estándar mas conocidos o utilizados es ARIA, este nos permite hacer mucho mas accesible nuestro sitio web. Este estándar es también conocido como WAI-ARIA (“Accessible Rich Internet Applications”), **ARIA** define una variedad de atributos generalmente en **HTML5**, que se pueden agregar a los elementos para brindar a todos los ***lectores de pantalla*** mas información sobre el elemento, y así ayudar a los usuarios a comprender mejor la pagina web.

Por ejemplo, un atributo útil es el `role`, cuando se agrega a un elemento, este proporcionará al lector de pantalla un contexto adicional sobre cuál es la función de ese elemento en el contexto de una página. Por ejemplo, un humano entiende fácilmente el siguiente código HTML como un menú:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1648468982070/I87daAEE3.png)

Para un lector de pantalla, sin embargo, no es tan simple. Para remediar esto, podemos agregar el atributo `role` con valor `navigation`:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1648468984059/ZDHQfYkYt.png)

Ahora, el lector de pantalla sabrá que este es un menú y presentará las opciones al usuario en consecuencia.

Si bien ARIA no mejora nada del comportamiento del elemento,es decir no generara un gestos o eventos en teclado,si que nos va a permitir modificar el árbol de accesibilidad de cualquiera de ellos.

> Es importante comprender que para usar ARIA no tenemos que modificar ninguna semántica o alguna etiqueta del HTML estándar, simplemente agregar el atributo `role=""` a los `tags` habituales. [https://developers.google.com/](https://developers.google.com/)

Al día de hoy ARIA tiene muchas funcionalidades, como informar al usuario el estado de un formulario o de las casillas de verificación, e incluso generar eventos particulares. En el siguiente documento podrás encontrar diferentes atributos de `role` [Mozilla](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles)

### Si el articulo te gusto o te pareció interesante por favor ayúdame con 👏 🤓 Puedes seguirme en [Twitter](https://twitter.com/suarez__imanol) o encontrarme en [GitHub](https://github.com/FranciscoImanolSuarez) visitando mi sitio web.

[**Francisco Imanol Suarez on about.me**  
*I am a web developer, student, and photographer in Trelew, Argentina. Read my articles.*about.me](https://about.me/franciscoimanol "https://about.me/franciscoimanol")[](https://about.me/franciscoimanol)