Cuando creamos un sitio web, el contenido es más que solo texto. Como aprendí en mi artículo anterior, la accesibilidad va más allá de solo aria-label o atributos alt en imágenes. A veces agregamos más que imágenes, como SVGs, gráficos o incluso consideramos el contraste o un fondo brillante.
Cuando pensamos en accesibilidad, podríamos pensar primero 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, te recomiendo 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 sirven un propósito funcional mientras que otras son decorativas. ¿Cuál es la diferencia?
- Decorativas: Estas funcionan como elementos de estilo o para hacer la interfaz atractiva 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.
Manejando 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.
Manejando 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 referido y descuento, o íconos de redes sociales o gráficos.
La información se proporciona usando 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 viewport que aparecen debido a algún código de JavaScript. Independientemente de si la imagen está fuera del viewport, el lector de pantalla aún funciona con el marcado HTML.
Para asegurar 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 iconos en CSS. Recomiendo usar imágenes en CSS solo para propósitos decorativos, no para los 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 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 usando 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 del Juego de Giannis Antetokounmpo">
Agregamos la imagen y usamos el atributo alt para proporcionar una descripción, pero falta naturalmente alguna 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 solucionar esto?
En esta situación, un enfoque adecuado es ocultar el texto del viewport. Por ejemplo, si usas Kendo UI, ofrece la clase .k-sr-only para ocultar los elementos del viewport 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 vinculando la imagen a un párrafo y eliminándola de la estructura de marcado actual.
<img src="./gianis.png" alt="Giannis Antetokounmpo Bate Récord"
aria-describedby="gianis-stats">
<p class="sr-only" id="gianis-stats">
¡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 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 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 entender estas deficiencias visuales permitiéndote simular deficiencias de visión de color.
¿Cómo trabajamos el contraste?
El texto estándar debe tener un contraste de 4.5:1, para igual o mayor de 18 puntos, negrita igual o mayor de 14 entonces 3.1, lo que lo hace fácil de leer.
Además, las entradas de formularios, botones o íconos deben tener un contraste de 3.1, la única excepción es deshabilitado.
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: https://webaim.org/resources/linkcontrastchecker/
Texto normal, grande y componentes: https://webaim.org/resources/contrastchecker/
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 de visión de color.
Espero que esta información sea útil si estás comenzando en el mundo de la accesibilidad como yo 😊