Medir Usabilidad Web

Menú

RECURSOS PARA PASAR A LA ACCIÓN

Checklist de usabilidad web

Comprueba qué dificulta usar tu web y descarga tus próximas mejoras en PDF. Paso a paso, sin registro.

Abre tu web en otra pestaña. Prueba cada punto y marca lo que observes; puedes dejar lo que no sepas para después.

Revisa tu formulario en 6 comprobaciones.

Añadir datos al informe (opcional)

Por ejemplo: Mi web, versión del 14 de octubre.

Por ejemplo: elegir un curso de tarde y solicitar una plaza.

Por ejemplo: Android, Chrome, visitante nuevo.

Tus respuestas quedarán pendientes hasta que compruebes cada punto.

Se entiende qué se puede hacerPendiente
Se entiende qué se puede hacer

PRUÉBALO EN TU WEB

Abre la portada. Pide a alguien que no conozca tu web que diga qué ofrece y qué haría después, sin explicárselo.

Cuesta entenderlo
Bienvenido a tu próximo nivel
Más claro
Aprende fotografía · Consulta los cursos
Cómo reconocer el problema

La persona interpreta que es una tienda, pero la página permite inscribirse en un curso. Anota sus palabras; tu familiaridad no sustituye esa observación.

Qué observar: ¿La persona describe el propósito y localiza una acción que encaja con la tarea?

Puedes anotar dónde ocurre y qué has observado. No incluyas datos personales.

Consultar la guía de este punto →

Se encuentra la información necesariaPendiente
Se encuentra la información necesaria

PRUÉBALO EN TU WEB

Busca desde la portada un dato importante: precio, horario o condiciones. Comprueba si lo encuentras antes de tener que decidir.

Cuesta entenderlo
Inicio / Vive / Más
Más claro
Cursos / Fotografía / Horarios y condiciones
Cómo reconocer el problema

Las condiciones de una reserva solo aparecen después de introducir los datos. El visitante necesita decidir antes.

Qué observar: ¿El dato se encuentra antes de tener que tomar la decisión que depende de él?

Puedes anotar dónde ocurre y qué has observado. No incluyas datos personales.

Consultar la guía de este punto →

Los enlaces anticipan el destinoPendiente
Los enlaces anticipan el destino

PRUÉBALO EN TU WEB

Antes de pulsar un enlace, piensa adónde te llevará. Ábrelo y comprueba si coincide con lo que esperabas.

Cuesta entenderlo
Ver más →
Más claro
Consultar horarios del curso →
Cómo reconocer el problema

Dos enlaces «Ver más» dentro de la misma tarjeta llevan a precio y matrícula sin distinguirlos.

Qué observar: ¿Puedes anticipar el destino y distinguirlo de los enlaces vecinos?

Puedes anotar dónde ocurre y qué has observado. No incluyas datos personales.

Consultar la guía de este punto →

La tarea se completa con tecladoPendiente
La tarea se completa con teclado

PRUÉBALO EN TU WEB

Deja el ratón. Recorre la tarea con Tab y Mayús+Tab. Usa Enter para enlaces y Enter o Espacio para botones.

Cuesta entenderlo
Horario: un texto que solo reacciona al clic
Más claro
Horario: un control al que llegas con Tab
Cómo reconocer el problema

El selector de horario solo responde al ratón. No puedes elegirlo con teclado y la reserva queda bloqueada.

Qué observar: ¿Completas la misma tarea, incluidos los errores y el regreso, sin usar el ratón?

Puedes anotar dónde ocurre y qué has observado. No incluyas datos personales.

Comprobación técnica (opcional)

Prueba también menús y ventanas: apertura, cierre con Escape y regreso al control de origen. Comprueba que puedes completar la tarea sin quedar atrapado en un elemento.

Ver la explicación y los criterios

Consultar la guía de este punto →

El foco se ve y no queda ocultoPendiente
El foco se ve y no queda oculto

PRUÉBALO EN TU WEB

Pulsa Tab despacio. Comprueba que puedes ver qué enlace, botón o campo está seleccionado y que nada lo tapa.

Cuesta entenderlo
Continuar
Más claro
⌁ Continuar · foco visible
Cómo reconocer el problema

