Agencia de Gobierno Electrónico y Sociedad de la Información y del Conocimiento

Todo contenido que no sea texto debe tener su alternativa textual, por ejemplo, imágenes, íconos, gráficas, tablas, mapas de imagen etc. deben tener un texto alternativo que describa el significado.

• Las imágenes tienen un texto alternativo adecuado.
• Las imágenes decorativas tienen el texto alternativo vacío (alt="").
• Proporcione siempre un resumen textual o una descripción para tablas y gráficos además del texto alternativo corto.
• Evitar el uso de captchas, en lugar de ello utilizar otros mecanismos de seguridad como por ejemplo contraseñas de un solo uso (OTP: One-time password).
• Captcha: Si son indispensables, de preferencia deberá utilizarse captcha invisible. En caso de captcha tradicional proporcionar formas alternativas de CAPTCHA para distintos tipos de percepciones sensoriales, por ejemplo: visual y auditivo.

• Se incluye transcripción (*) para el audio grabado (ejemplos: podcast de audio, archivos MP3, etc.).
• Se incluye audio descripción (**) o descripción textual para los videos grabados sin audio (ejemplo: videos que no incluyen pistas de audio, videos mudos, etc.).

• El marcado semántico se usa correctamente para designar los encabezados (<h1>), listas (<ul>, <ol>, and <dl>), texto especial o enfatizado (<strong>, <code>, <abbr>,<blockquote>), etc.
• Se utiliza <em> y <strong> en lugar de cursivas y negritas para resaltar textos importantes.
• Se utiliza <blockquote> para marcar citas.
• Se utiliza marcado de encabezados lógico jerárquico para los contenidos (h1, h2, h3, h4, h5 ,h6 correctamente anidados, sin saltearse ni omitir encabezados)
• Las tablas se usan para marcar los datos tabulados. Las celdas de datos (<td>) se asocian con sus encabezados (<th>) donde sea necesario. Los títulos de las tablas (caption) y sus resúmenes (summary) se asignan de manera correcta.
• En las tablas se proporciona encabezados de columna para tablas simples y encabezados de columna y fila para tablas complejas
• No se utilizan tablas anidadas ni celdas divididas o combinadas.
• Las etiquetas "label" se asocian con sus campos "input" correspondientes en los formularios.
• Los elementos de los formularios que estén relacionados se agrupan mediante fieldset/legend.

• Las instrucciones no dependen exclusivamente de la forma, tamaño o ubicación visual. Proporcione etiquetas a los controles.
• Evite instrucciones del tipo: "Haga clic en el icono cuadrado para continuar" o "Las instrucciones están en la columna de la derecha".

No se utiliza el color como el único método para transmitir la información o distinguir elementos visuales.

Los enlaces deben distinguirse de los elementos y texto que les rodean. Si utiliza el color para diferenciar los enlaces, use una forma adicional para distinguirlos (por ejemplo, subrayado).

• Todas las funciones de la página están disponibles utilizando el teclado, excepto aquellas que de forma conocida no pueden realizarse con el teclado (por ejemplo, un dibujo a mano alzada).
• Se puede acceder a todos los elementos interactivos de la página: botones, enlaces, otros controles de formulario, mediante la tecla de tabulación, tabulación combinada con shift y/o las flechas de dirección.
• Los usuarios pueden activar los botones, enlaces y controles de formulario utilizando las teclas Enter y/o la Barra Espaciadora.
• Evitar los atajos de teclado, y en caso de utilizarlos asegurarse de que entran en conflicto con los del navegador y/o lector de pantalla.

El foco del teclado no queda bloqueado o fijado en un elemento concreto de la página. El usuario deberá poder moverse por todos los elementos navegables de la página utilizando únicamente el teclado.

• Los usuarios pueden acceder y salir de cualquier parte del sitio con el teclado.
• La navegación estándar utiliza tabulador, shift+tabulador (para retroceder) y teclas de flecha.

