WCAG 2.2: cómo evaluar cada requisito

El contenido no textual que transmite algo tiene una alternativa textual

• Las reglas deciden una parte
• Herramientas: Las herramientas para desarrolladores del navegador

1. Recorrer toda la página en busca de contenido que no sea texto: fotos, iconos, logotipos, gráficos, mapas, diagramas, imágenes de portada de vídeos y las imágenes dentro de botones y enlaces.
2. Para cada uno, seleccionarlo en el panel Elements de las herramientas para desarrolladores y leer el nombre en su panel Accesibilidad.
3. Anotar cada uno que no tenga nombre y no esté oculto para las tecnologías de apoyo (con alt="", aria-hidden="true", role="presentation" o como fondo CSS).
4. Buscar también información que solo muestra el CSS: imágenes de fondo, fuentes de iconos e imágenes añadidas con la propiedad content. Inspeccionar cada una, ya que no hay atributo alt que leer, y comprobar que lo que muestra se da también en un texto que lee un lector de pantalla.
5. En el contenido que no se puede describir en pocas palabras, como un gráfico o un mapa, comprobar que el nombre dice al menos qué es, y que hay una descripción más completa en la página o enlazada al lado.

Se supera si

Todo el contenido no textual que una persona necesita tiene una alternativa textual, o está oculto para las tecnologías de apoyo porque es decorativo.

No se supera si

Un contenido no textual que transmite algo no tiene alternativa textual, así que quien usa un lector de pantalla encuentra una imagen sin nombre o nada en absoluto, lo que incumple WCAG 1.1.1.

Reglas que lo comprueban: img-alt-present, role-img-text-alternative-present, canvas-text-alternative-present, embed-text-alternative-present, svg-text-alternative-present, svg-image-text-alternative-present, object-text-alternative-present, video-poster-text-alternative-present, meter-name-present, progressbar-name-present

Las imágenes y los iconos usados como controles tienen como nombre lo que hacen

• Las reglas deciden una parte
• Herramientas: Las herramientas para desarrolladores del navegador

1. Localizar cada enlace, botón y otro control cuyo único contenido sea una imagen o un icono, como un logotipo que enlaza con la página de inicio, una lupa para buscar o un aspa que cierra un diálogo.
2. Para cada uno, seleccionarlo en el panel Elements de las herramientas para desarrolladores y leer el nombre en su panel Accesibilidad.
3. Comprobar que el nombre dice qué hace el control o adónde lleva («Buscar», «Cerrar», «Inicio»), no lo que muestra la imagen («lupa») ni un nombre de archivo.

Se supera si

Cada control formado por una imagen o un icono tiene un nombre que dice qué hace o adónde lleva.

No se supera si

Un control formado por una imagen o un icono no tiene nombre, o tiene uno que describe la imagen en lugar de lo que hace, lo que incumple WCAG 1.1.1.

Reglas que lo comprueban: input-image-alt-present, area-alt-present

Las imágenes decorativas, y solo ellas, están ocultas para las tecnologías de apoyo

• Solo una persona puede comprobarlo
• Herramientas: Las herramientas para desarrolladores del navegador

1. Recorrer la página en busca de imágenes, iconos y gráficos que solo decoran: bordes, separadores, imágenes de fondo, adornos e imágenes cuyo contenido ya da el texto que tienen al lado.
2. Para cada uno, seleccionarlo en el panel Elements de las herramientas para desarrolladores y comprobar en su panel Accesibilidad que se ignora (alt="", aria-hidden="true", role="presentation" o un fondo CSS).
3. En un SVG decorativo dibujado en la página, comprobar que tiene aria-hidden="true". Sin él, algunas combinaciones de navegador y lector de pantalla lo anuncian como una imagen sin nombre, o leen el texto que contiene.
4. Después, hacer lo contrario: para cada imagen oculta de ese modo, preguntarse si un usuario echaría algo en falta si no estuviera: información, una etiqueta, los datos de un gráfico.

Se supera si

Las imágenes decorativas están ocultas para las tecnologías de apoyo, y cada imagen oculta es realmente decorativa.

No se supera si

Se anuncia una imagen decorativa (a menudo por su nombre de archivo), o una imagen que transmite información está oculta para las tecnologías de apoyo, lo que incumple WCAG 1.1.1.

Cada alternativa textual da lo que da su imagen

• Las reglas deciden una parte
• Herramientas: Las herramientas para desarrolladores del navegador

1. Para cada imagen y otro contenido no textual que tenga alternativa textual, leer la alternativa (el nombre en el panel Accesibilidad de las herramientas para desarrolladores) y observar el contenido en su lugar de la página.
2. Preguntarse qué aporta el contenido a un lector en ese lugar, y comprobar que la alternativa aporta lo mismo: las palabras de una imagen de texto, la idea que transmite una foto, los datos que muestra un gráfico.
3. Donde la alternativa solo nombre una imagen compleja, como un gráfico o un diagrama, comprobar que los detalles están en un pie, un texto o una tabla junto a ella, o en un enlace al lado, que un usuario de lector de pantalla pueda encontrar desde la imagen.
4. Anotar las alternativas que son un nombre de archivo, una dirección web, una palabra como «imagen» o «foto», o que repiten el texto que tienen justo al lado.
5. Comprobar el idioma de cada alternativa: debería estar en el idioma de la página, o marcada con el suyo propio.

Se supera si

Cada alternativa textual da lo que da su contenido en ese lugar, directamente o mediante una descripción a la que un usuario de lector de pantalla puede llegar desde ella.

No se supera si

Una alternativa textual no da lo que da el contenido, por ejemplo un nombre de archivo, una palabra genérica o un gráfico nombrado sin sus datos en ninguna parte, lo que incumple WCAG 1.1.1 (F30).

Reglas que lo comprueban: area-alt-quality, canvas-text-alternative-quality, embed-text-alternative-quality, img-alt-decorative, img-alt-quality, input-image-alt-decorative, input-image-alt-quality, object-text-alternative-quality, svg-text-alternative-quality

Un CAPTCHA indica para qué sirve y ofrece otra forma que usa un sentido distinto

• Solo una persona puede comprobarlo
• Herramientas: Un lector de pantalla

1. Localizar cualquier prueba que use la página para distinguir a las personas de los programas, como letras deformadas que hay que escribir, imágenes que hay que elegir o un rompecabezas que hay que arrastrar.
2. Comprobar que tiene una alternativa textual que dice qué es y qué hay que hacer, sin revelar la respuesta.
3. Comprobar que ofrece otra forma que usa un sentido distinto, como una versión en audio de una prueba visual, o una vía completamente distinta, como un código por correo electrónico.
4. Probar la otra forma con un lector de pantalla y con el teclado.

Se supera si

La página no tiene ninguna prueba de este tipo, o la prueba dice qué es y ofrece una forma que usa otro sentido y que se puede completar.

No se supera si

La prueba solo se puede superar viendo (o solo oyendo), o no tiene ningún texto que diga qué es, lo que incumple WCAG 1.1.1.

El contenido grabado de solo audio y de solo vídeo tiene una transcripción o una alternativa equivalente

• Las reglas deciden una parte
• Herramientas: solo un navegador

1. Localizar cada reproductor de audio y cada vídeo sin sonido de la página, incluidos los que están en marcos, y reproducir cada uno.
2. En el audio, buscar junto al reproductor y en el resto de la página una transcripción o un enlace a ella.
3. En un vídeo sin sonido, buscar una transcripción, o una versión en audio que describa todo lo que se muestra, que se pueda encontrar y reproducir desde la página con el teclado.
4. Comparar cada alternativa con el contenido multimedia y comprobar que da la misma información: lo que se dice, los sonidos importantes y lo que se muestra.
5. Dejar fuera el contenido multimedia que es en sí una alternativa a un texto de la página y está identificado como tal.

Se supera si

Cada contenido grabado de solo audio o de solo vídeo tiene una transcripción, o en el caso del vídeo una versión en audio, que da lo que da él, o es una alternativa identificada a un texto de la página.

No se supera si

Un contenido grabado de solo audio no tiene transcripción, o un contenido grabado de solo vídeo no tiene ni transcripción ni una versión en audio con la misma información, lo que incumple WCAG 1.2.1.

Reglas que lo comprueban: media-alternative-transcript-evidence

El vídeo grabado con sonido tiene subtítulos

• Solo una persona puede comprobarlo
• Herramientas: solo un navegador

1. Localizar cada vídeo grabado con sonido de la página, incluidos los que están en marcos y en reproductores de otros sitios.
2. Reproducir cada uno con el sonido activado y anotar si su sonido transmite información: diálogo o sonidos importantes.
3. Cuando la transmita, buscar subtítulos: el botón CC del reproductor, subtítulos incrustados en la imagen o una versión subtitulada del mismo vídeo enlazada al lado. Una transcripción por sí sola no sustituye a los subtítulos.
4. Dejar fuera un vídeo que es en sí una alternativa a un texto de la página y está identificado como tal.

Se supera si

Cada vídeo grabado cuyo sonido transmite información tiene subtítulos, aquí o en una versión subtitulada enlazada al lado, o es una alternativa identificada a un texto de la página.