El foco entra en un botón, pero no hay ninguna señal visible o la cabecera lo tapa.

Qué observar: ¿Sabes siempre dónde actuarás al pulsar Enter, sin adivinar ni desplazar a ciegas?

Puedes anotar dónde ocurre y qué has observado. No incluyas datos personales.

Comprobación técnica (opcional)

Repite la prueba con menús, ventanas y avisos abiertos. Comprueba que el foco sigue siendo visible y no queda tapado por cabeceras o capas superpuestas.

Ver la explicación y los criterios

Consultar la guía de este punto →

Los campos tienen etiquetas e instruccionesPendiente
Los campos tienen etiquetas e instrucciones

PRUÉBALO EN TU WEB

Escribe en los campos. Comprueba que sigue viéndose qué dato pide cada uno y que las instrucciones se entienden.

Cuesta entenderlo
ana@ejemplo.com
Más claro
Correo electrónico ana@ejemplo.com
Cómo reconocer el problema

La palabra «Correo» desaparece al escribir porque solo era un texto de ejemplo dentro del campo.

Qué observar: ¿Cada campo conserva una etiqueta visible y asociada mientras escribes y corriges?

Puedes anotar dónde ocurre y qué has observado. No incluyas datos personales.

Comprobación técnica (opcional)

Pulsa la etiqueta y comprueba si activa su campo. Después, consulta el nombre accesible en las herramientas de accesibilidad del navegador. Una etiqueta que se ve no garantiza por sí sola la asociación técnica. Si no sabes comprobarlo, deja esta parte para quien mantiene tu web.

Ver la explicación y los criterios

Consultar la guía de este punto →

Los errores permiten continuarPendiente
Los errores permiten continuar

PRUÉBALO EN TU WEB

En un formulario de prueba, escribe un correo incompleto. Comprueba si te explica cómo corregirlo y conserva los demás datos. Evita envíos o pagos reales.

Cuesta entenderlo
Hay errores
Más claro
Correo incompleto. Usa nombre@ejemplo.com.
Cómo reconocer el problema

Aparece «Hay errores», no se identifica el campo y desaparecen las respuestas correctas.

Qué observar: ¿Sabes qué corregir y consigues hacerlo conservando las demás respuestas?

Puedes anotar dónde ocurre y qué has observado. No incluyas datos personales.

Consultar la guía de este punto →

Se entiende el resultado de la acciónPendiente
Se entiende el resultado de la acción

PRUÉBALO EN TU WEB

Al terminar una tarea de prueba, comprueba si la web confirma qué ha ocurrido y explica qué puedes hacer después.

Cuesta entenderlo
Hecho
Más claro
Solicitud recibida · Referencia DEMO-104 Revisa el resumen de tu solicitud.
Cómo reconocer el problema

El botón vuelve a su estado inicial sin mensaje. La persona no sabe si se ha enviado y repite la acción.

Qué observar: ¿Se distingue entre en curso, realizado y fallido sin tener que repetir el envío?

Puedes anotar dónde ocurre y qué has observado. No incluyas datos personales.

Consultar la guía de este punto →

La tarea funciona en un teléfonoPendiente
La tarea funciona en un teléfono

PRUÉBALO EN TU WEB

Completa la tarea desde un teléfono. Comprueba que puedes usar el menú, rellenar los campos y llegar al botón final, también con el teclado abierto.

Cuesta entenderlo
Campo abierto [acción fuera del área visible]
Más claro
Campo abierto Desplázate hasta «Continuar»
Cómo reconocer el problema

El teclado tapa la acción y la página no permite desplazarse hasta ella.

Qué observar: ¿La tarea se completa en el dispositivo afectado, también con el teclado abierto?

Puedes anotar dónde ocurre y qué has observado. No incluyas datos personales.

Consultar la guía de este punto →

Al ampliar no desaparece informaciónPendiente
Al ampliar no desaparece información

PRUÉBALO EN TU WEB

Amplía la página en el navegador. Comprueba que puedes seguir leyendo y utilizando los botones sin que desaparezca contenido.

Cuesta entenderlo
Instrucciones que se cor…
Más claro
Instrucciones que se redistribuyen y continúan en otra línea.
Cómo reconocer el problema

Un recuadro con altura fija corta las instrucciones al ampliar y no permite leer el final.

