¡Tercer post sobre accesibilidad web! Hoy voy a seguir repasando los criterios pero esta vez del nivel AA, para mí, uno de los más fáciles. ¿Y esto por qué? En primer lugar porque son menos, en la versión 2.0 son solo 13 y algunos son similares a los que se pueden encontrar en el nivel A, aunque “con una vueltita más”.
Recordá que en el blog ya hice una pequeña introducción sobre qué es la accesibilidad web y repasamos los criterios que conforman el nivel A en accesibilidad.
Sigamos entonces con los criterios que hay que cumplir (además del nivel A) para tener un nivel AA en accesibilidad web según la WCAG.
Principio 1: Perceptible
1.2.4 Subtítulos (en vivo)
Se deben proporcionar subtítulos para todo el contenido de audio en vivo en medios sincronizados.
? En este caso es similar a lo que vimos en el nivel A. En ese nivel los subtítulos eran para los audios pregrabados y en el nivel AA se le suma que también estén disponibles para los audios en vivo. Por ejemplo, un noticiero que se transmite vía web y tiene subtítulos de todo lo que se va diciendo.
1.2.5 Descripción de audio (pregrabada)
Se proporciona una descripción de audio para todo el contenido de video pregrabado en medios sincronizados.
? Si te parece que esto ya lo leíste en el nivel A, estás en lo cierto porque los criterios 1.2.3 de ese nivel y el 1.2.5 del nivel AA se superponen (forma parte de la triada uno del nivel AAA pero eso lo vamos a ver después). Con respecto a esto, la WCAG comenta lo siguiente:
En el Nivel A del Criterio de Conformidad 1.2.3, se puede elegir entre proporcionar una descripción de audio o una alternativa de texto completo.
Pero si desea cumplir con el Nivel AA, según el Criterio de Conformidad 1.2.5, hay que proporcionar sí o sí una descripción de audio; un requisito que ya se cumplió si eligió esa alternativa para 1.2.3; de lo contrario, un requisito adicional.
1.4.3 Contraste (mínimo)
La presentación visual de texto e imágenes de texto debe tener una relación de contraste de al menos 4.5: 1, excepto en los siguientes casos:
- Texto grande: el texto a gran escala y las imágenes de texto a gran escala tienen una relación de contraste de al menos 3: 1
- Incidental: el texto o las imágenes de texto que forman parte de un componente de la interfaz de usuario inactivo, que son pura decoración, que no son visibles para nadie o que forman parte de una imagen que contiene otro contenido visual significativo, no tienen requisitos de contraste.
- Logotipos: el texto que forma parte de un logotipo o nombre de marca no tiene requisitos de contraste.
? Este criterio habla que tiene que ser legible el texto e imágenes de texto. ¿Y cómo podés corroborar el contraste pedido? Hay varias herramientas, una de ellas es Contrast Ratio aunque todas son bastante similares. Básicamente tenés que poner el color del fondo y el color del texto que querés usar y la herramienta te dice cuál es el contraste entre ambos.
1.4.4 Cambiar el tamaño del texto
A excepción de los subtítulos y las imágenes de texto, se debe poder cambiar el tamaño del texto sin tecnología de asistencia hasta en un 200% sin pérdida de contenido o funcionalidad.
? Significa que si una persona está en una página web y utiliza, por ejemplo, el zoom del navegador en hasta un 200%, el diseño y contenido deben poder adaptarse.
1.4.5 Imágenes de texto
Si las tecnologías que se utilizan pueden lograr la presentación visual, el texto se utiliza para transmitir información en lugar de imágenes de texto, excepto en los siguientes casos:
- Personalizable: la imagen del texto se puede personalizar visualmente según los requisitos del usuario.
- Esencial: una presentación particular del texto es esencial para la información que se transmite. Por ejemplo, un logo.
? Vamos con algunos ejemplos:
1) En lugar de usar imágenes de mapa de bits para presentar títulos en una fuente y tamaño específicos, un autor usa CSS para lograr el mismo resultado.
2) Un sitio web contiene el logotipo de la organización en la esquina superior izquierda de cada página. La presentación visual del texto es fundamental para la identidad del logotipo y se incluye como una imagen gif que no permite modificar las características del texto. Al ser considerada de esencial, la imagen se muestra tal cual pero contiene una alternativa de texto.
Principio 2: Operable
2.4.5 Múltiples formas
Debe haber más de una forma disponible para ubicar una página dentro de un sitio web, excepto cuando la página es el resultado de un proceso o un paso en él.
? Este criterio habla sobre que debe haber más de una forma de encontrar las información que hay dentro de un sitio web. Y como ejemplo podemos nombrar el menú, los links, caja de búsqueda, mapa de sitio, etc.
Según la WCAG lo que se busca es que los usuarios ubiquen el contenido de la manera que mejor se adapte a sus necesidades, ya que estos pueden encontrar una técnica más fácil o más comprensible de usar que otra.
¿Y qué hay con eso de “excepto cuando la página es el resultado de un proceso”? Bueno, en ese caso se refiere a, por ejemplo, las páginas de confirmación o las páginas de resultados de búsqueda, que no hay forma de que aparezcan a menos que el usuario comience o complete una tarea.
2.4.6 Encabezados y etiquetas
Los títulos y las etiquetas tienen que describir el tema o el propósito.
2.4.7 Enfoque visible
Cualquier interfaz de usuario operable por teclado debe indicar, de manera visible, donde está puesto el enfoque.
? Para entender mejor este criterio, te propongo un pequeño ejercicio. Entrá a Google y empezá a navegar por la interfaz con la tecla tab. Allí vas a ver que los elementos como Gmail, Imágenes y hasta el doodle al estar enfocados, se remarcan con un cuadrado. Ahora seguí usando tab para llegar hasta la caja de búsqueda, verás como al estar enfocada aparece una barra vertical (lo mismo que cuando usamos el mouse) que indica que se puede introducir texto.
A esto se refiere este criterio, que al usar el teclado para operar una interfaz el usuario debe saber exactamente en dónde está.
Principio 3: Comprensible
3.1.2 Idioma de las partes
El lenguaje humano de cada pasaje o frase en el contenido se determinará mediante programación, excepto en el caso de nombres propios, términos técnicos, palabras de lenguaje indeterminado y palabras o frases que se han convertido en parte de la lengua vernácula del texto.
? Por ejemplo, si tenés un contenido que está determinado como español pero dentro del mismo hay una frase o una parte del texto que esté en otro idioma que no sea el español, debés especificar en el código el cambio de idioma. Esto se hace con el fin de que si una persona está utilizando una tecnología de asistencia en una web, esta pueda leer ese contenido con la pronunciación adecuada.
Esta práctica toma aún más relevancia en los casos de los idiomas que se leen en diferentes direcciones o que tienen un alfabeto diferente.
3.2.3 Navegación consistente
Los mecanismos de navegación que se repiten en varias páginas dentro de un sitio web, se muestran en el mismo orden cada vez que se repiten, a menos que el usuario inicie un cambio.
3.2.4 Identificación consistente
Los componentes que tienen la misma funcionalidad dentro de un sitio web se identifican de forma coherente.
? Vamos con dos ejemplos de la WCAG para entender mejor este criterio:
1) Una aplicación de comercio electrónico utiliza un icono de impresora que permite al usuario imprimir recibos y facturas. En una parte de la aplicación, el icono de la impresora está etiquetado como “Imprimir recibo” y se usa para imprimir recibos, mientras que en otra parte está etiquetado como “Imprimir factura” y se usa para imprimir facturas. El etiquetado es coherente (“Imprimir x”), pero las etiquetas son diferentes para reflejar las diferentes funciones de los iconos. Por lo tanto, este ejemplo no falla en el criterio de cumplimiento.
2) Un botón de envío de “búsqueda” en una página y un botón de “buscar” en otra página, tienen un campo para ingresar un término y enumerar temas en el sitio web relacionados con el término enviado. En este caso, los botones tienen la misma funcionalidad pero no están etiquetados de forma coherente.
3.3.3 Sugerencia de error
Si se detecta automáticamente un error de entrada y se conocen sugerencias de corrección, las sugerencias se proporcionan al usuario, a menos que ponga en peligro la seguridad o el propósito del contenido.
? Por ejemplo, un campo de entrada requiere que se ingrese un nombre de mes. Si el usuario ingresa “12”, las sugerencias de corrección podrían ser:
1) Una lista de los valores aceptables, por ejemplo: “Elegí entre enero, febrero, marzo, abril, mayo, junio, julio, agosto, septiembre, octubre, noviembre y diciembre”.
2) Una descripción del conjunto de valores, por ejemplo: “Por favor, escribí el nombre del mes”.
3) La conversión de los datos de entrada interpretados como un formato de mes diferente, por ejemplo: “¿Te referís a ‘diciembre’?”
3.3.4 Prevención de errores (legales, financieros, de datos)
Para las páginas web que provocan compromisos legales o transacciones financieras, que modifican o eliminan datos controlables por el usuario, o que envían respuestas de prueba del usuario, se deben cumplir al menos una de las siguientes condiciones:
- Reversible: los envíos son reversibles.
- Verificado: los datos ingresados por el usuario se verifican en busca de errores de entrada y se le brinda al usuario la oportunidad de corregirlos.
- Confirmado: hay un mecanismo disponible para revisar, confirmar y corregir la información antes de finalizar el envío.
Eso es todo 😉 Recordá que para cumplir con el nivel AA en tu página web, también tenés que cumplir con todos los criterios del nivel A.