No se supera si

Un vídeo grabado tiene diálogos o sonidos importantes y no tiene subtítulos, ni aquí ni en una versión subtitulada enlazada, aunque se ofrezca una transcripción, lo que incumple WCAG 1.2.2.

Reglas que lo comprueban: video-caption

Los subtítulos recogen todo el diálogo, quién habla y los sonidos importantes, sincronizados con el vídeo

• Solo una persona puede comprobarlo
• Herramientas: solo un navegador

1. Reproducir cada vídeo subtitulado con el sonido y los subtítulos activados.
2. Comparar los subtítulos con lo que se dice y se oye, de principio a fin.
3. Comprobar que recogen todo el diálogo, dicen quién habla cuando no queda claro y describen los sonidos importantes (música, alarmas, risas), y que van sincronizados con la imagen.
4. Tratar con cautela los subtítulos generados automáticamente: suelen equivocarse en nombres, cifras y puntuación y no describen los sonidos, así que rara vez cumplen este criterio sin editarlos.

Se supera si

Los subtítulos recogen todo el diálogo, quién habla cuando hace falta y los sonidos importantes, sincronizados con el vídeo.

No se supera si

Los subtítulos omiten diálogo o sonidos importantes, no dicen quién habla cuando importa o se desfasan respecto al vídeo, lo que incumple WCAG 1.2.2 (F8).

El vídeo grabado con sonido tiene una audiodescripción o una alternativa textual completa

• Solo una persona puede comprobarlo

Todavía no hay procedimiento para esto.

El vídeo en directo con sonido tiene subtítulos

• Solo una persona puede comprobarlo

Todavía no hay procedimiento para esto.

El vídeo grabado con sonido tiene audiodescripción

• Solo una persona puede comprobarlo

Todavía no hay procedimiento para esto.

El texto que parece un encabezado está marcado como tal, con un nivel que corresponde al esquema de la página

• Las reglas deciden una parte
• Herramientas: Las herramientas para desarrolladores del navegador, Un lector de pantalla

1. Recorrer la página y anotar cada texto que funciona como encabezado: es más grande o más grueso que el texto que lo rodea e introduce lo que sigue.
2. Para cada uno, comprobar en el panel Elements de las herramientas para desarrolladores que es un elemento de <h1> a <h6>, o que tiene role="heading" con un aria-level.
3. Comprobar lo contrario: cada elemento de encabezado de la página introduce contenido, en lugar de usarse solo para que el texto sea grande.
4. Enumerar los encabezados con la lista de encabezados de un lector de pantalla, una extensión del navegador como HeadingsMap o el panel Accesibilidad, y comprobar que sus niveles corresponden a la estructura que muestra la página: los subencabezados de una sección están por debajo de su encabezado, no al mismo nivel ni por encima. Un nivel saltado por sí solo, como un h2 seguido de un h4, no incumple este criterio si el anidamiento sigue siendo correcto. Anotarlo como problema de buena práctica.

Se supera si

Cada encabezado visual está marcado como encabezado, cada elemento de encabezado lo es realmente y los niveles siguen el esquema que muestra la página.

No se supera si

Un texto que parece un encabezado es texto normal, un elemento de encabezado se usa solo por su tamaño o los niveles contradicen el esquema, así que quienes usan un lector de pantalla no pueden encontrar ni seguir las secciones, lo que incumple WCAG 1.3.1.

Reglas que lo comprueban: p-as-heading

El contenido que se muestra como lista está marcado como lista

• Las reglas deciden una parte
• Herramientas: Las herramientas para desarrolladores del navegador

1. Recorrer la página en busca de contenido que se muestra como lista: elementos en fila o en columna con viñetas, números o la misma disposición, como menús, pasos y grupos de enlaces.
2. Para cada uno, comprobar en el panel Elements de las herramientas para desarrolladores que es un <ul>, un <ol> o un <dl> (o que tiene role="list" con elementos role="listitem").
3. Comprobar que cada lista solo contiene directamente elementos de lista, y que cada elemento de lista está dentro de una lista.
4. Si se prueba con VoiceOver y Safari, tener en cuenta que Safari no expone una lista cuyas viñetas se quitan con list-style: none a menos que tenga role="list". Es una decisión del navegador, no un fallo de la página, pero conviene anotarlo cuando la estructura de la lista importa al usuario.

Se supera si

El contenido que se muestra como lista está marcado como lista, y el marcado de la lista está completo.

No se supera si

El contenido que se muestra como lista es una sucesión de párrafos, saltos de línea o div, o el marcado de la lista está roto, así que un lector de pantalla no dice que es una lista ni cuántos elementos tiene, lo que incumple WCAG 1.3.1.

Reglas que lo comprueban: list-children-valid, listitem-parent-valid, definition-list-children-valid, dlitem-parent-valid

Las tablas de datos marcan sus encabezados y su título, y las tablas usadas solo para maquetar no llevan marcado de encabezado

• Las reglas deciden una parte
• Herramientas: Las herramientas para desarrolladores del navegador, Un lector de pantalla

1. Localizar cada tabla de la página, y cada cuadrícula de datos dibujada sin tabla.
2. En una tabla de datos, comprobar en el panel Elements de las herramientas para desarrolladores que sus celdas de encabezado son <th> (con scope donde un encabezado no sea claramente de fila o de columna) y que un título que se muestra encima es su <caption>.
3. En una tabla compleja, con encabezados en más de un nivel, comprobar que cada celda de datos indica sus encabezados con un atributo headers o con scope.
4. Con un lector de pantalla, recorrer algunas celdas de datos y comprobar que lee sus encabezados con ellas.
5. En una tabla usada solo para maquetar, comprobar que no tiene <th>, <caption> ni summary.

Se supera si

Los datos están en tablas con los encabezados y el título marcados, un lector de pantalla lee los encabezados de cada celda y las tablas de maquetación no llevan marcado de encabezado.

No se supera si

Una tabla de datos no tiene marcado de encabezado o tiene un título falso en una celda, hay datos dispuestos como cuadrícula sin tabla, o una tabla de maquetación está marcada como de datos, lo que incumple WCAG 1.3.1.

Reglas que lo comprueban: table-headers-attr-valid, table-th-has-data-cells, table-fake-caption, td-has-header

Los campos de formulario están vinculados a sus etiquetas visibles, y los grupos de campos al texto que nombra el grupo

• Las reglas deciden una parte
• Herramientas: Las herramientas para desarrolladores del navegador, Un lector de pantalla

1. Localizar cada campo de formulario de la página: campos de texto, casillas de verificación, botones de opción, listas desplegables y controles personalizados.
2. Para cada uno, seleccionarlo en el panel Elements de las herramientas para desarrolladores y comprobar que el nombre de su panel Accesibilidad contiene su etiqueta visible.
3. En un grupo de campos bajo una misma pregunta, como botones de opción o una fecha en tres partes, comprobar que el grupo es un <fieldset> con un <legend>, o que tiene role="group" con nombre, para que la pregunta se lea con cada campo.
4. Comprobar que las instrucciones que se muestran junto a un campo (un formato, una marca de obligatorio) están vinculadas a él con aria-describedby o forman parte de su etiqueta.

Se supera si

El nombre de cada campo incluye su etiqueta visible, los grupos de campos tienen como nombre su pregunta y las instrucciones de cada campo están vinculadas a él.

No se supera si

Un campo solo está etiquetado por un texto cercano que no está vinculado a él, o la pregunta de un grupo no está vinculada a sus campos, así que un lector de pantalla lee un campo sin decir para qué sirve, lo que incumple WCAG 1.3.1.

Reglas que lo comprueban: form-control-programmatic-label-present

Los roles y las relaciones ARIA dan la misma estructura que muestra la página

• Las reglas deciden una parte
• Herramientas: Las herramientas para desarrolladores del navegador

1. Localizar las partes de la página construidas con roles ARIA: menús personalizados, pestañas, árboles, cuadrículas, listas y cuadros de lista.
2. Para cada una, abrir el árbol de accesibilidad de las herramientas para desarrolladores y comprobar que la estructura que muestra corresponde a lo que hay en pantalla: un tablist que contiene pestañas, un menú que contiene elementos de menú, una cuadrícula que contiene filas y celdas.
3. Comprobar que a ningún elemento con rol le falta el padre o los hijos que necesita su rol, y que aria-owns, donde se use, da a cada elemento un solo propietario.
4. Comprobar que el <body> no está oculto con aria-hidden="true".

Se supera si

El árbol de accesibilidad da la estructura que muestra la página, con cada rol en el lugar que su rol necesita.

No se supera si

A un rol le falta el padre o los hijos que requiere, o tiene dos propietarios, o la página está oculta en el árbol, así que las tecnologías de apoyo dan una estructura que no corresponde a la pantalla, lo que incumple WCAG 1.3.1.

Reglas que lo comprueban: aria-hidden-body, aria-required-children, aria-prohibited-children, aria-required-parent, aria-roles-valid, aria-owns-valid