Qué observar: ¿Se conserva la información y la funcionalidad al ampliar? Esta prueba no cubre todos los criterios de accesibilidad.

Puedes anotar dónde ocurre y qué has observado. No incluyas datos personales.

Comprobación técnica (opcional)

En escritorio, repite con zoom al 200 % y al 400 %. Anota el ancho de ventana y comprueba la redistribución del contenido. Algunas tablas necesitan dos dimensiones. Consulta en la guía los criterios y sus excepciones.

Ver la explicación y los criterios

Consultar la guía de este punto →

Texto y controles se distinguenPendiente
Texto y controles se distinguen

PRUÉBALO EN TU WEB

Busca textos difíciles de leer y avisos que solo cambian de color. Un error debe explicarse también con palabras o una señal clara.

Cuesta entenderlo
●
Más claro
! Correo incompleto · Revisa el formato
Cómo reconocer el problema

Un campo cambia a rojo, pero no añade ninguna explicación. El color es la única pista.

Qué observar: ¿Has medido las combinaciones relevantes y acompañado los estados con una señal comprensible además del color?

Puedes anotar dónde ocurre y qué has observado. No incluyas datos personales.

Comprobación técnica (opcional)

Para comprobar el contraste, mide cada combinación con una herramienta y aplica el criterio correspondiente a texto o controles. La impresión visual no basta. Revisa también los estados de error, selección y foco.

Ver la explicación y los criterios

Consultar la guía de este punto →

Se puede volver y recuperar la tareaPendiente
Se puede volver y recuperar la tarea

PRUÉBALO EN TU WEB

Vuelve a un paso anterior o prueba una búsqueda sin resultados. Comprueba si puedes continuar sin perder lo que habías hecho.

Cuesta entenderlo
0 resultados
Más claro
0 resultados para «noche» Quitar filtro y ver todos
Cómo reconocer el problema

Una búsqueda vacía deja la página en blanco. Al volver, se pierden los filtros y los datos introducidos.

Qué observar: ¿Puedes recuperarte del desvío y continuar con el contexto necesario?

Puedes anotar dónde ocurre y qué has observado. No incluyas datos personales.

Consultar la guía de este punto →

Guardar, recuperar o empezar otra revisión

Puedes continuar otro día si guardas las respuestas aquí o descargas una copia editable.

Para profundizar

Consultar cómo interpretar la revisión y sus límites

Cómo usar esta revisión

Define una tarea y el entorno antes de empezar. Abre la web en otra pestaña o dispositivo y comprueba un punto cada vez. Anota página, estado, pasos y resultado. Utiliza datos ficticios y evita realizar pagos o envíos reales durante las pruebas.

Qué significa cada resultado

Pendiente: todavía no lo has probado. Sin incidencia observada: no has encontrado un problema en el alcance probado. Con incidencia: has observado una dificultad que debes documentar. No aplicable: este punto no interviene en tu tarea; explica el motivo.

Cómo se propone la prioridad

Una tarea bloqueada recibe prioridad alta; una dificultad que permite continuar, media; un detalle menor, baja. Si no indicas la consecuencia, queda por confirmar. Son categorías de trabajo: revisa alcance, evidencia, importancia de la tarea y dependencias antes de planificar.

Una barrera puede ser grave aunque afecte a pocas personas. El esfuerzo de desarrollo no reduce la consecuencia. Registra una medida provisional si necesitas resolver un bloqueo mientras preparas el cambio completo.

Qué hacer después

Guarda la revisión editable para retomarla, descarga el informe y desarrolla las incidencias que necesiten más detalle en la ficha de hallazgo. Después del cambio, repite los mismos pasos y la tarea completa. Conserva la versión, la evidencia nueva y lo pendiente.

Alcance y fuentes

Estas doce comprobaciones son un inicio de revisión manual, no una auditoría completa ni una puntuación WCAG. Quedan fuera, entre otros, recorridos que no hayas probado, combinaciones de tecnologías de apoyo, contenidos audiovisuales y requisitos específicos del sitio. Amplía la evaluación según el proyecto.

W3C WAI: comprobaciones iniciales de accesibilidad · Guía de fundamentos y sus fuentes · Cómo observar tareas con personas.