Aparecer en los primeros lugares de los buscadores no tiene que ser el único motivador para hacer tu sitio web más inclusivo y accesible. La web está llena de infinitas posibilidades.✨
Imagina que tu siguiente cliente sea una persona con capacidades diferentes y que colabore contigo a transformar positivamente tu negocio.
Por otro lado, si tienes un portfolio, imagina que distintos usuarios puedan interactuar con este de distintas formas, con tan sólo, unas pequeñas mejoras en tu código.
Con los principios y criterios de conformidad de WCAG, que son las guías de accesibilidad para sitios webs las cuales fueron creadas en la iniciativa WAI de la W3C; podemos conseguir el objetivo de tener sitios más accesibles e inclusivos.
Te invito a revisar la siguiente imagen para que conozcas de éstos principios:
Ahora que conoces los principios debo mencionarte que, al cumplir con ellos, en mayor o menor medida, alcanzarás un nivel de accesibilidad que va desde el nivel A el más bajo, hasta el nivel AAA siendo este el más alto.
Es por eso que para cumplir con un nivel satisfactorio de accesibilidad te comparto éstas 3 formas de lograrlo:
<ins>1. Utiliza Lighthouse para evaluar tu sitio</ins>
Al abrir la consola de tu navegador te encontrarás con Lighthouse, aquí existen muchas categorías para evaluar tu sitio web, pero nosotros seleccionaremos sólo la categoría Accesibilidad porque es la que nos funcionará para éste objetivo en particular.
Una vez seleccionada podemos generar un reporte que calificará la accesibilidad del sitio puntuando del 1 al 100 y conforme a su calificación rodeará un círculo que se pintará de los siguientes colores:
🔴 Rojo: Poco o nada de accesibilidad.
🟠 Naranja: Suficientemente accesible, con oportunidad de mejora.
🟢 Verde: Perfectamente accesible.
Además, debajo de la calificación, Lighthouse te indicará que pasos puedes seguir para mejorar tu accesibilidad y cómo lograrlo.
<ins>2. HTML Semántico</ins>
Los navegadores utilizan las etiquetas para identificar las secciones y los objetos de interacción de tu sitio web, pero debes ser preciso al momento de utilizarlas, y nombrarlas adecuadamente.
Ejemplo: Para un botón, en lugar de usar una etiqueta
<div>podrías utilizar una etiqueta <button>.</button></div>
<ins>3. Atributos ARIA</ins>
Aquí es donde se pone aún más interesante la accesibilidad web. 😮😮😮
Pero antes quisiera alertarte de algo:
Quiere decir, que debes preferir trabajar siempre con HTML semántico primero, y luego usar ARIA de acuerdo a la estructura de tu sitio y, si es necesario.
Accessible Rich Internet Applications es un conjunto de atributos especiales para accesibilidad que pueden añadirse a cualquier etiqueta, pero especialmente adaptado para HTML.
Existen de tres tipos y son:
Definen el tipo general del objeto, pero, debes ser muy cuidadoso y preferir usar HTML semántico primero, pues las etiquetas funcionan como identificadores, y es una mala prática usar de manera inconsistente éste atributo, tal y como lo dice la W3C aquí.
Cuando visitamos sitios web damos por sentado que mucho del contenido visual tiene un significado, por ejemplo:
Pero; esta situación es ajena a otros usuarios con capacidades distintas, ARIA Properties_sirve para ayudarnos a hacer identificables éstos patrones para los lectores de pantalla._
Sintaxis de ejemplo:<input type="“text”" aria-label="coloca tu nombre">
De la misma forma, un usuario con capacidades diferentes no puede percibir el estado de sus interacciones, por ejemplo:
ARIA states ayuda con esto porque les permite a los lectores de pantalla reconocer el estado de una interacción.
Sintaxis de ejemplo:<input type="”radiobutton”" aria-checked="”true”/">
Ahora que lo sabes, te reto a aplicar todo este conocimiento en tu código HTML, CSS y Javascript profundizando con el siguiente curso.
¡El reto es tuyo! 😎