El significado que transmiten el estilo o la disposición, como la negrita, el color, la posición o un asterisco, también se da en el marcado o en el texto

• Solo una persona puede comprobarlo
• Herramientas: Las herramientas para desarrolladores del navegador, Un lector de pantalla

1. Buscar significado que la página solo muestra por el aspecto: campos obligatorios marcados con un asterisco o con color, palabras destacadas o tachadas, un elemento seleccionado indicado por su estilo, texto separado en un recuadro.
2. Para cada caso, comprobar si el mismo significado está en el marcado (como required, aria-current, <em>, <del>) o en el propio texto («obligatorio», «página actual»).
3. Observar el texto y los iconos añadidos con CSS mediante la propiedad content. Los navegadores difieren en si los lectores de pantalla los leen, así que la información que solo añade el CSS debe estar también en el marcado o en el texto.
4. Leer esas partes con un lector de pantalla y comprobar que se dice lo que muestra el estilo.

Se supera si

Todo lo que transmiten el estilo o la disposición está también en el marcado o en el texto.

No se supera si

El significado solo lo dan el estilo o la posición, como campos obligatorios marcados solo con color o con un asterisco sin explicar, así que quien usa un lector de pantalla no lo percibe, lo que incumple WCAG 1.3.1.

El orden en que las tecnologías de apoyo leen el contenido conserva su significado, y no se usan espacios para disponer el texto

• Solo una persona puede comprobarlo

Todavía no hay procedimiento para esto.

Las instrucciones no dependen solo de la forma, el color, el tamaño, la posición, la orientación o el sonido

• Solo una persona puede comprobarlo

Todavía no hay procedimiento para esto.

La página funciona en vertical y en horizontal, salvo que una orientación sea esencial

• Las reglas deciden una parte
• Herramientas: Las herramientas para desarrolladores del navegador

1. Abrir la página en la barra de herramientas de dispositivos de las herramientas para desarrolladores, o en un teléfono o una tableta.
2. Verla en vertical, girarla luego a horizontal (o al revés) y usar su contenido y sus controles principales en cada orientación.
3. Confirmar el resultado en un teléfono o una tableta reales con el bloqueo de rotación desactivado. La barra de herramientas de dispositivos no puede mostrar si la página bloquea la orientación con script o, en una aplicación web instalada, mediante su manifiesto.
4. Comprobar que la página no pide girar el dispositivo, no gira su contenido de lado ni oculta contenido en una de las orientaciones.
5. Si lo hace, preguntarse si esa orientación es esencial, como en un cheque bancario o un teclado de piano.

Se supera si

La página se muestra y funciona en ambas orientaciones, o una de ellas le es esencial.

No se supera si

La página solo funciona en una orientación, porque pide girar el dispositivo, gira su contenido o lo oculta, sin una razón esencial, lo que incumple WCAG 1.3.4.

Reglas que lo comprueban: css-orientation-lock

Los campos que piden información sobre el usuario indican su propósito con el valor de autocomplete correcto

• Las reglas deciden una parte
• Herramientas: Las herramientas para desarrolladores del navegador

1. Localizar cada campo que pide información sobre la persona que usa la página: nombre, correo electrónico, teléfono, dirección, fecha de nacimiento, nombre de usuario, contraseña, datos de la tarjeta.
2. Para cada uno, leer su atributo autocomplete en el panel Elements de las herramientas para desarrolladores.
3. Comprobar que es el valor que corresponde a lo que pide el campo (name, email, tel, street-address, postal-code, bday, username, new-password, cc-number, etc.).
4. Un campo con autocomplete="off", o sin atributo autocomplete, no identifica su propósito, aunque el navegador siga ofreciendo rellenarlo.
5. Dejar fuera los campos que piden datos de otra persona, como el destinatario de un regalo, salvo que lo indiquen con la sección o el valor correctos.
6. Solo entran en el alcance los propósitos de la lista de propósitos de entrada de WCAG. Un campo para un número de socio o de cliente, por ejemplo, no tiene valor en esa lista ni lo necesita.

Se supera si

Cada campo que pide información propia del usuario tiene el valor de autocomplete que le corresponde.

No se supera si

Un campo que pide información propia del usuario no tiene valor de autocomplete, o tiene uno erróneo, así que el navegador y las herramientas de apoyo no pueden rellenarlo ni marcar su propósito, lo que incumple WCAG 1.3.5.

Reglas que lo comprueban: autocomplete-valid

El color no es el único medio para mostrar información, pedir una respuesta o distinguir un elemento

• Las reglas deciden una parte
• Herramientas: Las herramientas para desarrolladores del navegador

1. Buscar información que la página da mediante el color: enlaces en un párrafo, campos obligatorios o no válidos, la pestaña o el día seleccionados, series de un gráfico, estados en rojo o verde.
2. Para cada caso, comprobar si algo además del color la da también: un subrayado, un icono, una etiqueta de texto, un patrón, un borde o un cambio de forma.
3. En los enlaces de un párrafo que solo se distinguen por el color, comprobar que reciben un subrayado u otra marca al pasar el puntero y al recibir el foco, y que su color tiene un contraste de al menos 3:1 con el texto que los rodea.
4. Ver la página en escala de grises (en el panel Rendering de las herramientas para desarrolladores, emular acromatopsia) y comprobar que no se pierde nada.

Se supera si

Todo lo que la página da mediante el color se da también de otra forma.

No se supera si

Hay información, como qué campos tienen errores o qué texto es un enlace, que solo se da mediante el color, lo que incumple WCAG 1.4.1.

Reglas que lo comprueban: link-in-text-block

El sonido que se reproduce solo durante más de 3 segundos se puede pausar, detener o bajar de volumen

• Solo una persona puede comprobarlo
• Herramientas: Un teclado

1. Cargar la página con el sonido activado y escuchar si hay sonido que empieza solo: música, un vídeo, un anuncio.
2. Donde suene durante más de 3 segundos, buscar cerca del principio de la página o del reproductor una forma de pausarlo o detenerlo, o de bajar su volumen con independencia del volumen del equipo.
3. Comprobar que el control se puede encontrar y usar con el teclado.

Se supera si

Ningún sonido se reproduce solo durante más de 3 segundos, o un control cerca del principio de la página lo pausa, lo detiene o lo baja.

No se supera si

Un sonido se reproduce solo durante más de 3 segundos sin forma de pausarlo, detenerlo o bajarlo aparte del volumen del equipo, así que tapa al lector de pantalla, lo que incumple WCAG 1.4.2.

Reglas que lo comprueban: no-autoplay-audio

El texto tiene un contraste de al menos 4.5:1 con su fondo, o de 3:1 si es grande

• Las reglas deciden una parte
• Herramientas: Las herramientas para desarrolladores del navegador

1. Recorrer la página en busca de texto que parezca tenue sobre su fondo: texto gris claro, texto sobre paneles de color, texto del atributo placeholder, texto sobre imágenes o degradados, texto en botones.
2. Para cada uno, inspeccionarlo y hacer clic en la muestra de su color en el panel Styles de las herramientas para desarrolladores: el selector de color muestra su relación de contraste con el fondo.
3. El selector de color mide respecto al color de fondo definido en CSS. Donde el texto esté sobre una imagen, un degradado o una capa semitransparente, o su color venga de la opacidad o de un modo de fusión, la cifra del selector no es fiable: usar en su lugar el paso siguiente.
4. Donde el fondo sea una imagen, un degradado o una capa semitransparente, medir el texto respecto a la parte del fondo en que menos se vea, con un analizador de contraste de color.
5. Comprobar que la relación es de al menos 4.5:1, o de 3:1 para texto grande: al menos 24 píxeles (18 pt), o 18.66 píxeles (14 pt) y en negrita.
6. No redondear el resultado: 4.49:1 no se supera. Comprobar también el texto en sus otros estados, como al pasar el puntero, con el foco y seleccionado, ya que un estado puede reducir el contraste.
7. Dejar fuera los logotipos y los nombres de marca, el texto de controles deshabilitados, el texto que es solo decorativo o que nadie puede ver, y el texto que forma parte de una imagen con otro contenido importante, como una señal de tráfico en una foto.

Se supera si

Todo el texto y todas las imágenes de texto tienen un contraste de al menos 4.5:1 con su fondo, o de 3:1 si son grandes.

No se supera si

Un texto tiene con su fondo un contraste inferior a 4.5:1 (3:1 para texto grande), así que las personas con baja visión no pueden leerlo, lo que incumple WCAG 1.4.3.

Reglas que lo comprueban: contrast-minimum, contrast-computable

El texto se puede ampliar al 200 % sin perder contenido ni funcionalidad

• Las reglas deciden una parte
• Herramientas: El zoom del navegador

1. Ampliar el zoom del navegador al 200 %.
2. Recorrer toda la página y comprobar que todo el texto ha aumentado de tamaño y que ninguno queda cortado, superpuesto u oculto.
3. Usar los controles, los menús y los formularios de la página a ese tamaño y comprobar que todos siguen funcionando.
4. En un teléfono, comprobar que se puede ampliar la página al 200 % pellizcando. Usar Chrome en Android con su ajuste de accesibilidad que fuerza la habilitación del zoom desactivado: Safari en iOS ignora una ventana gráfica que bloquea el zoom, así que puede ocultar este fallo.
5. Dejar fuera los subtítulos y las imágenes de texto.

