En el posteo anterior sobre accesibilidad web te comenté un poco de qué se trata hacer productos accesibles y cuáles son los tipos de discapacidades o situaciones en las que se puede encontrar una persona al momento de utilizar una aplicación o página web. También mencioné que la accesibilidad web se basa en un conjunto de criterios (WCAG) y cada uno de ellos tiene un nivel de conformidad pudiendo ser A, AA o AAA (siendo A el mínimo y AAA el máximo).
Me gustaría ir desglosando los criterios que forman los distintos niveles y voy a empezar hoy con el nivel A que incluye 25 criterios. También te dejo acá lo que dice la WCAG sobre cada uno de ellos.
Principio 1: Perceptible
1.1.1 Alternativas de texto
Todos los contenidos que no sean texto deben presentarle al usuario una alternativa textual que servirá como equivalente.
? Por ejemplo, en una imagen debemos completar el atributo alt añadiendo una breve descripción de lo que hay en la misma (si la imagen es solo decorativa se lo puede dejar vacío). Esta información podrá ser leída por los lectores de pantalla y también es un muy útil cuando por algún motivo la imagen no se puede cargar, ya que se mostrará esa descripción en su lugar.
1.2.1 Solo audio y solo video (pregrabado)
Para los contenidos que sean solo audio o solo video se deben ofrecer las siguientes alternativas, a excepción de los audios y videos que funcionen como alternativa de un texto.
- Solo audio pregrabado: se debe presentar una alternativa para los medios basados en el tiempo que presenta información equivalente para el contenido de solo audio pregrabado.
- Solo video pregrabado: se debe presentar una alternativa para los medios basados en el tiempo o una pista de audio que presenta información equivalente para el contenido de solo video pregrabado.
? Por ejemplo, supongamos que en la página web se incluye un audio sobre una conferencia de prensa o discurso. Para cumplir con este criterio de accesibilidad podría ser interesante incluir, además de la pista de audio, una transcripción de lo que dice ese audio en formato texto.
1.2.2 Subtítulos (pregrabados)
Se ofrecen subtítulos para todo el contenido de audio pregrabado en medios sincronizados, excepto cuando los medios son una alternativa para el texto y están claramente etiquetados como tales.
? Por ejemplo, un tutorial en video con audio debe tener subtítulos sincronizados en donde se informe no solo lo que se dice, sino también de los sonidos o música que se presenta.
1.2.3 Descripción de audio o medios alternativos (pregrabados)
Se proporciona una alternativa para los medios basados en el tiempo o la descripción de audio del contenido de video pregrabado para los medios sincronizados, excepto cuando los medios son una alternativa para el texto y están claramente etiquetados como tales.
? Es decir, informar al usuario sobre lo que está pasando en la parte visual. Para esto la WCAG propone dos enfoques, siendo válidos cualquiera de los dos.
Enfoque 1: Proporcionar un audio del video que brinde información sobre el diálogo, acciones, personajes, cambios de escena y texto en pantalla que son importantes y que no se mencionan en el audio original.
Enfoque 2: Proporcionar una alternativa textual de la parte visual y auditiva siendo esta similar a un guion y no se limitará solo a las pausas existentes en el video como en el enfoque 1, sino que tendrá una descripción completa de toda la información visual, incluido el contexto visual, las acciones y expresiones de los actores y cualquier otro material visual. Además, se describen los sonidos que no son del habla (risas, voces fuera de la pantalla, etc.) y se incluyen las transcripciones de todos los diálogos.
1.3.1 Información y relaciones
La información, la estructura y las relaciones transmitidas a través de la presentación se pueden determinar mediante programación o están disponibles en texto.
? Por ejemplo, en un formulario las casillas de verificación deben estar determinadas mediante programación para que puedan ser leídas por las tecnologías de asistencia.
1.3.2 Secuencia significativa
Cuando la secuencia en la que se presenta el contenido afecta su significado, se puede determinar mediante programación una secuencia de lectura correcta.
? Es decir, que siempre que haya un contenido que tenga que ser leído de manera lineal, habrá que especificar -programación mediante – ese orden. Este criterio se aplica, por ejemplo, a las tablas de contenidos ya que deben seguir un orden de lectura para que tenga sentido al ser leída por un software de asistencia.
1.3.3 Características sensoriales
Las instrucciones proporcionadas para comprender y operar el contenido no se basan únicamente en las características sensoriales de los componentes, como la forma, el color, el tamaño, la ubicación visual, la orientación o el sonido.
? Por ejemplo, supongamos que en tu página web tenés un texto que ocupa diferentes hojas y utilizás flechas para que el usuario pueda pasar a la siguiente o volver a la anterior. Dejar las flechas solas no sería lo correcto según este criterio y tendrían que estar identificados textualmente con, siguiendo el ejemplo, “anterior” y siguiente”.
1.4.1 Uso de color
El color no se utiliza como el único medio visual de transmitir información, indicar una acción, provocar una respuesta o distinguir un elemento visual.
? Este criterio es similar al anterior pero es específico para el color. Un ejemplo muy conocido que podemos dar acá es cuando en los formularios de contacto o login, por ejemplo, hay un error y se marca este con rojo. Este criterio habla que siempre el color debe estar acompañado de un texto para que pueda ser entendido por personas con dificultades visuales.
1.4.2 Control de audio
Si cualquier audio en una página web se reproduce automáticamente durante más de 3 segundos, debe haber un mecanismo disponible para pausar o detener el audio, o un mecanismo para controlar el volumen del audio independientemente del nivel de volumen general del sistema.
Principio 2: Operable
2.1.1 Teclado
Todo el contenido se puede operar a través de un teclado sin requerir tiempos específicos para las pulsaciones de teclas individuales, excepto cuando la función subyacente requiere una entrada que depende de la ruta del movimiento del usuario y no solo de los puntos finales.
2.1.2 Sin trampas en el teclado
Si el enfoque del teclado se puede mover a un componente de la página usando una interfaz de teclado, entonces el enfoque se puede mover lejos de ese componente usando solo una interfaz de teclado y, si requiere más que teclas de flecha o tabulación sin modificar u otros métodos de salida estándar, se informa al usuario del método para alejar el enfoque.
? Es decir, que si un usuario está utilizando la web mediante el teclado y entra a una subsección del contenido que estaba utilizando (por ejemplo, un cuadro de diálogo o un widget de calendario) hay que proporcionarle una opción para que pueda salir correctamente de ese estado y no quedar atrapado.
2.2.1 Tiempo ajustable
Cuando el contenido de una web tiene un límite de tiempo para ser utilizado, se le debe notificar al usuario y darle alguna opción para que lo pueda ajustar.
? Un ejemplo de este criterio es cuando estás haciendo la compra online de un pasaje o entradas y el sistema te avisa que tenés cierto tiempo para hacerlo. Al acercarse al final, te da la posibilidad de extender. Esto se debe hacer siempre que sea posible ajustar ese tiempo. Un ejemplo de entorno en el que no se podría ajustar (o no sería justo para los otros usuarios) es en una subasta.
2.2.2 Pausar, detener, ocultar
Para la información que esté en movimiento, parpadeante, desplazable o de actualización automática, deben aplicarse las siguientes pautas:
- Moviéndose, parpadeando, desplazándose: Para cualquier información en movimiento, parpadeando o desplazándose que (1) se inicia automáticamente, (2) dura más de cinco segundos y (3) se presenta en paralelo con otro contenido, debe tener la posibilidad que el usuario pueda pausarlo, detenerlo u ocultarlo a menos que el movimiento, el parpadeo o el desplazamiento sea parte de una actividad en la que sea esencial; y
- Actualización automática: Para cualquier información de actualización automática que (1) se inicia automáticamente y (2) se presenta en paralelo con otro contenido, debe existir un mecanismo para que el usuario la pueda pausar, detener, ocultar o controlar la frecuencia de la actualización a menos que sea parte de una actividad en la que sea esencial.
Y ya que estamos en el tema de cosas que se mueven y parpadean, vamos directo al siguiente criterio que es parte de la directriz ‘Convulsiones y Reacciones Físicas’. Esta directriz habla sobre que no hay que crear contenidos que puedan causar convulsiones o reacciones físicas a los usuarios. ¡Algo que tal vez muchas veces no se tiene en cuenta y que es tan importante!
2.3.1 Tres destellos o menos
Las páginas web no contienen nada que parpadee más de tres veces en un segundo, o el flash está por debajo de los umbrales de flash general y rojo.
2.4.1 Evitar bloques repetidos
Proporcionar una manera de omitir bloques de contenido que se repiten en varias páginas web.
2.4.2 Página titulada
Todas las páginas de una web deben tener títulos que describan el tema o el propósito de la misma.
2.4.3 Orden de enfoque
Si se puede navegar por una página web secuencialmente y las secuencias de navegación afectan el significado o la operación, los componentes enfocables reciben atención en un orden que preserva el significado y la operatividad.
? Significa que si los componentes o elementos de una web deben ser leídos en un orden específico porque de lo contrario afectaría el significado, estos deben ser enfocados en el orden correcto al ser operados desde un teclado.
Algo que puede ayudar a entender aún más este criterio es que un usuario vidente que utiliza un teclado para interactuar con una web, lo hace con la parte visual de ella, mientras que un usuario que utiliza un lector de pantalla interactúa con el orden de lectura que se determinó mediante programación.
2.4.4 Propósito del enlace (en contexto)
El propósito de cada enlace se puede determinar a partir del texto del enlace solo o del texto del enlace junto con su contexto de enlace determinado mediante programación, excepto cuando el propósito del enlace sea ambiguo para los usuarios en general.
? Este criterio se refiere a que el anchor text de un vínculo (el texto que lo forma) debe tener sentido y darle una idea al usuario sobre lo que puede esperar al hacer click. Por ejemplo, si hacés click en ver receta de Chocotorta sabrás exactamente con qué te vas a encontrar del otro lado
Además, ¡un buen anchor text también ayuda al SEO!
Principio 3: Comprensible
3.1.1 Idioma de la página
Establecer el lenguaje predeterminado de la página web.
3.2.1 Al recibir foco
Cuando cualquier componente de una interfaz de usuario recibe el foco, no inicia un cambio de contexto.
? Por ejemplo, hay cambios de contexto en los formularios enviados automáticamente o ventanas nuevas que se abren cuando un componente recibe el foco. Recibir el foco no significa precisamente que esa opción se active, es decir, cuando navegás con el mouse por un menú estás poniendo el foco en distintos elementos, pero no debería activarse ninguno a menos que lo hagas por medio del teclado (con enter) o mouse (haciendo click).
3.2.2 Al recibir entradas
El cambio de estado en un elemento o componente de una interfaz no causa un cambio automático de contexto a menos que se le haya informado al usuario de este comportamiento antes de usar el componente.
? Con este criterio se busca que cuando el usuario ingrese una entrada, espere cambios o efectos predecibles debido a su acción. Veamos 2 ejemplos que propone la WCAG para entender mejor este criterio:
1. Un calendario web donde está la posibilidad de crear diferentes tipos de eventos. Este tiene diferentes campos estándar como tema del evento (ejemplo “reunión con Carolina”), hora, ubicación y tipo de evento que puede ser reunión, cita o recordatorio. Si un usuario selecciona allí la opción de reunión, le aparecerán en pantalla campos adicionales para agregar más información sin salir del evento que está creando. Como en este caso la estructura general es la misma (solo se agregan nuevas opciones) no es necesario avisarle ya que el contexto básico es el mismo.
2. Un formulario contiene campos que representan números de teléfono de EE. UU. Todos los números tienen un código de área de tres dígitos seguido de un prefijo de tres dígitos y finalmente un número de cuatro dígitos, y cada parte del número de teléfono se ingresa en un campo separado. Cuando el usuario completa la entrada de un campo, el foco se mueve automáticamente al siguiente campo del número de teléfono. Este comportamiento de los campos telefónicos es avisado al usuario al principio del formulario.
3.3.1 Identificación de errores
Si se detecta automáticamente un error de entrada, se identifica el elemento que tiene el error y el error se describe al usuario en texto.
3.3.2 Etiquetas o instrucciones
Se proporcionan etiquetas o instrucciones cuando el contenido requiere la intervención del usuario.
? Por ejemplo en los formularios, que le decimos al usuario qué dato debe poner en cada campo.
Principio 4: Robusto
4.1.1 Procesamiento
Con este criterio se busca garantizar que todos los elementos del contenido implementado con lenguajes de marcado (por ejemplo HTML o XML) cumplan con lo siguiente:
- Tienen etiquetas de inicio y finalización completas
- Están anidados de acuerdo con sus especificaciones
- No contienen atributos duplicados y los ID son únicos, excepto cuando las especificaciones permiten estas características.
4.1.2 Nombre, función, valor
Para todos los componentes de la interfaz de usuario (incluidos pero no únicos, los elementos de formulario, enlaces y componentes generados por scripts), el nombre y la función se pueden determinar mediante programación; los estados, propiedades y valores que puede establecer el usuario se pueden establecer mediante programación; y la notificación de cambios a estos elementos está disponible para los agentes de usuario, incluidas las tecnologías de asistencia.
? Es importante aclarar que este criterio es para las webs que desarrollan o escriben sus propios componentes de interfaz de usuario. Las páginas que, por ejemplo, usen controles de HTML estándar ya cumplen este criterio de éxito cuando se utilizan de acuerdo con las especificaciones.
¡Y hasta acá los criterios que forman del nivel A de accesibilidad! ¿Cuáles ya estás cumpliendo en tu web y cuáles todavía no?