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

Se incluyen audio-descripciones para todo el contenido visual de video que no está disponible en la pista de audio.

La audio descripción debe incluir cambios de escena, escenarios, acciones que se describen en diálogos y cualquier otra información visual que no se transmita a través del audio original.

El objetivo de cada campo que recoge información del usuario puede ser determinado por software cuando:

• El campo tiene un propósito identificado y concreto.
• El campo está implementado de manera que se puede identificar su finalidad.
• La finalidad u objetivo del campo debe ser uno de los listados en el apartado "Input Purposes for User Interface Components" ("name", "country", "postal-code", etc.). La lista está basada en la de HTML 5.2 Autofill field section.

El texto o las imágenes de texto deben tener una relación de contraste de al menos 4.5:1, excepto en los siguientes casos:

• Textos grandes (de más de 18 puntos o 14 puntos en negrita) o imágenes de texto. En estos casos la relación de contraste debe ser de al menos 3:1.
• Textos las imágenes de texto, que forman parte de un componente de la interfaz de usuario inactivo, que son meramente decorativos o que no son visibles. En estos casos no hay requisito mínimo de contraste.
• Textos que forman parte de un logotipo o de una marca comercial. En este caso no hay un requisito mínimo de contraste.
• Proporcione un modo de "Alto contraste" con la ayuda de CSS alternativo en caso de que no pueda diseñar y desarrollar el contenido con el mínimo requisito de contraste.

El texto se puede redimensionar hasta en un 200% utilizando solamente el navegador, sin pérdida de contenido o funcionalidad, sin necesidad de hacer scroll horizontal.

Se deberán definir tamaños relativos (em, %) u ofrecer una herramienta que permita aumentar/disminuir el tamaño de los textos (ejemplo: barra de herramientas con opciones A+ / A-).

Usar texto en lugar de imágenes de texto.

• Usar estilos CSS en lugar de imágenes.
• En caso de ser indispensable utilizar imágenes de texto se proporcionan controles para personalizar las imágenes textos.
• Utilizar símbolos generados por teclado siempre que sea posible en lugar de hacerlos como imágenes.

La página se ajusta al tamaño de pantalla, sin requerir scroll en dos dimensiones sin perder funcionalidad. Es decir, es responsiva sin perder contenido ni funcionalidad.

Quedan exceptuadas aquellas partes del contenido que requieren ese desplazamiento en dos dimensiones por su uso o significado, como por ejemplo mapas, diagramas, tablas de datos, etc.

• Las áreas interactivas y el indicador de la posición del foco tienen una relación de contraste de al menos 3:1 con su fondo interno y externo.
• Los estados marcado/no marcado cumplen con la relación mínima de contraste de 3:1 con su color adyacente.

Aplica a: gráficas, el borde o límites visuales de un campo de formulario o botón siempre que no estuvieran deshabilitados, entre otros.

• No se utilizan contenedores de tamaño fijos en los estilos CSS.
• Se utilizan unidades relativas de tamaño de fuente, altura de línea, espacios entre caracteres, palabras, líneas y párrafos.

• Proporcionar un método para descartar el contenido adicional que aparece al pasar el mouse o al tomar el foco.
• Asegurar que el contenido adicional esté presente hasta que el usuario aleje el puntero del mouse del elemento que desencadenó su visualización. Aplica por ejemplo a menús desplegables o a tooltips personalizados.

• Los encabezados de las páginas y las etiquetas para los controles interactivos de los formularios deberán ser suficientemente informativos.
• Evitar duplicar los encabezados y las etiquetas de texto a menos que la estructura ofrezca una diferenciación adecuada entre ellas.
• Los encabezados y etiquetas de campos deben ser claros, concisos y descriptivos.
• Los encabezados deben seguir un orden secuencial y jerárquico.
• El estilo de los niveles de encabezado debe ser igual en todo el sitio.

Compruebe que es visualmente evidente el elemento que tiene el foco actual del teclado (por ejemplo, si se mueve con el tabulador por la página, puede ver dónde se encuentra).

El elemento interactivo que tiene el foco es visible y tiene suficiente contraste en todos los elementos.

Cuando el usuario navegue por la página usando el teclado, el foco visible se mueve por cada elemento presentado en la página.

Debe haber suficiente contraste entre el color que marca el foco y los colores de fondo interno y externo del elemento.

Cuando se navega por un sitio web usando el teclado y un elemento recibe el foco, ese elemento debe verse en pantalla y no quedar completamente tapado por otros contenidos del sitio, como encabezados fijos, barras flotantes o ventanas superpuestas.

La persona usuaria debe poder identificar claramente dónde está el foco del teclado en todo momento. 

• En interfaces donde la persona usuaria puede mover o reorganizar elementos, solo se tiene en cuenta la posición inicial de esos elementos para evaluar este criterio.
• Si la persona usuaria abre un contenido (por ejemplo, un menú o una ventana emergente) que tapa el elemento con foco, pero puede volver a verlo sin cambiar el foco del teclado, ese elemento no se considera oculto.

Si una funcionalidad requiere arrastrar un elemento (por ejemplo, arrastrar con el mouse o el dedo), debe existir una forma alternativa de realizar la misma acción sin necesidad de arrastrar.