Se supera si

Al 200 %, todo el texto ha aumentado de tamaño y sigue siendo legible, y todo sigue funcionando.

No se supera si

Al 200 %, el texto queda cortado, se superpone o no aumenta de tamaño, un control deja de funcionar o el zoom con los dedos está bloqueado, lo que incumple WCAG 1.4.4.

Reglas que lo comprueban: meta-viewport-zoom-enabled

El texto se muestra como texto, no en una imagen, salvo que su aspecto sea esencial, como en un logotipo

• Solo una persona puede comprobarlo
• Herramientas: Las herramientas para desarrolladores del navegador

1. Buscar imágenes que contengan palabras: banners, encabezados, botones, citas, menús.
2. Intentar seleccionar una de sus palabras con el puntero, o inspeccionarla: el texto que no se puede seleccionar suele estar en una imagen, un dibujo SVG o un canvas.
3. Para cada una, preguntarse si se podría mostrar lo mismo con texto real con estilo CSS.
4. Dejar fuera los logotipos y los nombres de marca, las imágenes en las que el aspecto concreto del texto es esencial, como una muestra de fuente, y las imágenes de texto que el usuario puede adaptar a su gusto, como una página que permite elegir la fuente, el tamaño y los colores del texto de la imagen.

Se supera si

El texto es texto real, o la imagen de texto es un logotipo o necesita su aspecto exacto.

No se supera si

Hay palabras que se muestran como imagen cuando un texto con estilo se vería igual, así que no se puede cambiar su tamaño, su color ni su espaciado, lo que incumple WCAG 1.4.5.

Reglas que lo comprueban: image-of-text

Con 320 píxeles CSS de ancho, el contenido no necesita desplazamiento en dos direcciones y no se pierde nada

• Solo una persona puede comprobarlo

Todavía no hay procedimiento para esto.

Las partes de un control que muestran que está ahí y su estado tienen un contraste de al menos 3:1

• Solo una persona puede comprobarlo

Todavía no hay procedimiento para esto.

Las partes de un gráfico necesarias para entenderlo tienen un contraste de al menos 3:1

• Solo una persona puede comprobarlo

Todavía no hay procedimiento para esto.

El espaciado forzado en un atributo style no impide que el texto adopte el espaciado del usuario

• Las reglas deciden una parte
• Herramientas: Las herramientas para desarrolladores del navegador

1. En el panel Elements de las herramientas para desarrolladores, buscar !important en el marcado de la página (Ctrl+F, o Cmd+F en un Mac) y anotar cada coincidencia en un atributo style que defina line-height, letter-spacing o word-spacing.
2. Para cada una, leer el valor resultante en la pestaña Computed y compararlo con 1,5 veces el tamaño de la fuente para line-height, 0,12 veces para letter-spacing y 0,16 veces para word-spacing.
3. Donde el valor sea menor, estrechar la ventana hasta 320 píxeles CSS de ancho y comprobar si ese texto pasa a ocupar más de una línea.
4. En el panel Styles de las herramientas para desarrolladores, añadir una nueva regla de estilo para * con line-height: 1.5 !important; letter-spacing: 0.12em !important; word-spacing: 0.16em !important, y una regla para p con margin-bottom: 2em !important. El elemento conserva su propio valor, porque gana su atributo style.
5. Comprobar si ese texto queda cortado, se superpone a otro texto o queda oculto.

Se supera si

Ningún atributo style fuerza un espaciado inferior a esos valores en un texto que pasa a otra línea, o el texto afectado se sigue mostrando completo con el espaciado aplicado.

No se supera si

Un atributo style fuerza un espaciado inferior a esos valores en un texto que pasa a otra línea, así que un bookmarklet o una extensión del navegador no puede aplicar el espaciado de la persona, y con ese espaciado el texto se superpone o queda cortado, lo que incumple WCAG 1.4.12.

Reglas que lo comprueban: avoid-inline-spacing

Con el espaciado de 1.4.12 aplicado, ningún texto queda cortado ni se superpone (medido en un navegador)

• Las reglas deciden una parte
• Herramientas: Las herramientas para desarrolladores del navegador, Un teclado

1. En el panel Styles de las herramientas para desarrolladores, añadir una nueva regla de estilo para * con line-height: 1.5 !important; letter-spacing: 0.12em !important; word-spacing: 0.16em !important, y una regla para p con margin-bottom: 2em !important. La política de seguridad de la página no bloquea las reglas añadidas en el panel Styles.
2. Recorrer toda la página y buscar texto que quede cortado, se superponga a otro texto o desaparezca. El texto que forma parte de una imagen no cuenta.
3. Hacerlo con los anchos que se prueban en otras comprobaciones, incluidos 320 píxeles CSS, donde el texto pasa más a otra línea y más a menudo queda cortado.
4. Donde el texto quede cortado, comprobar si la página ofrece una forma de mostrarlo entero, como un enlace «Leer más» o un botón que amplía el recuadro. Solo cuenta si se puede usar con el teclado y, con el espaciado aún aplicado, muestra el texto completo.

Se supera si

Todo el texto sigue visible y legible, o cualquier texto cortado se puede mostrar completo con el teclado.

No se supera si

Con el espaciado aplicado, parte del texto queda cortado, se superpone o se pierde, y no se puede mostrar completo de otra forma, lo que incumple WCAG 1.4.12.

Reglas que lo comprueban: text-spacing-content-loss

Con el espaciado de 1.4.12 aplicado, los controles, los menús y los formularios siguen funcionando y muestran todo su texto

• Solo una persona puede comprobarlo
• Herramientas: Las herramientas para desarrolladores del navegador, Un teclado, Un ratón u otro dispositivo señalador

1. En el panel Styles de las herramientas para desarrolladores, añadir una nueva regla de estilo para * con line-height: 1.5 !important; letter-spacing: 0.12em !important; word-spacing: 0.16em !important, y una regla para p con margin-bottom: 2em !important.
2. Usar cada control de la página: abrir sus menús y listas desplegables, rellenar y enviar sus formularios, cambiar de pestaña y abrir y cerrar sus diálogos.
3. Comprobar que cada uno sigue respondiendo, que ningún texto desplazado tapa un control y que cada etiqueta y cada botón muestran todo su texto.

Se supera si

Con el espaciado aplicado, todos los controles siguen funcionando y muestran todo su texto.

No se supera si

Con el espaciado aplicado, un control deja de funcionar, queda tapado de modo que no se puede usar o pierde el texto que dice qué hace, lo que incumple WCAG 1.4.12.

Con el espaciado de 1.4.12 aplicado, el contenido que solo se muestra tras una interacción (menús, diálogos, pestañas, mensajes) conserva todo su texto

• Solo una persona puede comprobarlo
• Herramientas: Las herramientas para desarrolladores del navegador, Un teclado, Un ratón u otro dispositivo señalador

1. En el panel Styles de las herramientas para desarrolladores, añadir una nueva regla de estilo para * con line-height: 1.5 !important; letter-spacing: 0.12em !important; word-spacing: 0.16em !important, y una regla para p con margin-bottom: 2em !important.
2. Hacer aparecer el contenido que la página solo muestra después de hacer algo: abrir cada menú y cada diálogo, cambiar a cada pestaña, desplegar cada sección contraída, mostrar cada información emergente y enviar un formulario con un error para ver sus mensajes de error.
3. Comprobar en cada uno si hay texto que quede cortado, se superponga a otro texto o desaparezca, como en la propia página.
4. Donde el texto quede cortado, comprobar si la página ofrece una forma de mostrarlo entero, como un enlace «Leer más» o un botón que amplía el recuadro. Solo cuenta si se puede usar con el teclado y, con el espaciado aún aplicado, muestra el texto completo.

Se supera si

Con el espaciado aplicado, el contenido que se muestra después de hacer algo mantiene todo su texto visible y legible, o el texto cortado se puede mostrar completo con el teclado.

No se supera si

Con el espaciado aplicado, el texto de un menú, un diálogo, una pestaña, una información emergente o un mensaje queda cortado o se superpone, y no se puede mostrar completo de otra forma, lo que incumple WCAG 1.4.12.

El contenido adicional que aparece al pasar el puntero o al recibir el foco se puede descartar sin mover el puntero ni el foco

• Solo una persona puede comprobarlo

Todavía no hay procedimiento para esto.

El puntero puede moverse sobre el contenido adicional que aparece al pasar el puntero sin que este desaparezca

• Solo una persona puede comprobarlo

Todavía no hay procedimiento para esto.

El contenido adicional que aparece al pasar el puntero o al recibir el foco permanece hasta que se descarta, el puntero o el foco se retiran o deja de ser válido

• Solo una persona puede comprobarlo

Todavía no hay procedimiento para esto.

Toda la funcionalidad se puede manejar solo con el teclado

• Solo una persona puede comprobarlo
• Herramientas: Un teclado

