Comprueba la accesibilidad de tu web en 7 pasos

Situación a 13 de octubre de 2026. Hemos hecho las capturas en Chrome sobre la versión en inglés de nuestra web, por eso los textos que aparecen en ellas están en inglés. El contraste lo hemos medido con el Contrast Checker de WebAIM. Los requisitos de este texto se refieren a WCAG 2.2, nivel AA: la versión actual de las pautas del W3C y la referencia habitual para las webs de empresa.

La mayoría de los problemas de accesibilidad no se notan mientras usas tu web como siempre. Aparecen en cuanto apartas el ratón, amplías la pantalla o pasas tus colores por un comprobador de contraste. Elige las tres páginas más importantes para tu negocio. Suelen ser la página de inicio, la de tu servicio o producto principal y aquella en la que tus clientes reservan, pagan o te escriben. Después, sigue los pasos de abajo.

Qué necesitas

• un ordenador portátil o de sobremesa con teclado;
• un navegador actualizado (Chrome, Edge, Firefox o Safari);
• el Contrast Checker de WebAIM, en webaim.org/resources/contrastchecker;
• un sitio donde apuntar lo que encuentres.

Paso 1: aparta el ratón y pulsa Tab

Haz clic en la barra de direcciones y pulsa la tecla Tab (el tabulador). Cada pulsación lleva el foco del teclado al siguiente enlace, botón o campo. Con Mayús + Tab vuelves atrás.

En una web bien hecha, la primera pulsación muestra un enlace como «Saltar al contenido». Con él, quien navega con teclado o con lector de pantalla se salta el menú que se repite en cada página. WCAG exige una forma de saltar esos bloques repetidos (criterio de conformidad 2.4.1, nivel A). En la versión inglesa de nuestra web, el enlace se llama «Skip to content».

Otwórz w pełnym rozmiarze

Paso 2: ¿ves siempre dónde estás?

Sigue pulsando Tab. Cada enlace y cada botón tiene que recibir un borde, un subrayado o un cambio de color que se vea bien. Es el foco visible (2.4.7, AA).

Otwórz w pełnym rozmiarze

Mientras avanzas, fíjate en tres cosas:

• El borde no desaparece nunca. Si pierdes la pista de dónde estás, la página no supera la prueba.
• El orden tiene sentido. El foco sigue el orden de lectura: de arriba abajo y de izquierda a derecha.
• Nada lo tapa. Una cabecera fija, un banner de cookies o la burbuja de un chat no pueden ocultar por completo el elemento que tiene el foco. Este criterio es nuevo en WCAG 2.2 (2.4.11, AA).

Paso 3: usa menús y botones solo con el teclado

Todo lo que haces con el ratón tiene que funcionar también con el teclado (2.1.1, nivel A). Prueba:

• menús desplegables: Intro o la barra espaciadora los abren, Esc los cierra;
• botones y enlaces: Intro hace lo mismo que un clic;
• selectores de fecha, controles deslizantes y listas de selección: las flechas cambian el valor;
• ventanas emergentes y cuadros de diálogo: se cierran con Esc o con un botón de cierre al que llegas con el teclado.

Otwórz w pełnym rozmiarze

Lo peor que puedes encontrar es una trampa de teclado: entras con Tab en un componente, a menudo un calendario de reservas integrado o un chat, y ya no puedes salir. WCAG lo prohíbe expresamente (2.1.2, nivel A). Para quien no puede usar el ratón, la reserva se acaba ahí.

Paso 4: amplía al 200 %

Pulsa Ctrl y + (en Mac, Cmd y +) hasta que el navegador indique 200 %. El texto tiene que poder ampliarse al 200 % sin que se pierda contenido ni funciones (1.4.4, AA).

Otwórz w pełnym rozmiarze

Comprueba que:

• el texto pasa a la línea siguiente en lugar de salirse por el borde derecho;
• nunca tienes que desplazarte en horizontal para leer una frase;
• el menú se sigue abriendo;
• los botones y los campos no se montan unos sobre otros.

Para una prueba más exigente, amplía al 400 %. El criterio 1.4.10 («Reflow», AA) pide que el contenido funcione sin tener que desplazarse en dos direcciones con un ancho de 320 píxeles CSS. Según el W3C, eso equivale a una ventana de 1280 píxeles CSS de ancho al 400 % de zoom, más o menos la pantalla de un portátil normal.

Paso 5: comprueba que cada campo tiene su etiqueta

Entra con Tab en tu formulario de contacto, de reserva o de pago. Cada campo necesita una etiqueta visible, como «Nombre», «Correo electrónico» o «Mensaje» (3.3.2, nivel A).

Otwórz w pełnym rozmiarze

El texto gris de ejemplo dentro del campo no es una etiqueta. Desaparece en cuanto alguien empieza a escribir, y los lectores de pantalla no siempre lo leen. Una prueba rápida: haz clic en el texto de la etiqueta. Si el cursor salta al campo, la etiqueta está bien vinculada.

Paso 6: mide el contraste de color

WCAG fija estos mínimos en el nivel AA:

Elemento	Contraste mínimo
texto normal	4,5:1
texto grande (desde 18 puntos, o 14 puntos en negrita)	3:1
bordes de campos, iconos, estados de botones	3:1

Los colores los encuentras en tu manual de marca o con el selector de color de las herramientas para desarrolladores del navegador (F12). En el Contrast Checker de WebAIM, escribe el color del texto en «Foreground» y el del fondo en «Background».