• Evitar utilizar atajos de teclas de un solo carácter. En caso de utilizarlos, permitir desactivarlos, modificarlos o reasignarlos a uno o más caracteres de teclado no imprimibles tales como Alt y Ctrl.
• Proporcionar un mecanismo para desactivar los atajos de teclado.
• Diseñar todos los atajos de teclado con las combinaciones de teclas no imprimibles.
• Permitir que el usuario active la tecla del atajo de teclado solo cuando el elemento tenga el foco.

Si hay un límite de tiempo para realizar una tarea, la página ofrece la opción de apagar, ajustar o aumentar ese límite de tiempo.

Excepto si el plazo es de más de 20 horas, o si se trata de eventos en tiempo real (por ejemplo, una subasta) donde el límite de tiempo es absolutamente necesario.

• Todo movimiento automático, parpadeo o desplazamiento de más de 5 segundos se puede pausar, detener u ocultar.
• El contenido actualizado automáticamente (por ejemplo, una página recargada o redireccionada automáticamente, la actualización de un campo mediante AJAX, etc.) permite controlar manualmente los tiempos de actualización o de lo contrario puede ser pausado, detenido u ocultado por el usuario.
• Si toda la página contiene contenido que se mueve, parpadea, se desplaza o se actualiza automáticamente, no se requieren controles manuales ya que no hay contenido paralelo que sea estático.

No hay contenidos que destellen más de tres veces por segundo a menos que el parpadeo sea pequeño, los destellos sean de bajo contraste y no contengan demasiado rojo.

Se recomienda utilizar la herramienta PEAT para realizar este control.

Se incluyen, en la parte superior de la página, enlaces para saltar a diferentes zonas, por ejemplo:

• Enlace para saltar al contenido principal.
• Enlace para omitir los menús de navegación.

Asegurar que el enlace de salto esté visible cuando reciba el foco.

• La página web deberá tener un título descriptivo de su finalidad.
• Proporcionar un título único a cada página del sitio.

Asegurarse de que el título tenga menos de 75 caracteres.

El orden de la navegación por los enlaces, elementos de los formularios, etc. es lógico e intuitivo.

• Evitar usar valores de índice de tabulación que sean mayor que uno para administrar el orden de navegación, ya que pueden reemplazar el orden lógico de tabulación.
• Alinear el orden de enfoque con el orden de lectura tanto como sea posible para mantener una navegación lógica e intuitiva del contenido.