1. Desactivar cualquier lector de pantalla. En modo exploración, un lector de pantalla puede activar elementos a los que el teclado solo no llega, lo que oculta los fallos.
2. Recargar la página y, sin hacer clic, pulsar Tab repetidamente por toda la página. Anotar cada enlace, botón, campo y otro control por el que se pase.
3. Compararlo con lo que se puede pulsar o arrastrar con el puntero, y anotar todo aquello a lo que el teclado nunca llega: un control, una opción de menú, un cuadro desplazable, una parte de un mapa o un widget personalizado.
4. Usar cada control con el teclado: Intro o Espacio para activarlo, las teclas de flecha dentro de menús, pestañas, listas y controles deslizantes, y Esc para cerrar lo que se abre.
5. En los widgets personalizados, comparar las teclas con las que indican las WAI-ARIA Authoring Practices para ese tipo de widget, como las teclas de flecha en una lista de pestañas. Un widget que solo funciona con teclas poco habituales puede superar este criterio si la página las explica, pero conviene anotarlo como problema de usabilidad.
6. Donde algo no se pueda alcanzar o usar con el teclado, comprobar si la página ofrece otra forma de hacer lo mismo solo con el teclado, como los botones anterior y siguiente de un carrusel. Solo cuenta si hace todo lo que puede hacer el puntero.
7. Dejar fuera lo que depende de la trayectoria del puntero, como el dibujo a mano alzada.

Se supera si

Todo lo que la página permite hacer con un puntero se puede hacer solo con el teclado, directamente o mediante otra forma que cumple la misma función.

No se supera si

Algo solo se puede hacer con un puntero, sin forma de hacer lo mismo con el teclado, lo que incumple WCAG 2.1.1.

Reglas que lo comprueban: iframe-focusable-content, server-side-image-map-absent, scrollable-region-focusable, mouse-only-event-handlers, click-handler-keyboard-operable, widget-keyboard-focusable, focus-not-removed-by-script

El foco siempre se puede sacar de cualquier parte de la página con el teclado

• Solo una persona puede comprobarlo

Todavía no hay procedimiento para esto.

Los atajos de una sola letra, número o símbolo se pueden desactivar o reasignar, o solo funcionan mientras su control tiene el foco

• Solo una persona puede comprobarlo

Todavía no hay procedimiento para esto.

Cada límite de tiempo se puede desactivar, ajustar o ampliar, salvo que sea en tiempo real, esencial o de más de 20 horas

• Las reglas deciden una parte
• Herramientas: solo un navegador

1. Buscar cualquier cosa de la página que ocurra pasado un tiempo fijo: una sesión que termina, un formulario que caduca, una página que se actualiza o avanza sola, un contenido que desaparece.
2. Revisar el código fuente de la página y esperar un rato en ella para encontrar límites que no se anuncian, como un <meta http-equiv="refresh"> o un cierre de sesión por inactividad.
3. En una sesión que termina en el servidor, preguntar al equipo cuánto dura en lugar de suponerlo, y esperar al aviso en ese momento. Comprobar el aviso con un lector de pantalla: debe anunciarse, no solo mostrarse.
4. Para cada límite, comprobar que se cumple al menos una de estas condiciones: se puede desactivar antes de alcanzarlo; se puede ajustar a al menos diez veces su duración; o se avisa antes de que termine, se dispone de al menos 20 segundos para ampliarlo con una acción sencilla, como pulsar una tecla, y se puede ampliar al menos diez veces.
5. Dejar fuera los límites que forman parte de un evento en tiempo real, como una subasta, los que son esenciales, como un examen cronometrado, y los de más de 20 horas.

Se supera si

Cada límite de tiempo se puede desactivar, ajustar o ampliar, o es en tiempo real, esencial o de más de 20 horas.

No se supera si

Un límite de tiempo pone fin a una sesión, un formulario o una página sin forma de desactivarlo, ajustarlo ni ampliarlo, lo que incumple WCAG 2.2.1.

Reglas que lo comprueban: meta-refresh-timing-absent

Las animaciones que empiezan solas y duran más de cinco segundos se pueden poner en pausa, detener u ocultar

• Solo una persona puede comprobarlo
• Herramientas: Un teclado

1. Cargar la página y observar si algo se mueve, parpadea o se desplaza solo: carruseles, texto en movimiento, animaciones, vídeos de fondo.
2. Para cada uno que empieza solo, dura más de 5 segundos y se muestra junto a otro contenido, buscar un control para ponerlo en pausa, detenerlo u ocultarlo.
3. Comprobar que el control se puede encontrar y usar con el teclado, y que detiene el movimiento en lugar de solo ralentizarlo.
4. Dejar fuera el movimiento esencial, como un indicador de progreso mientras algo se carga.

Se supera si

Todo lo que se mueve, parpadea o se desplaza solo durante más de 5 segundos junto a otro contenido se puede poner en pausa, detener u ocultar.

No se supera si

Un contenido se mueve, parpadea o se desplaza solo durante más de 5 segundos junto a otro contenido sin forma de ponerlo en pausa, detenerlo u ocultarlo, lo que incumple WCAG 2.2.2.

Reglas que lo comprueban: moving-content-pausable, deprecated-elements-not-used

El contenido que se actualiza solo se puede poner en pausa, detener, ocultar o configurar para que se actualice con menos frecuencia

• Solo una persona puede comprobarlo
• Herramientas: Un teclado

1. Observar en la página el contenido que cambia solo: teletipos de noticias, resultados en directo, precios, feeds, temporizadores.
2. Para cada uno que empieza solo y se muestra junto a otro contenido, buscar un control para ponerlo en pausa, detenerlo u ocultarlo, o para elegir con qué frecuencia se actualiza.
3. Comprobar que el control se puede encontrar y usar con el teclado.
4. Dejar fuera las actualizaciones esenciales para la finalidad de la página.

Se supera si

Cada parte que se actualiza sola junto a otro contenido se puede poner en pausa, detener, ocultar o ralentizar, o sus actualizaciones son esenciales.

No se supera si

Un contenido se actualiza solo junto a otro contenido sin forma de ponerlo en pausa, detenerlo, ocultarlo ni cambiar su frecuencia, lo que incumple WCAG 2.2.2.

Nada destella más de tres veces en un segundo, o los destellos son lo bastante pequeños y tenues

• Solo una persona puede comprobarlo

Todavía no hay procedimiento para esto.

Los bloques que se repiten en varias páginas se pueden saltar

• Las reglas deciden una parte
• Herramientas: Un teclado, Un lector de pantalla, Las herramientas para desarrolladores del navegador

1. Cerrar cualquier diálogo o capa superpuesta y anotar los bloques que la página repite de otras páginas del sitio: cabecera, navegación, búsqueda, barras laterales.
2. Recargar la página y pulsar Tab una vez: comprobar si aparece un enlace de salto que lleve el foco más allá de esos bloques, hasta el contenido principal, y seguirlo con Intro.
3. Comprobar, en el panel Accesibilidad de las herramientas para desarrolladores o en las listas de un lector de pantalla, si el contenido principal es una región de referencia main o empieza con un encabezado fuera de la navegación.
4. Donde la página tenga un enlace de salto, comprobar que su destino existe y que el siguiente Tab después de seguirlo entra en el contenido principal.

Se supera si

La página no repite bloques, o un enlace de salto que funciona, una región de referencia main o los encabezados permiten saltarlos a quienes usan el teclado o un lector de pantalla.

No se supera si

Los bloques repetidos no tienen forma de saltarse, así que quienes usan el teclado o un lector de pantalla deben recorrerlos en cada página, lo que incumple WCAG 2.4.1.

Reglas que lo comprueban: bypass-blocks-present

La página tiene un título que dice de qué trata o para qué sirve, y la distingue de las demás páginas del sitio

• Las reglas deciden una parte
• Herramientas: solo un navegador

1. Leer el título de la página en la pestaña del navegador, o en el <title> del panel Elements de las herramientas para desarrolladores.
2. Comprobar que dice de qué trata esta página o para qué sirve, como el titular del artículo o el paso de un proceso («Dirección de entrega - Pago - Tienda»).
3. Abrir otras dos o tres páginas del sitio y comprobar que sus títulos las distinguen. Poner primero la parte propia de la página, antes del nombre del sitio, es una buena práctica, pero no se exige.
4. Donde la página cambie su contenido sin cargar una página nueva, como hace una aplicación de una sola página, comprobar que el título cambia con él.

Se supera si

El título de la página dice de qué trata o para qué sirve y la distingue de las demás páginas.

No se supera si

La página no tiene título, o tiene uno genérico, un nombre de archivo o el mismo que otras páginas, lo que incumple WCAG 2.4.2.

Reglas que lo comprueban: page-title-present, page-title-patterns

Al mover el foco con Tab y Mayús+Tab se sigue un orden que conserva el significado de la página y permite usarla

• Solo una persona puede comprobarlo
• Herramientas: Un teclado