Otwórz w pełnym rozmiarze

El texto de nuestra web llega a 16,77:1, muy por encima del mínimo. El gris claro es un fallo habitual. Así queda #9A9A9A sobre blanco:

Otwórz w pełnym rozmiarze

Con 2,81:1, este gris no llega ni al umbral del texto grande. Ojo con el gris claro en la letra pequeña, en los pies de foto, en el texto de ejemplo de los formularios y en el texto sobre fotos.

Paso 7: revisa las descripciones de las imágenes y los textos de los enlaces

Las imágenes que aportan información necesitan una alternativa textual que el lector de pantalla pueda leer en voz alta (1.1.1, nivel A). Las imágenes puramente decorativas deben llevar una descripción vacía, para que los lectores de pantalla se las salten.

Para revisar una imagen, haz clic derecho sobre ella, elige Inspeccionar (así se llama en Chrome) y busca alt="…" en el código resaltado. Después pregúntate si la descripción cumple la misma función que la imagen:

• «imagen» o «IMG_2041.jpg» no dice nada;
• «Logo» en un logo que lleva a la página de inicio queda mejor como «[Nombre de tu empresa], página de inicio»;
• «Habitación doble con balcón y vistas al mar», en la galería de un hostal, sí es útil;
• si falta el atributo alt, es un error, y el lector de pantalla puede leer el nombre del archivo en su lugar.

En páginas con muchas imágenes te ayuda WAVE, de WebAIM (wave.webaim.org). La herramienta marca como error las imágenes sin texto alternativo. Si una descripción tiene sentido, WAVE no lo puede juzgar: eso te toca a ti.

Aprovecha para leer por separado los textos de los enlaces y botones. Quien usa lector de pantalla suele recorrer una lista con todos los enlaces de la página, y cinco enlaces que dicen «Leer más» no le dicen nada. WCAG pide que el propósito de un enlace se entienda por su texto o por su contexto (2.4.4, nivel A). Los botones que solo tienen un icono, como una lupa o un carrito, también necesitan un nombre accesible.

Apunta lo que encuentres

Basta con una tabla sencilla:

Página	Paso	Problema	Consecuencia
Pago	2. Foco	el botón «Pagar» no tiene borde visible	quien usa el teclado no puede pagar
Contacto	5. Etiquetas	el campo del teléfono solo tiene texto de ejemplo	el formulario cuesta más de rellenar
Inicio	6. Contraste	pie de foto gris con 2,8:1	se lee mal

Corrige primero lo que bloquea una compra, una reserva o una consulta: trampas de teclado, etiquetas que faltan y foco invisible.

Esta revisión deja fuera muchas cosas, como las pruebas con lector de pantalla, los subtítulos, los mensajes de error y los límites de tiempo. Si quieres ir un paso más allá, activa VoiceOver en un Mac (Cmd + F5) o el lector de pantalla que trae Windows, Narrador (tecla de Windows + Ctrl + Intro), e intenta enviar tu formulario de contacto.

La ley, en pocas palabras

Desde el 28 de junio de 2025, la Ley 11/2023, de 8 de mayo, exige que los servicios de comercio electrónico dirigidos a consumidores cumplan requisitos de accesibilidad. La ley transpone la Directiva (UE) 2019/882. Son servicios de comercio electrónico las webs y apps en las que un consumidor celebra un contrato a distancia, por ejemplo cuando compra en una tienda online o reserva y paga una habitación.

Las microempresas que prestan servicios están exentas de estos requisitos. Es microempresa la que emplea a menos de 10 personas y cuyo volumen de negocios anual o balance anual total no supera los 2 millones de euros. Si tu servicio está incluido, tus condiciones generales, o un documento equivalente, deben recoger la información sobre cómo el servicio cumple los requisitos de accesibilidad (artículo 13 de la Ley 11/2023). No hay una autoridad única: cada comunidad autónoma, y también Ceuta y Melilla, designa sus autoridades de vigilancia.

Para las webs, la ley pide como mínimo el nivel medio de los criterios de accesibilidad generalmente reconocidos y toma como referencia la norma UNE 139803 (disposición adicional tercera). La norma europea EN 301 549 se basa en WCAG 2.1, y WCAG 2.2 amplía la 2.1 con criterios nuevos, como el 2.4.11 del paso 2. Qué supone la ley para una tienda online lo explicamos en accesibilidad de tu tienda online. Si la ley se aplica a tu empresa, y cómo, lo valoras con tu asesoría jurídica. Esta guía es una orientación técnica, no asesoramiento jurídico.

Cómo te podemos ayudar

En nuestra auditoría de accesibilidad recorremos los procesos clave de tus clientes con teclado, lector de pantalla, zoom y modo de alto contraste. Recibes un informe con prioridades según WCAG. Corregimos lo que frena a tus clientes y volvemos a probar. Te damos los datos técnicos para tu información sobre cómo el servicio cumple los requisitos de accesibilidad; no es asesoramiento jurídico. Trabajamos en remoto con empresas en España.

Recibes un presupuesto gratis en las 24 horas siguientes a tu solicitud, también en fin de semana y festivos. Precio cerrado según presupuesto: el importe del presupuesto no sube mientras no cambies el alcance.

Hablamos polaco, inglés, ucraniano y ruso. En español respondemos por escrito. Las llamadas y reuniones, en inglés o en polaco.