4 problemas comunes de accesibilidad web que debe conocer

Problema con la relación de contraste

El problema de accesibilidad más común que he visto a lo largo de los años es la problema de contraste y accesibilidad del coloruna mala relación de contraste dificultará la visualización del contenido de su página y eso será muy perjudicial para sus usuarios, incluidos aquellos con discapacidades visuales.

El contraste es una medida de la diferencia en la "luminancia" o brillo percibido entre dos colores, por ejemplo, es la diferencia entre el color de fondo y el color de primer plano del contenido de su página. Echemos un vistazo a esta barra de navegación.

Digamos que a tu cliente le gusta mucho ese color verdoso y lo encuentra impresionante, pero aquí hay un problema con el contraste. Tenemos un #FFFFFF fondo con un #83A94C color del texto, lo que da como resultado una relación de contraste de 2,71:1, muy por debajo del mínimo 4.5:1 necesario. Para detectar este problema tenemos múltiples soluciones:

1. Utilice un comprobador de contrastes en línea como el Verificador de contraste Webaimque calculará la relación de contraste y le dará un Pase o Falla grado.
2. Utiliza una de las muchas extensiones de comprobación de contrastes de los navegadores, ej: WCAG Comprobación del contraste de colores.
3. Pruebe el comprobador de contraste integrado en el navegador. Para utilizarlo en Google Chrome, abra las herramientas de desarrollo, inspeccione el elemento en cuestión (por ejemplo, el enlace Inicio de nuestra barra de navegación), vaya a la propiedad de color CSS y haga clic en el rectángulo de color para abrir el selector de color. El proceso es exactamente el mismo para Firefox, sólo una pequeña diferencia en la relación se muestra en la parte inferior izquierda del selector de color.

Para obtener más información sobre el contraste, consulte Artículo sobre el contraste y la accesibilidad de los colores.

Problema con el texto del enlace

Los enlaces son una parte importante de la web hoy en día, por lo que hacerlos accesibles es muy importante. Un enlace debe tener sentido e informar al usuario de su contexto, por lo que un enlace poco informativo con texto como leer más, hacer clic aquí, comprobar detalles no es muy útil, así que en lugar de añadir "comprobar detalles" para producto detalles, por ejemplo, utilizar el nombre del producto como "El casco mandaloriano" es mejor y más informativo. Palabras como pulse aquí o más sobre puede omitirse porque un enlace es clicable por defecto y algo como "más sobre las noticias de hoy" puede acortarse a "noticias de hoy". No hay ninguna regla o límite especial sobre la longitud de los enlaces, el el enlace debe ser legible y lo suficientemente largo como para dar una buena descripción de su propósito.

Las imágenes como enlaces son un patrón muy utilizado, por lo que deben seguir las mismas reglas de las que hemos hablado anteriormente. El atributo alt de la imagen jugará el papel de texto del enlace y será anunciado por los lectores de pantalla. Hay múltiples escenarios cuando se tratan imágenes como enlaces, si la imagen es el único contenido del enlace, entonces debe tener un atributo alt, si el enlace tiene algo de texto e imagen en él entonces podemos omitir el atributo alt, aquí hay algunos ejemplos:

<a href="/es/notifications/">
  <img src="/img/notification.png" alt="Notificaciones">
</a>

Consulta aquí algunos enlaces para leer sobre la accesibilidad de los enlaces:Texto y apariencia de los enlaces, Imágenes funcionales.

Entrada de formulario sin etiqueta

Todos hemos visto antes estas entradas de formulario sin etiqueta y sólo un marcador de posición para describir el propósito de la entrada. Una primera nota es que tan pronto como el usuario rellena todas las entradas y los marcadores de posición ya no están a la vista no tendremos ningún contexto visual sobre el propósito de las entradas, pero vamos a centrarnos en la accesibilidad aquí.

Asociar un etiqueta a una entrada nos da dos grandes ventajas, un lector de pantalla leerá la etiqueta cuando el usuario esté enfocado en la entrada del formulario y cuando se pulse o toque una etiqueta el navegador pasa el foco a su entrada asociada. Una solución fácil para este tipo de situación es simplemente añadir etiquetas de la siguiente manera:

    Nombre

    
  

    Apellido

    
  

    Correo electrónico

    
  

    Enviar
  