1. Recargar la página y pulsar Tab repetidamente hasta que el foco haya recorrido toda la página, observando adónde va.
2. Comparar el orden con el orden en que se leería y se usaría la página: los campos de un formulario en el orden de sus etiquetas, por ejemplo, y los pasos de una tarea en su secuencia.
3. Volver a recorrer la página con Mayús+Tab y comprobar que el foco vuelve por el mismo camino en sentido inverso.
4. Donde el orden difiera del orden de lectura, comprobar si eso cambia el significado de algo o impide usarlo, como llegar al botón Enviar de un formulario antes que a sus campos.

Se supera si

El foco recorre la página en un orden que conserva su significado y permite usar todas sus partes, aunque difiera ligeramente del orden visual.

No se supera si

El foco salta por la página de forma que cambia su significado o su uso, como campos que se rellenan fuera de orden, lo que incumple WCAG 2.4.3.

El foco entra en un diálogo, un menú o una sección que se abre, se queda en un diálogo mientras este cubre la página y vuelve cuando se cierra

• Solo una persona puede comprobarlo
• Herramientas: Un teclado

1. Con el teclado, abrir cada diálogo, menú, lista desplegable y sección contraída que tenga la página, pulsando Intro o Espacio en el control que lo abre.
2. Pulsar Tab una vez y comprobar que el foco entra en lo que se ha abierto, o ya está en ello, en lugar de ir a algo que queda detrás o lejos.
3. En un diálogo que cubre la página, pulsar Tab hasta haber recorrido todos sus controles y comprobar que el foco se queda en el diálogo en lugar de ir a la página que hay detrás.
4. Cerrarlo con Esc o con su botón de cierre y comprobar que el foco vuelve al control que lo abrió, o al siguiente lugar lógico.

Se supera si

El foco entra en lo que se abre, se queda en un diálogo mientras este cubre la página y vuelve a donde estaba cuando se cierra.

No se supera si

El foco se queda detrás de lo que se abre, sale de un diálogo hacia la página que hay detrás o acaba al principio de la página al cerrarse, así que el orden ya no sigue lo que hay en pantalla, lo que incumple WCAG 2.4.3.

El foco no se detiene en contenido cerrado, oculto o fuera de la pantalla

• Solo una persona puede comprobarlo
• Herramientas: Un teclado, Las herramientas para desarrolladores del navegador

1. Cerrar cualquier menú o diálogo, recargar la página y recorrerla entera con Tab, observando dónde está el foco.
2. Anotar cada vez que el foco parezca desaparecer durante una o más pulsaciones.
3. En cada una de esas paradas, escribir document.activeElement en la consola de las herramientas para desarrolladores y comprobar si el elemento que muestra está en un menú cerrado, en un panel oculto o fuera de la pantalla.
4. Dejar fuera un enlace de salto que aparece al recibir el foco: se muestra una vez que tiene el foco.

Se supera si

Cada parada de tabulación está en algo visible, o en algo que aparece al recibir el foco, como un enlace de salto.

No se supera si

El foco se detiene en controles de menús cerrados, de paneles ocultos o fuera de la pantalla, así que el orden pasa por cosas que no están a la vista, lo que incumple WCAG 2.4.3.

El propósito de cada enlace se puede saber por su texto, o por su texto junto con la frase, el párrafo, el elemento de lista o la celda de tabla en que está

• Las reglas deciden una parte
• Herramientas: Las herramientas para desarrolladores del navegador, Un lector de pantalla

1. Enumerar los enlaces de la página con la lista de enlaces de un lector de pantalla, o recorrerlos con Tab y leer el nombre de cada uno en el panel Accesibilidad de las herramientas para desarrolladores.
2. Anotar los enlaces cuyo nombre no dice adónde llevan ni qué hacen: nombres vacíos, «haga clic aquí», «leer más», «PDF», el nombre de archivo de un icono.
3. Para cada uno, leer la frase, el párrafo, el elemento de lista o la celda de tabla en que está el enlace, o el encabezado de tabla de su celda, y comprobar si eso deja claro su propósito.
4. El contexto que cuenta es la frase, el párrafo, el elemento de lista o la celda de tabla del enlace, las celdas de encabezado de su celda, el encabezado bajo el que está el enlace y el texto vinculado al enlace con aria-describedby. El texto que solo está cerca del enlace, como un párrafo de otra columna, no cuenta.
5. Comprobar que los enlaces con el mismo nombre que llevan a sitios distintos se distinguen por su contexto.

Se supera si

El propósito de cada enlace queda claro por su nombre, o por su nombre junto con la frase, el párrafo, el elemento de lista o la celda de tabla en que está.

No se supera si

Un enlace no tiene nombre, o tiene un nombre como «leer más» cuyo propósito no explica nada de lo que lo rodea, lo que incumple WCAG 2.4.4.

Reglas que lo comprueban: link-name-present, link-name-quality

Hay más de una forma de encontrar una página dentro del sitio

• Solo una persona puede comprobarlo

Todavía no hay procedimiento para esto.

Los encabezados describen el contenido que les sigue

• Solo una persona puede comprobarlo
• Herramientas: Un lector de pantalla

1. Enumerar los encabezados de la página con la lista de encabezados de un lector de pantalla, una extensión del navegador como HeadingsMap o el árbol de accesibilidad de las herramientas para desarrolladores.
2. Leer cada encabezado y el contenido que hay debajo.
3. Comprobar que cada encabezado dice de qué trata ese contenido, y que no es un texto provisional, un nombre de archivo ni una palabra que podría encabezar cualquier cosa.
4. Comprobar que los encabezados contiguos del mismo nivel se pueden distinguir.
5. Este criterio solo pide que los encabezados y las etiquetas que existen describan su contenido. La falta de un encabezado o una etiqueta se comprueba en 1.3.1 o 3.3.2, no aquí.

Se supera si

Cada encabezado dice de qué trata el contenido que hay debajo.

No se supera si

Un encabezado no describe el contenido que hay debajo, como «Sección 1» o un nombre de archivo, lo que incumple WCAG 2.4.6.

Reglas que lo comprueban: heading-quality

Las etiquetas describen sus campos, y los campos con la misma etiqueta se pueden distinguir

• Solo una persona puede comprobarlo
• Herramientas: solo un navegador

1. Leer la etiqueta visible de cada campo y control de la página.
2. Comprobar que cada una dice qué introducir o elegir, como «Correo electrónico» en lugar de «Campo 1» o «Texto».
3. Donde varios campos compartan etiqueta, como «Nombre» dos veces, comprobar que la página deja claro cuál es cuál, mediante un encabezado de grupo o el resto de la etiqueta.

Se supera si

Cada etiqueta dice para qué sirve su campo o su control, y los campos con la misma etiqueta se distinguen.

No se supera si

Una etiqueta no dice para qué sirve su campo, o varios campos tienen la misma etiqueta sin nada que los distinga, lo que incumple WCAG 2.4.6.

Reglas que lo comprueban: form-control-label-quality

Cada elemento que recibe el foco del teclado muestra que lo tiene

• Las reglas deciden una parte
• Herramientas: Un teclado

1. Recargar la página y recorrerla entera con Tab, despacio.
2. En cada parada, comprobar que se ve qué elemento tiene el foco: un contorno, un cambio de color, un subrayado u otro cambio visible.
3. Mover el foco con el teclado, no con el ratón. Los navegadores muestran el foco de un elemento en el que se ha hecho clic con el ratón de forma distinta que el de uno al que se ha llegado con Tab, así que una prueba con el ratón no demuestra nada aquí.
4. Anotar cada parada en la que no se distingue dónde está el foco, y cada vez que el foco parezca desaparecer durante una o más pulsaciones.
5. Hacer lo mismo dentro de los menús, los diálogos y los widgets que usan las teclas de flecha.
6. Activar un tema de contraste en Windows y repetir algunas paradas. Un estilo de foco dibujado solo con box-shadow o con un color de fondo desaparece en ese modo. WCAG no exige que se muestre ahí, pero conviene anotarlo como problema de buena práctica.

Se supera si

En cada parada se ve qué elemento tiene el foco.

No se supera si

El foco llega a un elemento sin ningún cambio visible, o cae en algo oculto o fuera de la pantalla, así que quienes usan el teclado pierden la noción de dónde están, lo que incumple WCAG 2.4.7.

Reglas que lo comprueban: css-hidden-focus, css-focus-indicator-suppressed, focus-not-removed-by-script

Un elemento que recibe el foco no queda totalmente oculto por contenido que la página coloca encima

• Solo una persona puede comprobarlo

Todavía no hay procedimiento para esto.

Lo que hace un gesto con trayectoria o multipunto también se puede hacer con un solo toque o clic

• Solo una persona puede comprobarlo

Todavía no hay procedimiento para esto.

Las acciones se ejecutan al soltar el puntero, no al pulsarlo, o se pueden cancelar o deshacer

• Solo una persona puede comprobarlo

Todavía no hay procedimiento para esto.

El nombre de un control contiene el texto de su etiqueta visible

• Las reglas deciden una parte
• Herramientas: Las herramientas para desarrolladores del navegador

