Cuando creamos un sitio web, el contenido es más que solo texto. Como aprendí en mi artículo anterior, la accesibilidad es más que solo atributos aria-label o alt en imágenes. A veces agregamos más que imágenes, como SVG, gráficos o incluso consideramos el contraste o un fondo brillante.
Recuerda que si tu quieres leer esté tipo de contenido en inglés puedes visitar mi blog
Cuando pensamos en accesibilidad, primero podríamos pensar en la ceguera, pero ¿qué pasa cuando alguien tiene un accidente y no puede usar una computadora, o están en áreas con demasiada luz, o tienen problemas de visión después de una cirugía y les resulta difícil leer texto (lo sé por experiencia)?
Hoy, ¡quiero compartir con ustedes cosas que he aprendido sobre Accesibilidad en los últimos días! ¡Hagámoslo!
Si quieres probar todos estos casos, recomiendo encarecidamente usar un lector de pantalla como VoiceOver para usuarios de Mac o NVDA para Windows.
Tipos de Imágenes
Cuando agregamos imágenes a nuestros sitios web, algunas de ellas tienen un propósito funcional mientras que otras son decorativas. ¿Cuál es la diferencia?
- Decorativas: Estas funcionan como elementos de estilo o para hacer atractiva la interfaz de usuario sin transmitir un texto o mensaje, como un fondo elegante. Estas imágenes no son necesarias para la funcionalidad o la transmisión de información.
- Funcionales: Estas se incluyen en la aplicación porque son útiles para una acción, como íconos de redes sociales, o imágenes que contienen información como texto o gráficos para estadísticas, o una imagen con texto para tomar una acción, como un banner con una promoción para obtener un descuento o registrarse.
Manejo de Imágenes Decorativas
Para la accesibilidad, las imágenes decorativas no son importantes ni relevantes. Si usas un lector de pantalla, describir una imagen que solo es para el fondo no es importante. Es importante notificar que una imagen es decorativa usando alt="" sin un título o rol, para que el lector de pantalla pueda omitirla.
Por ejemplo:
<main>
<img src="fancy-background.jpg" alt=""/>
</main>Pero si dejas la imagen sin un atributo alt como <img src="fancy-background.jpg"/>, el lector de pantalla notificará al usuario sobre ella.
Manejo de Imágenes Funcionales
¿Qué es una imagen funcional?
Estas son imágenes que cumplen un propósito en la aplicación. como una imagen con una promoción con un enlace de referencia y descuento, o íconos de redes sociales o gráficos de gráficos.
La información se proporciona utilizando el atributo alt. Por ejemplo, en el siguiente marcado, el lector de pantalla omite la imagen del borde elegante y anuncia "LeBron James Jugador de la NBA".
<main>
<img src="fancy-border.jpg" alt=""/>
<img src="lebron-james.jpg" alt="LeBron James Jugador de la NBA"/>
</main>A veces tenemos imágenes fuera del área de visualización que aparecen debido a algún código de JavaScript. Independientemente de si la imagen está fuera del área de visualización, el lector de pantalla aún funciona con el marcado HTML.
Para asegurarnos de que el lector de pantalla ignore estas imágenes, podemos usar el CSS display: none o los atributos hidden o aria-hidden.
En los siguientes ejemplos, el lector de pantalla ignorará la imagen:
<main>
<h1>La NBA</h1>
<img src="lebron-james.jpg" alt="LeBron James Jugador de la NBA" aria-hidden />
<img src="lebron-james.jpg" alt="LeBron James Jugador de la NBA" hidden /> </main>¿Sabías que el texto alt puede ayudar con el SEO? 😎
¿Cómo Hacer Imágenes Accesibles en CSS?
La mayoría de las imágenes de fondo e íconos usan imágenes o fuentes de íconos en CSS. Recomiendo usar imágenes CSS solo para fines decorativos, no funcionales; sin embargo, esto no siempre sucede en el mundo real.
Por ejemplo, aquí hay una imagen de fondo definida en CSS:
.logo {
background-image: url('../logo.png');
background-repeat: no-repeat, repeat;
height: 24em;
width: 100%;
}Ahora, puedo aplicarlo a varios elementos y personalizarlo según el elemento
específico. Por ejemplo:
El aria-label funciona de manera similar a alt, no aparece para los visitantes con visión, pero el lector de pantalla transmite esta información, junto con cualquier contenido adicional dentro.
<span class="logo" aria-label="Bienvenido a la NBA">
¡Compra el juego ahora! </span>
<div class="logo" aria-label="Bienvenido a la NBA">
¡Compra el juego ahora!
</div>Este enfoque funciona, pero parece que estamos dando demasiada responsabilidad al span y al div para mostrar el fondo y contener texto. Además, este enfoque no funciona bien con otros elementos que tienen un rol específico, como los botones.
Una solución más efectiva es reestructurar nuestro HTML utilizando un elemento dedicado a un solo propósito.
Ejemplo:
<div> ¡Compra el juego ahora!
<span class="logo" aria-label="Bienvenido a la NBA"></span>
</div>
<button>
Compra
<span class="logo" aria-label="Bienvenido a la NBA"></span>
</button>¿Cómo Proporcionar Toda la Información?
En los ejemplos anteriores, es sencillo porque implica una sola imagen o botón. Sin embargo, ¿qué pasa con las estadísticas de la NBA que contienen toda la información sobre las estadísticas del juego? ¿Necesito proporcionar texto extenso?
Por ejemplo, en la siguiente imagen. <img src="./gianis.png" alt="Estadísticas de Juego de Giannis Antetokounmpo">
Agregamos la imagen y usamos el atributo alt para proporcionar una descripción, pero naturalmente, falta algo de información sobre las estadísticas.
Una posible solución es agregar un elemento p que contenga la información extra.
<img src="./gianis.png"
alt="Giannis Antetokounmpo Bate Récord">
<p>¡Giannis Antetokounmpo se convierte en el primer jugador en tener 45 puntos, 10 rebotes, 5 asistencias y 0 pérdidas de balón en un juego desde Michael Jordan en 1989!</p>Esto funciona, pero los usuarios con visión verán la información duplicada. ¿Qué podemos hacer para abordar esto?
En esta situación, un enfoque adecuado es ocultar el texto del área de visualización.
Por ejemplo, si usas Kendo UI, ofrece la clase .k-sr-only para ocultar los elementos del área de visualización mientras los mantiene accesibles para los lectores de pantalla. Alternativamente, puedes crear tu propia solución.
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}Otro método alternativo es usar aria-describedby enlazando la imagen con un párrafo y quitándola de la estructura actual del marcado.
<img src="./gianis.png" alt="Giannis Antetokounmpo Bate Récord" aria-describedby="estadisticas-gianis"><p class="sr-only" id="estadisticas-gianis"> Giannis Antetokounmpo se convierte en el primer jugador en tener 45 puntos, 10 rebotes, 5 asistencias y 0 pérdidas de balón en un juego desde Michael Jordan en 1989! </p>
¡Perfecto! Ahora tenemos una gran definición de las estadísticas de una manera accesible.
Contraste del Contenido
El contenido es la siguiente parte de nuestros sitios web cuando luchamos por leer el texto porque a veces tiene un color de fondo y texto con bajo contraste.
A veces, estás en una pantalla con bajo brillo o en un lugar con demasiada luz, por lo que debemos proporcionar contraste para hacer legible el contenido, pero no todo el contenido es igual, tenemos texto grande y estándar.
Chrome puede ayudarte a comprender estas deficiencias visuales al permitirte simular deficiencias en la visión del color.
¿Cómo trabajamos el contraste?
El texto estándar debe tener un contraste de 4.5:1, para textos iguales o mayores de 18 puntos, en negrita iguales o mayores de 14, entonces 3.1, lo que facilita su lectura.
Además, los controles de formulario, botones o íconos deben tener un contraste de 3.1, la única excepción es cuando están desactivados.
Tienes las siguientes herramientas para verificar el contraste de los controles o enlaces:
Extensión de Chrome WCAG color contrast checker.
Verificador de contraste de enlaces:
Texto normal, grande y componentes:
Resumen
Aprendimos la diferencia entre imágenes decorativas y funcionales, cómo manejarlas y cómo los lectores de pantalla pueden omitir imágenes decorativas usando propiedades CSS o atributos HTML como hidden y aria-hidden.
También exploramos técnicas para proporcionar grandes cantidades de información sin romper nuestro diseño combinándolo con aria-describedby y cómo proporcionar un buen contraste para deficiencias en la visión del color.
Espero que esta información sea útil si estás comenzando en el mundo de la accesibilidad como yo.
