| 1.1.1 Contenido no textual | 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.
|
| 1.2.1 Sólo audio y sólo vídeo (grabado) | - 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 vídeos grabados sin audio (ejemplo: vídeos que no incluyen pistas de audio, videos mudos, etc.).
|
| 1.2.2 Subtítulos (grabados) | Se incluyen subtítulos para los vídeos grabados (ejemplo: vídeos de YouTube, etc.) |
| 1.2.3 Audio descripción o Medio Alternativo (grabado) | Se incluye transcripción o audio-descripción de los vídeos grabados. |
| 1.3.1 Información y relaciones | - 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.
|
| 1.3.2 Secuencia significativa | El orden de navegación y lectura es lógico e intuitivo. |
1.3.3 Características sensoriales | - 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".
|
| 1.4.1 Uso del color | 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). |
| 1.4.2 Control del audio | Si la página reproduce automáticamente un sonido durante más de 3 segundos, entonces se ofrece un mecanismo para poder parar, pausar, silenciar o ajustar el volumen, independientemente de los ajustes de sonido del sistema. |
| 2.1.1 Teclado | - 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 utilizarlosasegurarse de que entran en conflicto con los del navegador y/o lector de pantalla.
|
| 2.1.2 Sin trampas para el foco del teclado | 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.
|
| 2.1.4 Atajos de teclado | - 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.
|
| 2.2.1 Tiempo ajustable | 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. |
| 2.2.2 Poner en pausa, detener, ocultar | - 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.
|
| 2.3.1 Umbral de tres destellos o menos | 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: http://trace.wisc.edu/peat |
| 2.4.1 Evitar bloque | 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. |
| 2.4.2 Título de la página | - 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. |
| 2.4.3 Orden del foco | 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 > 1 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.
|
| 2.4.4 Propósito de los enlaces (en su contexto) | - 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.
|
| 2.5.1 Gestos del puntero | En la interacción táctil, se puede operar con un solo toque o hay una alternativa para que sea operable con un solo toque o doble toque. |
2.5.2 Cancelación del puntero | 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. |
| 2.5.3 Nombre en la etiqueta | 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. |
| 2.5.4 Actuación por movimiento | 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. |
| 3.1.1 Idioma de la página | El idioma principal de la página está identificado utilizando el atributo lang de HTML (por ejemplo, <HTML lang="es">). |
| 3.2.1 Al recibir el foco | 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, etc. |
| 3.2.2 Al recibir entradas | 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.
|
3.3.1 Identificación de errores | 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. |
| 3.3.2 Etiquetas o instrucciones | 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. |
4.1.1 Procesamiento | Sin errores de sintaxis de HTML y CSS. - Usar identificadores únicos.
- Anidar elementos correctamente.
Asegurar que HTML tenga etiquetas de inicio y finalización. El código HTML puede validarse a través de http://validator.w3.org/
El código CSS puede validarse a través de https://jigsaw.w3.org/css-validator/ |