1. Localizar cada control con una etiqueta visible formada por texto: botones, enlaces, campos, pestañas, opciones de menú y controles etiquetados por un texto junto a ellos.
2. Para cada uno, leer su nombre en el panel Accesibilidad de las herramientas para desarrolladores.
3. Comprobar que el nombre contiene las palabras de la etiqueta visible, en el mismo orden e idealmente al principio (un botón que muestra «Enviar» con el nombre «Enviar mensaje», no «Mandar»).
4. Al comparar, no tener en cuenta las diferencias de mayúsculas ni de puntuación. El texto que se muestra como imagen también cuenta como etiqueta visible.
5. Dejar fuera una etiqueta formada solo por símbolos, como «×» o «>»: el nombre debería decir qué hace el control.
6. Dejar fuera los controles sin texto visible, como un botón que solo tiene un icono: no tienen una etiqueta visible con la que coincidir.

Se supera si

El nombre de cada control contiene las palabras de su etiqueta visible, en orden.

No se supera si

El nombre de un control no contiene su etiqueta visible, así que quien usa la entrada por voz no puede activarlo diciendo lo que ve, lo que incumple WCAG 2.5.3.

Reglas que lo comprueban: label-in-name

Lo que se hace moviendo el dispositivo también se puede hacer con controles, y la respuesta al movimiento se puede desactivar

• Solo una persona puede comprobarlo

Todavía no hay procedimiento para esto.

Lo que se hace arrastrando también se puede hacer con toques o clics simples

• Solo una persona puede comprobarlo

Todavía no hay procedimiento para esto.

Los objetivos miden al menos 24 por 24 píxeles CSS, o están suficientemente separados

• Las reglas deciden una parte
• Herramientas: Las herramientas para desarrolladores del navegador

1. Buscar controles pequeños: iconos, botones de cierre, paginación, enlaces en fila, casillas de verificación pequeñas.
2. Inspeccionar cada uno y leer en el modelo de caja de las herramientas para desarrolladores el tamaño de la zona que responde al puntero, que puede ser mayor que el icono visible. Comprobar que mide al menos 24 por 24 píxeles CSS.
3. Donde sea menor, comprobar si un círculo de 24 píxeles centrado en él tocaría otro objetivo o el círculo de otro objetivo pequeño.
4. Dejar fuera los enlaces dentro de una frase o un párrafo, los controles que dibuja el navegador sin estilo, los controles con un equivalente de tamaño suficiente en otra parte de la página y los objetivos cuyo tamaño es esencial, como los marcadores de un mapa.

Se supera si

Cada objetivo mide al menos 24 por 24 píxeles CSS, o está suficientemente separado de los demás, o es una de las excepciones.

No se supera si

Un objetivo de menos de 24 por 24 píxeles CSS está tan cerca de otro que sus círculos de 24 píxeles se superponen, y no se le aplica ninguna excepción, lo que incumple WCAG 2.5.8.

Reglas que lo comprueban: target-size-minimum

El idioma principal de la página se indica en su marcado y es el correcto

• Las reglas deciden una parte
• Herramientas: Las herramientas para desarrolladores del navegador

1. Leer el atributo lang del elemento <html> en el panel Elements de las herramientas para desarrolladores.
2. Comprobar que es un código de idioma (en, fr, pt-BR) y que es el idioma en que está la mayor parte del texto de la página.
3. Donde <html> tenga también xml:lang, comprobar que ambos indican el mismo idioma.
4. En una aplicación de una sola página, cambiar el idioma de la interfaz y comprobar que lang cambia con él. Un lector de pantalla solo cambia de voz si tiene instalada una para ese idioma, así que conviene juzgar por el marcado, no solo por lo que se oye.

Se supera si

El lang del elemento <html> indica el idioma en que está la mayor parte de la página.

No se supera si

La página no tiene lang, o tiene uno erróneo o no válido, así que los lectores de pantalla la leen con una voz y una pronunciación equivocadas, lo que incumple WCAG 3.1.1.

Reglas que lo comprueban: html-lang-attr-present, html-xml-lang-mismatch

Los pasajes y las frases en un idioma distinto del de la página están marcados con su propio idioma

• Las reglas deciden una parte
• Herramientas: Las herramientas para desarrolladores del navegador, Un lector de pantalla

1. Leer la página entera y anotar los pasajes, citas, frases y nombres de cosas escritos en un idioma distinto del de la página, incluidas las opciones de un selector de idioma.
2. Para cada uno, comprobar en el panel Elements de las herramientas para desarrolladores que él, o un elemento que lo contiene, tiene un atributo lang con el código de ese idioma.
3. Dejar fuera los nombres propios, los términos técnicos y las palabras que se han incorporado al idioma de la página, como «café» en inglés.
4. Escuchar algunos con un lector de pantalla para comprobar que cambia de pronunciación.

Se supera si

Cada pasaje o frase en otro idioma está marcado con un atributo lang válido para ese idioma.

No se supera si

Un pasaje o una frase en otro idioma no está marcado con su idioma, o lo está con un código erróneo, así que se lee con una pronunciación equivocada, lo que incumple WCAG 3.1.2.

Reglas que lo comprueban: valid-lang

Mover el foco a un elemento no cambia el contexto por sí solo

• Solo una persona puede comprobarlo

Todavía no hay procedimiento para esto.

Cambiar un ajuste no cambia el contexto salvo que se avise antes al usuario

• Solo una persona puede comprobarlo

Todavía no hay procedimiento para esto.

La navegación que se repite en varias páginas aparece cada vez en el mismo orden relativo

• Solo una persona puede comprobarlo

Todavía no hay procedimiento para esto.

Los componentes que hacen lo mismo en distintas páginas se identifican de la misma forma

• Solo una persona puede comprobarlo

Todavía no hay procedimiento para esto.

La ayuda que se ofrece en varias páginas está cada vez en el mismo lugar relativo

• Solo una persona puede comprobarlo

Todavía no hay procedimiento para esto.

Un error de entrada que detecta la página se muestra en un texto que dice qué campo es erróneo y qué está mal

• Las reglas deciden una parte
• Herramientas: Un teclado, Un lector de pantalla

1. Localizar cada formulario de la página y enviarlo vacío, y luego con valores erróneos: un correo electrónico mal formado, letras en un campo numérico, una fecha pasada.
2. Comprobar que cada error que detecta la página se muestra en texto, no solo con color o con un icono, junto al campo o en una lista al principio.
3. Comprobar que el texto dice qué campo es erróneo y qué tiene de malo.
4. Los mensajes de validación del propio navegador cuentan como texto, pero su redacción y el tiempo que permanecen en pantalla varían entre navegadores. Comprobarlos en cada navegador con el que se pruebe.
5. Comprobar con un lector de pantalla que el error se anuncia o se alcanza con facilidad, y que cada campo erróneo está marcado como no válido.

Se supera si

Cada error de entrada que detecta la página se muestra en un texto que nombra el campo y el problema.

No se supera si

Un error de entrada solo se muestra con color o con un icono, no se muestra en absoluto o se muestra sin decir qué campo es erróneo, lo que incumple WCAG 3.3.1.

Reglas que lo comprueban: invalid-field-error-message

Los campos que piden datos tienen una etiqueta visible, e instrucciones donde los datos las necesitan

• Las reglas deciden una parte
• Herramientas: Las herramientas para desarrolladores del navegador

1. Localizar cada campo y cada control de la página que pide datos.
2. Comprobar que cada uno tiene una etiqueta que se ve sin pasar el puntero por encima ni escribir: no solo el texto del atributo placeholder, que desaparece al escribir, ni un title que aparece al pasar el puntero.
3. Donde los datos deban seguir unas reglas, como un formato de fecha, los requisitos de una contraseña o qué campos son obligatorios, comprobar que la página lo indica antes de que el usuario los envíe.
4. Este criterio solo pide que se muestren etiquetas e instrucciones. Si una etiqueta está vinculada a su campo en el marcado se comprueba en 1.3.1 y 4.1.2.

Se supera si

Cada campo tiene una etiqueta visible, y la página da las instrucciones que necesitan los datos antes de enviarlos.

No se supera si

Un campo no tiene etiqueta visible, solo un atributo placeholder o un title que aparece al pasar el puntero, o las reglas de los datos solo se indican después de un error, lo que incumple WCAG 3.3.2.

Reglas que lo comprueban: form-control-programmatic-label-present, form-control-single-label, form-control-programmatic-label-quality

Cuando la página sabe cómo corregir un error de entrada, lo dice

• Solo una persona puede comprobarlo

Todavía no hay procedimiento para esto.

Los envíos con efectos legales o financieros, o que modifican datos almacenados, se pueden revertir, se comprueban o se pueden revisar y confirmar

• Solo una persona puede comprobarlo

Todavía no hay procedimiento para esto.

La información que el usuario ya ha dado en un proceso se rellena automáticamente o se ofrece para seleccionarla, en lugar de volver a pedirse

• Solo una persona puede comprobarlo

Todavía no hay procedimiento para esto.

Iniciar sesión no exige recordar, transcribir ni resolver nada, salvo que se ofrezca una forma de evitarlo

• Solo una persona puede comprobarlo
• Herramientas: solo un navegador