Esto significa que la persona usuaria debe poder completar la acción mediante un solo clic, toques simples u otro mecanismo equivalente.

Este criterio mejora la accesibilidad para personas que tienen dificultades de movilidad, coordinación motora o que utilizan dispositivos de apoyo.

Ejemplos:

• Reordenar elementos mediante botones “subir” y “bajar”.
• Mover elementos usando controles alternativos en lugar de “arrastrar y soltar”.

Los elementos interactivos o área de interacción deben tener un tamaño mínimo de 24 por 24 píxeles CSS. Esto permite que las personas puedan seleccionarlos con mayor facilidad y reduce los errores al hacer clic o tocar la pantalla.

Excepciones

Se admite un tamaño menor cuando se cumple alguna de las siguientes condiciones:

• Espaciado suficiente
  Los objetivos más pequeños están ubicados de forma que, al trazar un círculo de 24 píxeles CSS alrededor de cada uno, no se superponen con otros objetivos interactivos.
• Control equivalente
  La misma función puede realizarse mediante otro control en la misma página que sí cumple con el tamaño mínimo requerido.
• Contenido en línea
  El objetivo forma parte de una oración o su tamaño está limitado por la altura de línea del texto que lo rodea, como ocurre con enlaces dentro de párrafos.
• Control del agente de usuario
  El tamaño del objetivo lo define el navegador, sistema operativo u otra tecnología de usuario, y no es modificado por quien desarrolla el sitio.
• Requerido legalmente
  La presentación específica del objetivo está legalmente exigida para transmitir la información.

• Presentar los menús de navegación en el mismo orden y ubicación en todas las páginas.
• Presentar todos los elementos comunes en todas las páginas del sitio como el logotipo, la funcionalidad de búsqueda, saltar enlaces, etc. en la misma ubicación en todas las páginas.
• Utilizar plantillas para ayudar a lograr navegación consistente.
• En caso de añadir o eliminar elementos en la secuencia de una página a otra, por ejemplo, un bloque de navegación secundaria, mantener el orden relativo del resto de los elementos.

Los elementos que tienen la misma funcionalidad a través de múltiples páginas web se identifican de manera consistente. Por ejemplo, un campo de búsqueda en la parte superior de la página deberá etiquetarse siempre de la misma forma.

• Los íconos e imágenes que se usan repetidamente y brindan la misma función se tienen el mismo texto alternativo.
• Los elementos con la misma función se nombran y etiquetan de manera consistente.
• Usar íconos/imágenes que sean consistentes en todo el sitio. Por ejemplo, impresión, twitter, Facebook, etc.
• Las imágenes que tienen un significado diferente en un contexto diferente tendrán un texto alternativo acorde al contexto.

Si se detecta un error al introducir un dato (mediante la validación en el lado del cliente o en el del servidor), deberá explicar el error y proporcionar sugerencias en formato texto para solucionar el problema de forma oportuna y accesible.

Se informan errores claros y descriptivos.

Si la acción del usuario provoca un compromiso legal, una transacción económica, modifica o elimina datos en un sistema, estas acciones pueden ser reversibles, verificadas o confirmadas.

• Proporcionar una pantalla de revisión de información donde se muestre la información proporcionada por el usuario.
• Proporcionar una casilla de verificación donde el usuario pueda confirmar que ha revisado toda la información y que está listo para enviar; habilitar el botón Enviar solo cuando el usuario marque la casilla de verificación.
• Si el formulario tiene un solo paso, se entiende que el criterio se cumple por defecto.
• Proporcionar una pantalla de confirmación previo a la eliminación de datos a solicitud del usuario.

El proceso de inicio de sesión debe poder realizarse sin exigir un esfuerzo cognitivo elevado a las personas usuarias.

No se debe obligar a las personas a recordar información compleja, resolver acertijos, ni transcribir códigos como condición para autenticarse, salvo que exista al menos una alternativa accesible.

Este criterio busca garantizar que personas con discapacidades cognitivas, de memoria o de aprendizaje puedan acceder a los servicios digitales en igualdad de condiciones.

En un proceso de autenticación no se debe requerir una prueba de función cognitiva (por ejemplo, recordar una contraseña o resolver un desafío) a menos que se cumpla al menos una de las siguientes condiciones:

• Alternativa accesible
  Se ofrece otro método de autenticación que no dependa de la memoria, el razonamiento o la resolución de problemas.
• Mecanismo de ayuda
  Existe un apoyo que ayude a la persona a completar la tarea, reduciendo la carga cognitiva (por ejemplo, permitir pegar información).
• Reconocimiento de objetos
  La prueba consiste únicamente en reconocer objetos (por ejemplo, seleccionar imágenes conocidas).
• Contenido personal
  La prueba consiste en identificar contenido no textual que la propia persona haya proporcionado previamente al sitio.

Consideraciones adicionales

• El reconocimiento de objetos o el contenido personal pueden presentarse mediante imágenes, audio o video.
• Ejemplos de mecanismos que cumplen este criterio incluyen:
  • Compatibilidad con gestores de contraseñas, para evitar tener que memorizar credenciales.
  • Permitir copiar y pegar, para no obligar a reescribir códigos o contraseñas.