```

Eso es todo, todas las entradas tienen sus etiquetas asociadas haciéndolas accesibles a todo el mundo. Incluso podemos eliminar los marcadores de posición para evitar duplicar el propósito de la entrada, pero todos sabemos que los escenarios del mundo real no son tan fáciles de tratar, acabas de recibir un diseño que tiene estas entradas de formulario sin etiquetas y el cliente no quiere cambiar esa parte. La primera solución que viene a la mente es aplicar un mostrar: ninguno; o visibilidad: oculto; a nuestras etiquetas, esto las ocultará pero siguen estando ahí ¿verdad? Estas propiedades ocultan los elementos no sólo en la pantalla, sino también para los usuarios de lectores de pantalla, por lo que esto no va a resolver nuestro problema.

Podemos utilizar el patrón de clip para solucionar esto. De esta forma, ocultaremos el contenido visualmente, pero proporcionaremos el contenido a los lectores de pantalla. Crearemos el siguiente CSS sólo sr y aplicarla a todas nuestras etiquetas:

 .sr-only:not(:focus):not(:active) {
   clip: rect(0 0 0 0);
   clip-path: inset(50%);
   altura: 1px;
   overflow: oculto;
   posición: absoluto;
   espacio en blanco: nowrap;
   anchura: 1px;
 }

Esto ocultará nuestras etiquetas, las pondrá a disposición de los lectores de pantalla y se ajustará a nuestro diseño. El sitio :not(:foco):not(:activo) evita que elementos enfocables como a, botón, entrada de ocultarse al recibir el foco.

Sin indicador de enfoque

Una vez hice esto en mi hoja de estilos CSS global:

* {
outline: none; /* horrible error */
}

Alrededor de 2020 me di cuenta de los bordes negros que aparecen en las entradas de formulario de Google Chrome cuando se enfoca o en los botones de la ficha en - que era muy raro, ya que no lo entendía en el momento, después de algunas investigaciones que he encontrado que es debido a la propiedad CSS contorno por lo que la eliminación resuelto que 'Problema' para mí.

En ese momento no tenía ni idea de cuál era la forma correcta de hacerlo. Después de investigar un poco sobre los porqués y los cómos de ese nuevo valor predeterminado, descubrí que el contorno es un indicador de enfoque del elemento y que si se elimina debe proporcionarse un estilo de enfoque obvio, básicamente lo que yo estaba haciendo se considera una mala práctica. Puedes personalizar los indicadores de enfoque como mejor te parezca, pero eliminarlos completamente del sitio web es un gran problema de accesibilidad. Personalizar el estilo de enfoque de un elemento es bastante fácil, por ejemplo:

 a:focus {
   contorno: 4px sólido #ee7834;
   outline-offset: 4px;
 }

Herramientas de accesibilidad

Comprobar todos los temas de los que hemos hablado puede ser mucho trabajo, sobre todo sabiendo que hay muchas más cosas que cubrir sobre accesibilidad, así que para ayudarnos con la accesibilidad tenemos 2 estupendas extensiones de navegador.

Herramienta de evaluación WAVE es un conjunto de herramientas de evaluación que nos ayuda a hacer más accesibles nuestros contenidos web. Está disponible tanto en Google Chrome como en Firefox.

Vamos a probarlo en una pequeña página web que contenga una barra de navegación y una entrada a la que le falte una etiqueta y veremos lo que nos devuelve, después de instalar la extensión, sólo tenemos que hacer clic en el icono de la extensión para utilizarla.

La pestaña Resumen muestra 1 error (elemento de formulario al que le falta una etiqueta), 2 errores de contraste y 1 alerta (falta la estructura del encabezado), como puede ver el resultado es muy claro y detallado. La pestaña Detalles mostrará una lista de todos los errores, alertas y características. También podemos interactuar directamente en la página haciendo clic en esos rectángulos rojos para comprobar la descripción y el tipo de error.

Hacha DevTools es un potente y preciso conjunto de herramientas de accesibilidad. Está disponible tanto en Google Chrome como en Firefox. Después de instalar la extensión, tendremos que abrir el navegador dev tools e ir a la pestaña axe DevTools y hacer clic en Escanear todas mis páginas.

Puede ver que Axe DevTools ha reportado los mismos problemas con la Herramienta de Evaluación WAVE que son problemas de contraste, elemento de formulario al que le falta una etiqueta, y elemento de encabezado faltante, incluso nos dio algunas mejores prácticas a seguir.

Otra forma de comprobar la accesibilidad es utilizar un lector de pantalla y probar el sitio web con él. Existen muchos lectores de pantalla, por nombrar sólo algunos:

• NVDA
• VoiceOver está disponible en los dispositivos macOs.
• Orca es un lector de pantalla gratuito y de código abierto para linux.

Resumen

En este artículo hemos visto algunos problemas comunes de accesibilidad web, formas de resolverlos y algunas herramientas estupendas para comprobar la accesibilidad web. Aún queda mucho por ver sobre la accesibilidad de elementos como diálogos, acordeones y carruseles, pero como has visto en este artículo, hay mucha documentación y herramientas que te ayudarán a resolverlos.

Algunos puntos clave que conviene recordar:

• Comprueba siempre la relación de contraste.
• Proporcione siempre contenido informativo a los enlaces.
• Un elemento de formulario debe tener una etiqueta asociada.
• Se debe proporcionar un estilo de enfoque evidente.