1. Recorrer cada forma que ofrece el sitio para iniciar sesión o verificar la identidad, con una cuenta de prueba.
2. Anotar cada paso que pida recordar algo (una contraseña), transcribirlo (un código de otro dispositivo) o resolver algo (un rompecabezas, un cálculo, elegir imágenes).
3. En una contraseña o un código, comprobar que se puede pegar y que un gestor de contraseñas puede rellenarlo, para no tener que recordarlo ni volver a escribirlo.
4. Comprobar que un gestor de contraseñas rellena realmente los campos: los campos de usuario y contraseña necesitan autocomplete="username" y autocomplete="current-password" (o new-password), y un campo de código de un solo uso funciona mejor con autocomplete="one-time-code".
5. Donde un código esté dividido en una casilla por dígito, pegar el código completo en la primera casilla y comprobar que las rellena todas. Las casillas que bloquean el pegado, o que solo admiten un carácter cada una, no se superan.
6. En otras pruebas, comprobar que se ofrece otro método, o que la prueba solo pide reconocer objetos o algo que el usuario dio al sitio.
7. Contar un CAPTCHA que se muestra durante el inicio de sesión como parte del inicio de sesión. Otros métodos que no requieren ninguna prueba cognitiva, como una llave de acceso, un enlace de inicio de sesión enviado por correo electrónico o el inicio de sesión mediante un tercero, son alternativas válidas.

Se supera si

Cada paso de inicio de sesión que pide recordar, transcribir o resolver algo permite pegar y usar gestores de contraseñas, u ofrece otra forma, o solo pide reconocer objetos o contenido propio del usuario.

No se supera si

Iniciar sesión exige recordar, transcribir o resolver algo sin forma de evitarlo, como un campo de código que bloquea el pegado, lo que incumple WCAG 3.3.8.

Reglas que lo comprueban: password-paste-enabled

Cada enlace, control, marco y diálogo tiene un nombre que dice para qué sirve

• Las reglas deciden una parte
• Herramientas: Las herramientas para desarrolladores del navegador, Un lector de pantalla

1. Recorrer cada enlace, botón, campo, marco y control personalizado de la página, pulsando Tab y, dentro de los widgets, con las teclas de flecha.
2. Para cada uno, leer el nombre en el panel Accesibilidad de las herramientas para desarrolladores, o escuchar lo que dice un lector de pantalla.
3. Comprobar los nombres con dos combinaciones de navegador y lector de pantalla. Los nombres que se obtienen de aria-labelledby, de un label que envuelve el control o de content en CSS pueden variar entre ellas.
4. Comprobar que cada uno tiene un nombre que dice para qué sirve, incluidos los botones que solo tienen un icono, los marcos («Reproductor de vídeo», «Mapa») y los diálogos.
5. Comprobar que los marcos con el mismo nombre muestran lo mismo, y que los nombres dados solo para braille tienen un equivalente hablado.

Se supera si

Cada enlace, control, marco y diálogo tiene un nombre que dice para qué sirve.

No se supera si

Un enlace, un control, un marco o un diálogo no tiene nombre, o tiene uno que no dice para qué sirve, así que las tecnologías de apoyo solo anuncian su rol, lo que incumple WCAG 4.1.2.

Reglas que lo comprueban: form-control-programmatic-label-present, link-name-present, button-name-present, input-image-alt-present, binary-control-name-present, combobox-name-present, dialog-name-present, menuitem-name-present, tab-name-present, slider-name-present, textbox-name-present, searchbox-name-present, spinbutton-name-present, listbox-name-present, option-name-present, treeitem-name-present, aria-role-name-present, iframe-name-present, identical-iframes-same-purpose, iframe-title-unique, summary-name-present, tooltip-name-present, aria-braille-equivalent

El rol de cada control dice lo que hace, y los controles no están anidados unos dentro de otros

• Las reglas deciden una parte
• Herramientas: Las herramientas para desarrolladores del navegador, Un lector de pantalla

1. Para cada control de la página, anotar lo que hace al usarlo: abre una página (un enlace), actúa sobre la página (un botón), alterna un estado (una casilla de verificación o un interruptor), abre una lista (un menú o un cuadro combinado).
2. Leer su rol en el panel Accesibilidad de las herramientas para desarrolladores, o escuchar un lector de pantalla, y comprobar que el rol corresponde a lo que hace.
3. Prestar atención a los controles personalizados hechos con div y span, a los enlaces usados como botones y a los botones usados como enlaces.
4. Comprobar que ningún control contiene otro, como un botón dentro de un enlace, y que los controles cuyos hijos son presentacionales, como una pestaña o un botón, no contienen nada enfocable.

Se supera si

El rol de cada control dice lo que hace, y ningún control está anidado dentro de otro.

No se supera si

Un control no tiene rol, tiene uno erróneo (un div en el que se puede hacer clic sin rol, un enlace que actúa como botón) o contiene otro control, lo que incumple WCAG 4.1.2.

Reglas que lo comprueban: aria-roles-valid, aria-deprecated-role, nested-interactive-controls-absent, presentational-children-focusable-absent

El estado y el valor de cada control se exponen y cambian con lo que hay en pantalla

• Las reglas deciden una parte
• Herramientas: Las herramientas para desarrolladores del navegador, Un lector de pantalla, Un teclado

1. Localizar los controles que tienen un estado o un valor: casillas de verificación, interruptores, botones de opción, secciones y menús desplegables, pestañas, controles deslizantes, elementos seleccionados, botones pulsados.
2. Leer el estado y el valor de cada uno en el panel Accesibilidad de las herramientas para desarrolladores, o escucharlos con un lector de pantalla: marcado, expandido, seleccionado, pulsado, el elemento actual (aria-current) y el valor actual de un control deslizante o un control numérico.
3. Cambiar cada uno con el teclado y comprobar que el estado o el valor que se lee cambia con lo que se ve.
4. En un control desplegable, comprobar que indica expandido solo mientras se muestra lo que abre.

Se supera si

El estado y el valor de cada control se exponen y cambian con lo que hay en pantalla.

No se supera si

El estado o el valor de un control no se expone, o no cambia cuando cambia en pantalla, como una casilla de verificación personalizada que siempre se lee como no marcada, lo que incumple WCAG 4.1.2.

Reglas que lo comprueban: aria-required-attr, aria-conditional-attr, aria-checked-state-mismatch, aria-expanded-state-mismatch

Los atributos ARIA son reales, válidos y están permitidos donde se usan, y nada enfocable está oculto para las tecnologías de apoyo

• Las reglas deciden una parte
• Herramientas: Las herramientas para desarrolladores del navegador

1. En el panel Elements de las herramientas para desarrolladores, buscar aria- y role= en el marcado y revisar cada uso.
2. Comprobar que cada atributo aria-* existe realmente, tiene un valor válido y está permitido en el rol de su elemento.
3. Comprobar que los id a los que apuntan aria-labelledby, aria-describedby, aria-controls y similares existen y aparecen una sola vez.
4. Comprobar que nada que reciba el foco está dentro de un elemento con aria-hidden="true", y que el <body> no está oculto.

Se supera si

Los atributos ARIA son reales, válidos y están permitidos donde se usan, sus id son únicos y nada enfocable está oculto.

No se supera si

Un atributo ARIA está mal escrito, tiene un valor no válido o no está permitido en su rol, falta o se repite un id al que apunta, o algo enfocable está oculto para las tecnologías de apoyo, lo que incumple WCAG 4.1.2.

Reglas que lo comprueban: aria-hidden-focus, aria-valid-attr, aria-valid-attr-value, aria-allowed-attr, aria-prohibited-attr, aria-hidden-body, duplicate-id-aria

Las tecnologías de apoyo anuncian los mensajes de estado sin que estos reciban el foco

• Solo una persona puede comprobarlo
• Herramientas: Un lector de pantalla

1. Localizar los mensajes que la página muestra sin mover el foco: «Añadido al carrito», número de resultados de búsqueda, «Guardado», progreso, errores de formulario enumerados después del envío.
2. Activar un lector de pantalla y provocar cada mensaje mediante la acción que lo muestra.
3. Comprobar que el lector de pantalla dice el mensaje sin que el foco se mueva a él.
4. Repetirlo con una segunda combinación de navegador y lector de pantalla. Las regiones vivas están entre los aspectos menos uniformes del soporte de los lectores de pantalla.
5. Donde no diga nada, comprobar en las herramientas para desarrolladores que el mensaje está en un elemento con role="status", role="alert" o aria-live, y que el elemento no está oculto. Una región role="status" o aria-live debe estar ya en la página, vacía, antes de que se le añada el mensaje. Un elemento con role="alert" suele anunciarse aunque se añada junto con su mensaje.
6. Dejar fuera los mensajes que reciben el foco o que llegan con una página nueva: no son mensajes de estado, y se comprueban en otros criterios.

Se supera si

Un lector de pantalla anuncia cada mensaje de estado sin que el foco se mueva a él.

No se supera si

Un mensaje de estado aparece en pantalla pero un lector de pantalla no lo dice, lo que incumple WCAG 4.1.3.

Reglas que lo comprueban: live-region-announcements