WCAG 2.2 · Técnicas
Técnicas y fallos comunes de las WCAG 2.2
Las técnicas explican cómo cumplir cada criterio de las WCAG. Los fallos comunes son los errores que hacen que no se cumpla. El W3C solo las publica en inglés: en ADDAW las hemos traducido todas.
Cada ficha lo explica en lenguaje claro: qué es, por qué importa, cómo se hace y cómo comprobarlo. Debajo está el texto completo del W3C traducido. Sirve para cumplir el Real Decreto 1112/2018, la norma UNE-EN 301 549 y la Ley Europea de Accesibilidad.
- 454 técnicas y fallos traducidos
- 95 fallos comunes
- Ver los criterios de conformidad WCAG 2.2
Fallos comunes 95
Errores documentados por el W3C que hacen que una página no cumpla un criterio de conformidad. Son lo primero que se busca en una auditoría.
- F1 Contenido que cambia de sentido al reordenarlo solo con CSS
- F2 Títulos y estructura que solo se notan por el aspecto del texto con ejemplo práctico
- F3 Información importante puesta solo como imagen de fondo en CSS
- F4 Texto que parpadea con text-decoration: blink (obsoleto) obsoleta
- F7 Contenido incrustado que parpadea sin poder pararlo
- F8 Subtítulos que dejan fuera diálogos o sonidos importantes
- F9 Formularios que se envían o cambian de página al salir de un campo
- F10 El teclado se queda atrapado dentro de un contenido incrustado
- F12 La sesión caduca y se pierde lo escrito en el formulario
- F13 Gráficos con información en colores que su texto alternativo no explica
- F14 Instrucciones que solo dicen dónde está algo o qué forma tiene
- F15 Controles personalizados que el lector de pantalla no reconoce
- F16 Contenido que se mueve o se desplaza sin poder pausarlo
- F19 Versión accesible alternativa que no se puede encontrar
- F20 Imágenes que cambian sin actualizar su texto alternativo
- F22 Ventanas o pestañas nuevas que se abren sin avisar con ejemplo práctico
- F23 Sonido que empieza solo y no se puede parar
- F24 Color del texto definido sin color de fondo, o al revés
- F25 Títulos de página que no dicen qué contiene la página
- F26 Símbolos e iconos con significado que el lector de pantalla no explica
- F30 Textos alternativos que no sustituyen a la imagen con ejemplo práctico
- F31 El mismo botón o enlace con nombres distintos en cada página
- F32 Espacios dentro de una palabra para separar sus letras
- F33 Columnas de texto hechas con espacios o tabuladores
- F34 Tablas dibujadas con espacios o tabuladores en lugar de una tabla real
- F36 Formularios que se envían solos al salir del último campo con ejemplo práctico
- F37 Opciones de formulario que abren una ventana nueva al marcarlas
- F38 Imágenes decorativas sin atributo alt con ejemplo práctico
- F39 Imágenes decorativas con un texto alternativo que sobra con ejemplo práctico
- F40 Redirigir a otra página de forma automática tras unos segundos
- F41 Páginas que se recargan solas cada cierto tiempo
- F42 Enlaces falsos hechos con span, div o img y JavaScript con ejemplo práctico
- F43 Encabezados, citas y otras etiquetas usadas solo por su aspecto con ejemplo práctico
- F44 Orden de tabulación desordenado por usar tabindex con números con ejemplo práctico
- F46 Tablas de maquetación con encabezados, título o resumen de tabla de datos
- F47 Texto que parpadea sin parar con la etiqueta blink obsoleta
- F48 Tablas de datos hechas con texto preformateado (pre)
- F49 Tablas de maquetación que se leen en un orden sin sentido
- F50 Parpadeos hechos con JavaScript que no se paran a los 5 segundos
- F52 Ventanas emergentes que se abren solas al cargar la página
- F54 Funciones que solo se activan con el ratón o con gestos táctiles
- F55 Scripts que quitan el foco a un elemento en cuanto lo recibe con ejemplo práctico
- F58 Páginas que el servidor recarga o redirige solas tras unos segundos
- F59 Controles hechos con div o span que no dicen qué son
- F60 Ventanas nuevas que se abren al escribir en un campo de formulario
- F61 Páginas que cambian solas sin que se pueda desactivar
- F63 Enlaces cuyo sentido se explica en otro párrafo o en otra celda
- F65 Imágenes y botones de imagen sin texto alternativo con ejemplo práctico
- F66 Menús que cambian el orden de sus enlaces de una página a otra
- F67 Descripciones largas que no cuentan lo mismo que la imagen
- F68 Campos de formulario sin nombre para el lector de pantalla con ejemplo práctico
- F69 Texto que se corta o se pisa al agrandar la letra
- F70 Etiquetas HTML mal escritas (fallo obsoleto) obsoleta
- F71 Letras de otros alfabetos que imitan a las nuestras
- F72 Dibujos hechos con caracteres sin texto alternativo
- F73 Enlaces dentro del texto que solo se distinguen por el color con ejemplo práctico
- F74 Vídeos alternativos a un texto sin indicar a qué texto sustituyen
- F75 Vídeo que amplía la información de un texto y no tiene subtítulos
- F77 Valores de id repetidos en la misma página obsoleta
- F78 Quitar o esconder con CSS el indicador del foco con ejemplo práctico
- F79 Menús y listas a medida que no informan de dónde está el foco
- F80 Campos de formulario que no crecen al agrandar el texto
- F81 Campos obligatorios o con error marcados solo con color con ejemplo práctico
- F82 Campos de teléfono sin un texto que diga qué se pide
- F83 Texto sobre imágenes de fondo con poco contraste
- F84 Enlaces «Más» o «Haga clic aquí» que no se entienden solos con ejemplo práctico
- F85 Diálogos y menús que se abren lejos del foco del teclado
- F86 Partes de un campo dividido sin nombre para el lector de pantalla
- F87 Texto con información insertado con CSS mediante ::before y ::after obsoleta
- F88 Texto justificado que dificulta la lectura
- F89 Enlaces con solo una imagen y sin nombre accesible con ejemplo práctico
- F90 Tablas complejas con headers e id mal relacionados
- F91 Tablas de datos cuyas cabeceras no están marcadas como tales
- F92 Usar role="presentation" en contenido que tiene significado
- F93 Vídeo o audio que suena solo y no se puede parar
- F94 Tamaño de letra en unidades vw o vh que no crece con el zoom
- F95 Contenido que aparece al pasar el ratón y se cierra al ir hacia él
- F96 Nombre accesible que no incluye el texto visible del control
- F97 Bloquear la web o la app en vertical u horizontal
- F98 Controles que solo funcionan con el dedo si hay pantalla táctil
- F99 Atajos de teclado de una sola tecla que no se pueden desactivar
- F100 Pedir que se gire el móvil en lugar de adaptar el contenido
- F101 Botones que actúan nada más pulsar, sin esperar a soltar
- F102 Contenido que desaparece al estrechar la pantalla a 320 píxeles
- F103 Mensajes de estado que el lector de pantalla no anuncia
- F104 Texto que se corta al aumentar el espaciado entre líneas y letras con ejemplo práctico
- F105 Funciones que solo se manejan con gestos de trazo, sin alternativa
- F106 Funciones activadas al mover el móvil que no se pueden desactivar
- F107 Campos de datos personales con un valor autocomplete incorrecto
- F108 Funciones que solo se pueden hacer arrastrando
- F109 Pedir contraseñas o códigos en casillas sueltas o por caracteres
- F110 Elemento con el foco tapado por cabeceras, pies o avisos fijos con ejemplo práctico
- F111 Controles con etiqueta visible pero sin nombre accesible con ejemplo práctico
- F112 Contenido que parpadea más de cinco segundos sin forma de pararlo
- F113 Audiodescripción que no aprovecha las pausas del diálogo
Técnicas generales 169
Técnicas independientes de la tecnología: valen para cualquier formato de contenido web.
- G1 Poner al principio un enlace para saltar al contenido principal con ejemplo práctico
- G4 Permitir pausar y reanudar el contenido que se mueve
- G5 Diseñar actividades sin límite de tiempo
- G8 Ofrecer una versión del vídeo con audiodescripción ampliada
- G9 Subtitular en tiempo real las emisiones en directo
- G10 Crear controles que comuniquen su nombre, función y estado
- G11 Hacer que el parpadeo dure menos de cinco segundos
- G13 Avisar antes de que un campo de formulario cambie la página
- G14 Decir también con texto lo que se indica con colores
- G15 Analizar los destellos con una herramienta para evitar crisis epilépticas
- G17 Dar al texto un contraste de al menos 7:1 con el fondo
- G18 Dar al texto un contraste de al menos 4,5:1 con el fondo con ejemplo práctico
- G19 Evitar que nada destelle más de tres veces por segundo
- G21 Evitar que el foco del teclado quede atrapado en una parte de la página
- G53 Explicar el destino del enlace con la frase en la que está
- G54 Añadir un intérprete de lengua de signos dentro del vídeo
- G55 Enlazar las palabras difíciles y las abreviaturas a su definición
- G56 Mezclar el audio con el fondo al menos 20 dB por debajo de la voz
- G57 Ordenar el contenido del código en una secuencia con sentido
- G58 Poner junto al vídeo un enlace a su alternativa en texto
- G59 Ordenar los enlaces, botones y campos según la lógica del contenido
- G60 Hacer que el sonido automático se pare solo en 3 segundos como máximo
- G61 Mantener el mismo orden en los bloques que se repiten en todas las páginas
- G62 Ofrecer un glosario con las palabras difíciles y las abreviaturas
- G63 Ofrecer un mapa del sitio
- G64 Incluir una tabla de contenidos en los documentos largos
- G65 Mostrar migas de pan para indicar en qué parte del sitio se está
- G68 Describir en una frase las emisiones en directo de solo audio o solo vídeo
- G69 Ofrecer un texto completo que cuente todo lo que ocurre en un vídeo
- G70 Enlazar las palabras difíciles con un diccionario en línea
- G71 Poner enlaces de ayuda en las páginas con formularios
- G73 Enlazar desde la imagen una descripción larga situada en otro lugar
- G74 Poner la descripción larga como texto visible junto a la imagen
- G75 Permitir aplazar o desactivar las actualizaciones automáticas del contenido
- G76 Dejar que el usuario decida cuándo se actualiza el contenido
- G78 Ofrecer una pista de sonido con audiodescripción
- G79 Ofrecer una versión hablada del texto
- G80 Usar un botón de envío para iniciar un cambio de contexto
- G81 Ofrecer la lengua de signos en un vídeo aparte y sincronizado
- G82 Describir el propósito de un elemento que no se puede sustituir por texto
- G83 Avisar en texto de los campos obligatorios que se han dejado vacíos
- G84 Explicar en texto el error cuando el dato no es un valor permitido
- G85 Explicar en texto cómo corregir un dato con formato incorrecto con ejemplo práctico
- G86 Ofrecer un resumen fácil de leer de un texto complejo
- G87 Añadir subtítulos que se pueden activar y desactivar
- G88 Dar a cada página un título que la describa con ejemplo práctico
- G89 Indicar el formato que deben tener los datos de un campo
- G90 Permitir hacer con el teclado todo lo que se hace con el ratón
- G91 Escribir enlaces cuyo texto explique a dónde llevan
- G92 Dar una descripción larga a gráficos e imágenes complejas
- G93 Incrustar los subtítulos en la propia imagen del vídeo
- G94 Dar a cada imagen un texto breve que cumpla la misma función
- G95 Dar un texto breve que identifique las imágenes complejas
- G96 Señalar los elementos con algo más que su forma, tamaño o posición
- G97 Escribir la forma completa de una abreviatura la primera vez que aparece
- G98 Permitir revisar y corregir los datos antes de una operación definitiva
- G99 Permitir recuperar la información borrada por error
- G100 Dar un nombre descriptivo a obras de arte, música y otros contenidos sensoriales
- G101 Definir las palabras que se usan con un sentido poco habitual
- G102 Explicar qué significan las abreviaturas y las siglas
- G103 Acompañar los textos difíciles con imágenes, esquemas y gráficos
- G105 Guardar los datos del usuario cuando caduca la sesión
- G107 Provocar los cambios grandes al activar un control, no al llegar a él
- G108 Usar los controles estándar del lenguaje para que se reconozcan bien
- G110 Redirigir al instante desde el navegador cuando no se puede desde el servidor
- G111 Usar tramas y formas además del color en gráficos e imágenes
- G112 Explicar las palabras poco habituales en el mismo texto
- G115 Marcar la estructura con las etiquetas que corresponden a su significado
- G117 Decir con palabras lo que se indica con negrita, tachado u otros formatos
- G120 Indicar la pronunciación justo después de la palabra
- G121 Enlazar las palabras difíciles con su pronunciación
- G123 Poner al principio de un bloque repetido un enlace para saltarlo
- G124 Poner al principio de la página enlaces a cada zona
- G125 Ofrecer enlaces a páginas relacionadas
- G126 Poner en cada página una lista de enlaces a todas las demás
- G127 Indicar a qué sección o conjunto de páginas pertenece cada página
- G128 Marcar en el menú la página o el paso en que se está
- G130 Escribir encabezados que describan su sección
- G131 Escribir etiquetas que digan qué dato se pide con ejemplo práctico
- G133 Dar la opción de pedir más tiempo al empezar un formulario por partes
- G134 Validar el código de las páginas (técnica obsoleta) obsoleta
- G135 Usar los componentes accesibles de la tecnología y darles nombre
- G136 Enlazar al principio de la página una versión alternativa accesible
- G138 Acompañar el color con marcado que indique el mismo significado
- G139 Mostrar una lista de errores con enlaces a cada campo
- G140 Separar la estructura del contenido de su aspecto visual
- G141 Organizar la página con títulos de sección bien jerarquizados
- G142 Permitir ampliar el contenido con el zoom del navegador
- G143 Dar a un CAPTCHA un texto alternativo que explique para qué sirve
- G144 Ofrecer otro CAPTCHA en un formato distinto
- G145 Dar al texto grande un contraste de al menos 3:1 con el fondo
- G146 Usar un diseño fluido que se adapte al ancho disponible
- G148 No fijar el color del texto ni del fondo y dejar los del navegador
- G149 Usar controles estándar que el navegador resalta al recibir el foco
- G150 Ofrecer en texto, en tiempo real, lo que se dice en un audio en directo
- G151 Enlazar el guion o discurso escrito de un audio en directo que lo sigue
- G152 Hacer que los GIF animados dejen de moverse antes de 5 segundos
- G153 Escribir los textos para que sean más fáciles de leer
- G155 Añadir una casilla de confirmación junto al botón de enviar
- G156 Permitir que el usuario cambie los colores del texto y del fondo
- G157 Incluir en la página un servicio de subtitulado en directo para el audio
- G158 Ofrecer la transcripción completa de un audio grabado
- G159 Ofrecer una descripción en texto de un vídeo sin sonido
- G160 Ofrecer en lengua de signos la información difícil o imprescindible
- G161 Ofrecer un buscador para encontrar contenidos en la web
- G162 Colocar las etiquetas de los formularios donde se esperan
- G163 Permitir mostrar u ocultar los signos diacríticos
- G164 Dar un plazo para cancelar o modificar un pedido ya enviado
- G165 Usar el indicador de foco propio del navegador y del sistema
- G166 Ofrecer un audio que describa un vídeo sin sonido
- G167 Usar el botón junto a un campo como etiqueta visible del campo
- G168 Pedir confirmación antes de una acción que no se puede deshacer
- G169 Alinear el texto a un solo lado, sin justificarlo
- G170 Poner al principio de la página un control para apagar el sonido
- G171 Reproducir sonidos solo cuando la persona lo pida
- G172 Ofrecer un botón para quitar la justificación del texto
- G173 Ofrecer una versión del vídeo con audiodescripción
- G174 Ofrecer un enlace a una versión de alto contraste de la página
- G175 Ofrecer un selector para elegir el color del texto y del fondo
- G176 Mantener los destellos dentro de una zona pequeña de la pantalla
- G177 Proponer la corrección cuando un dato del formulario no es válido
- G178 Ofrecer botones para agrandar y reducir el texto de la página
- G179 Evitar que el texto ampliado se salga de su caja
- G180 Permitir que el usuario amplíe los límites de tiempo antes de empezar
- G181 Conservar los datos del formulario al volver a iniciar sesión
- G182 Añadir una marca visual además del color al texto que destaca
- G183 Dar a los enlaces sin subrayar un contraste de 3:1 con el texto con ejemplo práctico
- G184 Explicar al principio del formulario el formato de los datos
- G185 Enlazar todas las páginas desde la portada en sitios pequeños
- G186 Ofrecer un control para detener lo que se mueve o parpadea
- G187 Dejar que el navegador detenga el parpadeo (técnica obsoleta) obsoleta
- G188 Ofrecer un botón para aumentar el interlineado y el espacio entre párrafos
- G189 Ofrecer al principio un control para mostrar enlaces con texto completo
- G190 Poner junto a un contenido no accesible un enlace a su versión accesible
- G191 Ofrecer un enlace o botón que recargue la página sin parpadeo
- G192 Escribir el código según su especificación (técnica obsoleta) obsoleta
- G193 Ofrecer ayuda con un asistente animado en vídeo
- G194 Corregir la ortografía y sugerir palabras al escribir en un campo
- G195 Mostrar un indicador del foco propio, grueso y con buen contraste con ejemplo práctico
- G196 Dar un solo texto alternativo a un grupo de imágenes que forman una idea
- G197 Usar el mismo nombre para los elementos que hacen lo mismo
- G198 Ofrecer al principio de la página una forma de desactivar el límite de tiempo
- G199 Confirmar con un mensaje claro que una acción ha salido bien
- G200 Abrir ventanas o pestañas nuevas solo cuando sea necesario
- G201 Avisar de que un enlace o botón abre una ventana o pestaña nueva
- G202 Hacer que todas las funciones se puedan usar con el teclado
- G203 Describir en texto los vídeos en los que solo habla una persona
- G204 Dejar que el texto se reajuste al estrechar la ventana
- G205 Acompañar con texto o símbolos la información que se da con color
- G206 Ofrecer una vista del contenido sin desplazamiento lateral
- G207 Dar a los iconos un contraste de al menos 3:1 con su fondo con ejemplo práctico
- G208 Incluir el texto visible de un control en su nombre accesible
- G209 Distinguir con contraste suficiente los colores contiguos de un gráfico
- G210 Permitir cancelar o deshacer una acción de arrastrar y soltar
- G211 Hacer que el nombre interno de un control coincida con su texto visible
- G212 Activar los controles al soltar el puntero, como hacen los controles nativos
- G213 Ofrecer botones y poder desactivar las funciones que responden al movimiento
- G214 Ofrecer un control para cambiar la orientación del contenido
- G215 Añadir botones que hagan lo mismo que un gesto de deslizar
- G216 Permitir manejar un control deslizante con simples toques o clics
- G217 Permitir desactivar o cambiar los atajos de teclado de una sola tecla
- G218 Iniciar sesión con un enlace enviado por correo electrónico
- G219 Ofrecer una alternativa a arrastrar y soltar
- G220 Poner el enlace de contacto siempre en el mismo sitio
- G221 Reutilizar en un proceso los datos que ya se dieron en un paso anterior
- G223 Diseñar un indicador de foco propio y muy visible
- G224 Conservar la sangría que da sentido al texto en pantallas estrechas
- G225 Hacer que cada panel de un carrusel quepa en 320 píxeles de ancho
- G226 Incluir la audiodescripción en la propia narración del vídeo
HTML 64
Técnicas para HTML: marcado semántico, formularios, tablas, imágenes, idioma, enlaces.
- H2 Unir en un solo enlace el icono y el texto que llevan al mismo sitio
- H4 Fijar el orden de tabulación con tabindex positivo (técnica obsoleta) obsoleta
- H24 Dar texto alternativo a cada zona clicable de un mapa de imagen
- H25 Dar a cada página un título con el elemento title con ejemplo práctico
- H28 Explicar las abreviaturas con el elemento abbr
- H30 Escribir textos de enlace que digan adónde llevan con ejemplo práctico
- H32 Poner un botón de envío en cada formulario con ejemplo práctico
- H33 Completar el texto de un enlace con el atributo title
- H34 Colocar bien la puntuación al mezclar árabe o hebreo con español
- H35 Dar una alternativa de texto a los applets de Java (técnica obsoleta) obsoleta
- H36 Poner alt a las imágenes que funcionan como botón de envío
- H37 Usar el atributo alt en las imágenes con ejemplo práctico
- H39 Poner el título de las tablas de datos en un elemento caption
- H40 Marcar glosarios y definiciones con listas de descripción
- H42 Marcar los títulos y subtítulos con encabezados h1 a h6 con ejemplo práctico
- H43 Unir celdas y encabezados con id y headers en tablas complejas
- H44 Asociar cada campo de formulario con su etiqueta label con ejemplo práctico
- H45 Describir imágenes complejas con longdesc (técnica obsoleta) obsoleta
- H46 Dar contenido alternativo a embed con noembed (técnica obsoleta) obsoleta
- H48 Marcar las listas y los menús con ul, ol y dl
- H49 Usar etiquetas con significado para el texto destacado o especial
- H51 Marcar las tablas de datos con table, th y td
- H53 Poner una alternativa de texto dentro del elemento object
- H54 Marcar con dfn el término en el lugar donde se define
- H56 Usar dir en un fragmento para ordenar bien textos de dirección mixta
- H57 Indicar el idioma de la página con lang en el elemento html con ejemplo práctico
- H58 Marcar con lang los fragmentos escritos en otro idioma con ejemplo práctico
- H59 Usar link rel="prev" y rel="next" para navegar (obsoleta) obsoleta
- H60 Enlazar un glosario con link rel="glossary" (obsoleta) obsoleta
- H62 Indicar la pronunciación con el elemento ruby
- H63 Usar scope para unir los encabezados con sus celdas en las tablas con ejemplo práctico
- H64 Dar un title que describa el contenido de cada iframe con ejemplo práctico
- H65 Usar title para nombrar un campo de formulario sin etiqueta visible
- H67 Dejar el alt vacío y sin title en las imágenes decorativas con ejemplo práctico
- H69 Poner un encabezado al principio de cada sección de la página
- H70 Agrupar en marcos (frames) los bloques que se repiten obsoleta
- H71 Agrupar campos de formulario relacionados con fieldset y legend con ejemplo práctico
- H73 Resumir las tablas de datos con el atributo summary obsoleta
- H74 Abrir, cerrar y anidar bien las etiquetas HTML obsoleta
- H75 Comprobar que las páginas en XML están bien formadas obsoleta
- H76 Redirigir al instante con meta refresh a cero segundos
- H77 Aclarar un enlace con el texto del elemento de lista que lo contiene
- H78 Aclarar un enlace con el texto del párrafo que lo contiene
- H79 Aclarar los enlaces de una tabla con su celda y sus encabezados
- H80 Aclarar un enlace con el encabezado que tiene justo antes
- H81 Aclarar un enlace de una sublista con el texto del elemento que la contiene
- H83 Avisar en el enlace de que se abrirá una ventana nueva
- H84 Usar un botón junto a la lista desplegable para ejecutar la acción
- H85 Agrupar las opciones de una lista desplegable con optgroup
- H86 Dar texto alternativo a emojis, emoticonos, arte ASCII y leet
- H88 Usar el HTML tal como lo define su especificación
- H89 Dar ayuda en los campos de formulario con el atributo title
- H90 Indicar los campos obligatorios en la etiqueta o en la leyenda
- H91 Usar los controles de formulario y los enlaces nativos de HTML
- H93 Que cada valor de id se use una sola vez en la página (técnica obsoleta) obsoleta
- H94 No repetir un atributo en el mismo elemento (técnica obsoleta) obsoleta
- H95 Añadir subtítulos a un vídeo con el elemento track
- H96 Añadir la audiodescripción de un vídeo con el elemento track
- H97 Agrupar los enlaces de navegación con el elemento nav
- H98 Indicar con autocomplete qué dato personal pide cada campo con ejemplo práctico
- H99 Ofrecer una lista de páginas en las publicaciones digitales
- H100 Marcar bien los campos de correo y contraseña del inicio de sesión
- H101 Marcar las zonas de la página con header, nav, main, aside y footer con ejemplo práctico
- H102 Crear ventanas modales con el elemento dialog de HTML
CSS 36
Técnicas para hojas de estilo: contraste, espaciado, reajuste, foco, orden visual.
- C6 Colocar el contenido con CSS sin perder la estructura del HTML
- C7 Completar el texto de un enlace con una parte oculta visualmente
- C8 Separar las letras de una palabra con letter-spacing, no con espacios
- C9 Poner las imágenes decorativas con CSS
- C12 Indicar el tamaño de letra en porcentajes
- C13 Indicar el tamaño de letra con palabras clave como small o large
- C14 Indicar el tamaño de letra en unidades em
- C15 Cambiar con CSS el aspecto de enlaces y controles cuando reciben el foco
- C17 Hacer que los campos y botones de formulario crezcan al ampliar el texto
- C18 Usar margin y padding de CSS en lugar de imágenes espaciadoras
- C19 Alinear el texto a la izquierda o a la derecha con CSS
- C20 Definir el ancho de las columnas con medidas relativas
- C21 Dar un interlineado de 1,5 a 2 con line-height
- C22 Dar estilo al texto con CSS en lugar de usar imágenes de texto
- C23 Dar color solo al contenido secundario y no al texto principal
- C24 Definir el ancho de los contenedores en porcentajes
- C25 Marcar las zonas con bordes y maquetación CSS sin fijar colores de texto
- C27 Hacer que el orden del código coincida con el orden visual
- C28 Medir los contenedores de texto en unidades em
- C29 Ofrecer un selector de estilos que muestre una versión accesible
- C30 Cambiar con CSS entre texto real e imágenes de texto mediante un control
- C31 Usar CSS Flexbox para que el contenido se recoloque al ampliar
- C32 Usar CSS Grid y media queries para reorganizar las columnas
- C33 Partir las URL y palabras muy largas para que no se salgan de la pantalla
- C34 Soltar las cabeceras y pies fijos cuando falta altura en la pantalla
- C35 Dejar sitio en textos cortos para que admitan más espaciado
- C36 No fijar la altura de los bloques de texto para que admitan más espaciado
- C37 Usar max-width y height en CSS para que las imágenes se adapten
- C38 Hacer que etiquetas y campos de formulario se apilen cuando falta espacio
- C39 Respetar la preferencia de movimiento reducido con CSS con ejemplo práctico
- C40 Crear un indicador de foco de dos colores que se vea sobre cualquier fondo con ejemplo práctico
- C41 Dibujar un indicador de foco bien visible dentro del propio componente
- C42 Usar min-height y min-width para separar los enlaces pequeños
- C43 Usar scroll-padding para que los avisos fijos no tapen el foco
- C44 Dar a enlaces y botones un tamaño mínimo de 44 × 44 píxeles con ejemplo práctico
- C45 Mostrar el foco del teclado con la pseudoclase :focus-visible con ejemplo práctico
ARIA 26
Técnicas de WAI-ARIA: nombres, funciones, estados, regiones activas y regiones (landmarks).
- ARIA1 Relacionar instrucciones y ayudas con su control mediante aria-describedby
- ARIA2 Marcar los campos obligatorios con aria-required
- ARIA4 Indicar con el atributo role qué tipo de componente es
- ARIA5 Comunicar el estado de un componente con atributos ARIA
- ARIA6 Dar nombre a un elemento con aria-label cuando no hay texto visible con ejemplo práctico
- ARIA7 Completar el texto de un enlace con aria-labelledby
- ARIA8 Explicar el destino de un enlace con aria-label
- ARIA9 Formar el nombre de un campo uniendo varios textos con aria-labelledby
- ARIA10 Usar un texto visible como alternativa de una imagen con aria-labelledby
- ARIA11 Marcar las zonas de la página con regiones ARIA (landmarks)
- ARIA12 Marcar encabezados con role="heading" y aria-level
- ARIA13 Dar nombre a las regiones de la página con aria-labelledby
- ARIA14 Dar nombre con aria-label a un control que no tiene texto visible
- ARIA15 Describir imágenes complejas con aria-describedby
- ARIA16 Dar nombre a los controles con aria-labelledby con ejemplo práctico
- ARIA17 Agrupar campos relacionados con role="group" o role="radiogroup"
- ARIA18 Avisar de errores con una ventana de alerta (role="alertdialog")
- ARIA19 Anunciar los errores de un formulario con role="alert" o aria-live con ejemplo práctico
- ARIA20 Marcar una zona importante de la página con role="region"
- ARIA21 Marcar los campos con errores con aria-invalid
- ARIA22 Anunciar mensajes de estado con role="status" con ejemplo práctico
- ARIA23 Anunciar las novedades de un chat o un historial con role="log"
- ARIA24 Marcar los iconos de fuente con role="img" para que no desaparezcan
- ARIA25 Anunciar el progreso de una subida de archivos con una región activa
- ARIA26 Marcar con aria-current el elemento actual de un menú o una lista de pasos
- ARIA27 Anunciar el avance de una barra de progreso con ariaNotify
Scripts de cliente 25
Técnicas para JavaScript en el navegador: eventos, foco, validación, contenido dinámico.
- SCR1 Permitir que la persona amplíe un tiempo límite controlado por JavaScript
- SCR2 Cambiar una imagen decorativa tanto con el ratón como con el teclado
- SCR14 Dejar que la persona active o desactive los avisos que no son urgentes
- SCR16 Avisar con un script de que el tiempo está a punto de acabarse
- SCR18 Validar los datos de un formulario en el navegador y explicar el error
- SCR19 Actualizar una lista desplegable según lo elegido en otra sin cambiar de página
- SCR20 Programar cada acción para que funcione con el ratón y con el teclado
- SCR21 Añadir contenido a la página con las funciones del DOM (técnica obsoleta) obsoleta
- SCR22 Detener con JavaScript el parpadeo en menos de cinco segundos
- SCR24 Abrir ventanas nuevas solo con un script que avise y que funcione sin él
- SCR26 Insertar el contenido nuevo justo después del control que lo abre
- SCR27 Reordenar bloques de la página con opciones de menú, no solo arrastrando
- SCR28 Permitir plegar los menús que se repiten en cada página
- SCR29 Hacer que los div o span con acciones funcionen con teclado
- SCR30 Ofrecer un control que complete el texto de los enlaces a petición
- SCR31 Resaltar con JavaScript el elemento que tiene el foco
- SCR32 Validar formularios con JavaScript y mostrar los errores en una lista
- SCR33 Ofrecer un botón para pausar el texto que se desplaza con JavaScript
- SCR34 Calcular con JavaScript tamaños y posiciones que se adapten al texto
- SCR35 Asociar las acciones de JavaScript a botones y enlaces con ejemplo práctico
- SCR36 Permitir ver completo y quieto el texto que se desplaza
- SCR37 Crear cuadros de diálogo propios que funcionen con teclado (obsoleta) obsoleta
- SCR38 Ofrecer la versión HTML básica de la página como alternativa accesible
- SCR39 Hacer legible y cerrable el contenido que aparece al pasar el ratón o enfocar
- SCR40 Quitar las animaciones de JavaScript si el usuario pide reducir el movimiento
Scripts de servidor 5
Técnicas para la lógica de servidor: versiones alternativas, preferencias, validación.
- SVR1 Hacer las redirecciones automáticas en el servidor, no en la página
- SVR2 Usar .htaccess para que la versión no accesible solo se abra desde la accesible
- SVR3 Usar la cabecera Referer para pasar siempre antes por la versión accesible
- SVR4 Permitir elegir la versión accesible del sitio y recordar esa preferencia
- SVR5 Indicar el idioma principal en la cabecera HTTP Content-Language
PDF 23
Técnicas para documentos PDF: etiquetado, orden de lectura, formularios, marcadores.
- PDF1 Poner texto alternativo a las imágenes de un PDF
- PDF2 Crear marcadores en los documentos PDF largos
- PDF3 Asegurar un orden de lectura y de tabulación lógico en los PDF
- PDF4 Marcar como artefacto las imágenes decorativas de un PDF
- PDF5 Indicar los campos obligatorios en los formularios PDF
- PDF6 Etiquetar las tablas de un PDF con filas, celdas y encabezados
- PDF7 Pasar por OCR los PDF escaneados para que tengan texto real
- PDF8 Dar el significado completo de las abreviaturas y siglas en un PDF
- PDF9 Marcar los títulos de un PDF con etiquetas de encabezado
- PDF10 Dar a cada campo de un formulario PDF un nombre que se pueda leer
- PDF11 Crear enlaces en un PDF que el teclado y el lector de pantalla reconozcan
- PDF12 Dar nombre, tipo y valor accesibles a los campos de un formulario PDF
- PDF13 Dar texto alternativo a un enlace de PDF cuyo texto no se entiende
- PDF14 Poner encabezados y pies de página continuos en un PDF
- PDF15 Enviar un formulario PDF solo con un botón de envío
- PDF16 Indicar el idioma principal de un documento PDF
- PDF17 Hacer que la numeración de páginas del visor coincida con la del PDF
- PDF18 Dar un título al PDF y mostrarlo en la barra de título
- PDF19 Indicar el idioma de los fragmentos en otro idioma dentro de un PDF
- PDF20 Reparar tablas mal etiquetadas en un PDF con el editor de tablas de Acrobat
- PDF21 Usar etiquetas de lista en los documentos PDF
- PDF22 Avisar cuando un dato de un formulario PDF no tiene el formato correcto
- PDF23 Crear campos de formulario interactivos y usables con teclado en un PDF
SMIL 8
Técnicas para SMIL: subtítulos, audiodescripción y multimedia sincronizado.
- SM1 Añadir audiodescripción ampliada a un vídeo con SMIL 1.0
- SM2 Pausar el vídeo con SMIL 2.0 para dar una audiodescripción ampliada
- SM6 Añadir audiodescripción a un vídeo con SMIL 1.0
- SM7 Añadir audiodescripción a un vídeo con SMIL 2.0
- SM11 Mostrar subtítulos sincronizados con SMIL 1.0
- SM12 Mostrar subtítulos sincronizados con SMIL 2.0
- SM13 Mostrar un intérprete de lengua de signos junto al vídeo con SMIL 1.0
- SM14 Mostrar un intérprete de lengua de signos junto al vídeo con SMIL 2.0
Texto plano 3
Técnicas para texto plano: estructura en documentos sin marcado.
Ninguna técnica coincide con la búsqueda. Pruebe con el código (p. ej. G94) o con una palabra del título.