• Los enlaces en una página no son ambiguos y son suficientemente descriptivos como para identificar su destino.
• Enlaces con diferentes propósitos y destinos deben tener diferentes descripciones (Por ejemplo: no se repiten enlaces "Leer más" o "Seguir leyendo" varias veces en una misma página y con distintos destinos).
• El propósito del enlace queda claro solo con el texto del enlace.
• Proporcionar el texto alternativo adecuado cuando el enlace sea una imagen. En este caso el texto alternativo debe indicar el resultado de hacer clic sobre él.
• No utilizar enlaces ambiguos como “aquí” o “haga clic aquí”.
• No duplicar el texto alternativo y el texto del enlace cuando hay una imagen y el enlace adyacentes y transmiten la misma información o conducen al mismo destino. En lugar de eso, incluya la imagen en el enlace y asigne nulo (alt=""= para la imagen.
• Los enlaces que tengan el mismo texto de enlace deben llevar al mismo destino.

La activación de los controles se realiza en el up-event. "Up- event" corresponde al "mouseup" o, en una interacción táctil, cuando se levanta el dedo al final del toque.

Asegurarse de que el evento "down" por sí solo no ejecute ninguna funcionalidad.

Las etiquetas visibles y los nombres accesibles de los controles son iguales o comienzan con el mismo texto.

Las etiquetas y nombres son únicos y coincidan entre sí, para que no haya confusión sobre lo que el usuario debe ""decir en voz alta"" para interactuar con el componente.

Para verificar el cumplimiento se puede inspeccionar el código o utilizar herramientas de reconocimiento de voz y comprobar que es posible interactuar con la página usando la voz.

Este criterio hace referencia a los sensores del dispositivo que detectan y responden a algún tipo de entrada del entorno físico. Por ejemplo, en un móvil o tablet: un movimiento como agitar el móvil, inclinar la tablet, etc.

Si hay funcionalidades operadas con el movimiento del dispositivo o del usuario se proporciona una forma alternativa que no dependa del movimiento o el usuario puede desactivar la actuación por movimiento.

Cuando un elemento recibe el foco no inicia un cambio de contexto que pueda confundir o desorientar al usuario. Para probar este criterio se debe navegar por la página sólo con el teclado.

Un cambio de contexto es un cambio importante en el contenido de una página web, por ejemplo: abrir una aplicación, ir a otra página, ventana o marco, mover el foco a otro elemento, hacer submit o enviar formularios, abrir ventanas emergentes automáticas, entre otras.

El cambio de estado o valor de un campo de formulario no provoca un cambio de contexto. En caso de hacerlo, se advierta antes al usuario.

• Los formularios no se envíen al ingresar los datos.
• El foco no se mueve al siguiente control de formulario una vez que un campo de formulario se complete con datos.
• Contar con un botón de envío para todos los formularios.
• El control de cómo se completan los datos esté en manos de sus usuarios.

Cuando un sitio web tiene canales de ayuda, consulta o contacto y estos aparecen en varias páginas, deben mantenerse siempre en el mismo lugar y en el mismo orden dentro de la página, a menos que la persona usuaria decida cambiarlo.

Esto permite que las personas encuentren esa ayuda de forma rápida y predecible, sin tener que aprender de nuevo dónde está en cada página.

Se consideran mecanismos de ayuda, por ejemplo:

• Información de contacto con una persona (teléfono, correo electrónico).
• Formularios de contacto o chats con atención humana.
• Secciones de autoayuda, como preguntas frecuentes o centros de ayuda.
• Sistemas de atención automatizada, como chatbots.

La ayuda puede estar visible directamente en la página o disponible mediante un enlace claro a otra página.

Mantener la ayuda en un lugar consistente reduce la confusión, mejora la experiencia de uso y facilita la navegación, especialmente para personas con dificultades cognitivas o de aprendizaje.

Se identifican y explican al usuario los errores que se puedan detectar de forma automática.

Se incluye una explicación cerca del error que muestre qué está mal y cómo solucionarlo.

Se proporcionan las etiquetas, avisos e instrucciones necesarios para la introducción de datos en los formularios.

• Se relaciona y describe los grupos de campos usando fieldset y legend.
• Se indican los campos obligatorios.
• Se indica el formato esperado de los datos y se incluye un ejemplo.
• Las etiquetas van delante o encima del campo, excepto en los radiobutton y checkboxes dónde deben ir a la derecha de cada opción.
• Hay etiquetas visibles para todos los campos y controles de formulario.
• Las etiquetas identifican los campos claramente.

Las etiquetas se asocian con sus respectivos campos. Para probarlo, hacer doble clic sobre la etiqueta y verificar que el foco se coloca en el campo asociado.

Durante un mismo trámite o proceso, no se debe solicitar a la persona usuaria que vuelva a ingresar información que proporcionó antes.

Cuando esa información se necesita nuevamente, debe:

• completarse automáticamente, o
• mostrarse para que la persona usuaria pueda seleccionarla.

Esto facilita el uso del sitio, reduce errores y evita esfuerzos innecesarios, especialmente para personas con dificultades de memoria, atención, lectura o escritura.

Excepciones:

Se puede solicitar que la información se ingrese nuevamente cuando:

• es necesaria para garantizar la seguridad del sistema o de los datos;
• la información ingresada anteriormente ya no es válida.