Al crear un sitio web, el contenido va más allá de simplemente el texto. Como mencioné en mi artículo previo, la accesibilidad no se limita a atributos aria-label o alt en imágenes. En ocasiones incluimos elementos más allá de las imágenes, como SVG, gráficos, o considerando el contraste o un fondo luminoso.
Recuerda que si deseas leer este tipo de contenido en inglés, puedes visitar mi blog
Cuando pensamos en accesibilidad, solemos pensar en la ceguera en primer lugar, pero ¿qué sucede cuando alguien tiene un percance y no puede utilizar una computadora, o se encuentra en lugares con mucha luz, o padece problemas de visión luego de una cirugía y le resulta complicado leer texto (lo sé por experiencia)?
Hoy, quiero compartir con ustedes algo de lo que he aprendido sobre Accesibilidad recientemente. ¡Comencemos!
Si deseas probar todos estos casos, recomiendo utilizar un lector de pantalla como VoiceOver para usuarios de Mac o NVDA para Windows.
Categorías de Imágenes
Al incluir imágenes en nuestros sitios web, algunas cumplen propósitos funcionales mientras que otras son puramente decorativas. ¿Cuál es la distinción?
- Decorativas: Estas sirven como elementos estéticos o para embellecer la interfaz del usuario sin transmitir un texto o mensaje, como un fondo elegante. Estas imágenes no son esenciales para la funcionalidad o la transmisión de información.
- Funcionales: Estas se incorporan 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 incentivar una acción, como un banner con una promoción para obtener una rebaja o inscribirse.
Manejo de Imágenes de Adorno
En términos de accesibilidad, las imágenes decorativas no poseen importancia ni relevancia. Describir una imagen que solo cumple una función decorativa no es crucial al utilizar un lector de pantalla. Es fundamental indicar que una imagen es decorativa mediante alt="" sin un título o rol, para que el lector de pantalla pueda omitirla.
Por ejemplo:
<main>
<img src="https://codigoencasa.com/mejorando-la-accesibilidad-web-guia-practica-para-imagenes-y-contraste/fancy-background.jpg" alt=""/>
</main>No obstante, si se omite el atributo alt de la imagen como <img src="https://codigoencasa.com/mejorando-la-accesibilidad-web-guia-practica-para-imagenes-y-contraste/fancy-background.jpg"/>, el lector de pantalla informará al usuario sobre dicha imagen.
Manejo de Imágenes Funcionales
¿Qué define a una imagen funcional?
Estas son imágenes que desempeñan una función específica 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 estadísticos.
La información se comunica mediante el atributo alt. Por ejemplo, en el siguiente fragmento de código, el lector de pantalla ignora la imagen del borde elegante y anuncia «LeBron James Jugador de la NBA».
<main>
<img src="https://codigoencasa.com/mejorando-la-accesibilidad-web-guia-practica-para-imagenes-y-contraste/fancy-border.jpg" alt=""/>
<img src="https://codigoencasa.com/mejorando-la-accesibilidad-web-guia-practica-para-imagenes-y-contraste/lebron-james.jpg" alt="LeBron James Jugador de la NBA"/>
</main>En ocasiones, contamos con imágenes fuera del área de visualización que aparecen a raíz de cierto código JavaScript. Sin importar si la imagen se encuentra fuera del área de visualización, el lector de pantalla sigue interactuando con el marcado HTML.
Para garantizar que el lector de pantalla omita estas imágenes, podemos emplear el CSS display: none o los atributos hidden o aria-hidden.
En los ejemplos siguientes, el lector de pantalla ignorará la imagen:
<main>
<h1>La NBA</h1>
<img src="https://codigoencasa.com/mejorando-la-accesibilidad-web-guia-practica-para-imagenes-y-contraste/lebron-james.jpg" alt="LeBron James Jugador de la NBA" aria-hidden />
<img src="https://codigoencasa.com/mejorando-la-accesibilidad-web-guia-practica-para-imagenes-y-contraste/lebron-james.jpg" alt="LeBron James Jugador de la NBA" hidden /> </main>¿Sabías que el texto alt puede contribuir al SEO? ????
¿Cómo Hacer Imágenes Accesibles mediante CSS?
La mayoría de las imágenes de fondo e íconos hacen uso de imágenes o fuentes de íconos mediante CSS. Recomiendo reservar las imágenes CSS únicamente para propósitos decorativos, no funcionales; sin embargo, esto no siempre se cumple en la práctica cotidiana.
Por ejemplo, aquí se presenta una imagen de fondo definida en CSS:
.logo {
background-image: url('../logo.png');
background-repeat: no-repeat, repeat;
height: 24em;
width: 100%;
}Ahora, esta clase puede aplicarse a varios elementos y personalizarse según el elemento en particular
. Por ejemplo:
El aria-label funciona de manera similar al alt, no visible para los visitantes con visión, pero el lector de pantalla transmite esta información, incluyendo 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 puede ser válido, pero parece que estamos asignando demasiada responsabilidad al span y al div para mostrar el fondo y contener texto. Además, este método no se adapta eficazmente a otros elementos con roles específicos, como los botones.
Una solución más efectiva radica en reestructurar nuestro HTML mediante un elemento designado para una única función.
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 las instancias anteriores, el proceso es sencillo ya que implica una sola imagen o botón. Sin embargo, ¿cómo manejamos las estadísticas de la NBA que contienen todo el detalle acerca de las estadísticas del juego? ¿Es necesario incluir texto extenso?
Por ejemplo, en la siguiente imagen. <img src="https://codigoencasa.com/mejorando-la-accesibilidad-web-guia-practica-para-imagenes-y-contraste/./gianis.png" alt="Estadísticas de Juego de Giannis Antetokounmpo">
Integramos la imagen y utilizamos el atributo alt para incorporar una descripción, pero en realidad, falta algo de información acerca de las estadísticas.
Una solución viable es incluir un elemento p que contenga la información adicional.
<img src="https://codigoencasa.com/mejorando-la-accesibilidad-web-guia-practica-para-imagenes-y-contraste/./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>Este método es funcional, no obstante, los usuarios con visión podrían percibir la información duplicada. ¿Qué alternativas existen para abordar esta situación?
En esta coyuntura, una opción adecuada sería esconder el texto del área visual.
Por ejemplo, si empleas Kendo UI, puedes utilizar la clase .k-sr-only para esconder elementos del área visual manteniéndolos accesibles para los lectores de pantalla. De manera alterna, puedes diseñar 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 enfoque alternativo sería emplear aria-describedby enlazando la imagen con un párrafo y retirándola de la estructura actual del marcado.
<img src="https://codigoencasa.com/mejorando-la-accesibilidad-web-guia-practica-para-imagenes-y-contraste/./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>
¡Excelente! Ahora tenemos una descripción detallada de las estadísticas de forma accesible.
Contraste del Contenido
El contenido representa la siguiente parte fundamental de nuestros sitios web, especialmente cuando enfrentamos dificultades para leer el texto debido a un bajo contraste entre el color de fondo y el texto.
En ocasiones, nos encontramos en pantallas con poca luminosidad o en entornos con demasiada luz, por lo que debemos asegurar un contraste adecuado para mejorar la legibilidad del contenido, teniendo en cuenta que no todo el contenido es igual, pues contamos con texto estándar y grande.
Chrome puede ser útil para comprender estas deficiencias visuales al permitir simular problemas de visión del color.
¿Cómo abordamos el contraste?
El texto estándar debe tener un contraste de 4.5:1, para textos de 18 puntos o más, en negrita de 14 puntos o más, entonces 3.1, facilitando la lectura.
Además, los controles de formulario, botones e íconos deben contar con un contraste de 3.1, a menos que estén deshabilitados.
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 distinción entre imágenes decorativas y funcionales, cómo gestionarlas, y cómo los lectores de pantalla pueden ignorar imágenes decorativas utilizando propiedades CSS o atributos HTML como hidden y aria-hidden.
También exploramos técnicas para proveer gran cantidad de información sin alterar nuestro diseño combinándolo con aria-describedby y cómo garantizar un buen contraste para deficiencias en la visión del color.
Espero que este contenido sea de utilidad si te estás iniciando en el mundo de la accesibilidad como yo.
En Grupo MET podemos ayudarte a implementar esta y muchas mas herramienta para optimizar tu trabajo. ¡Contáctanos para saber más!