Revisión visual: columnas, textos y fotos en todas las pantallas
Una página sin desbordamiento puede seguir siendo difícil de leer. Revise proporciones, contenido extenso e interacciones antes de publicar cambios.
Seis comprobaciones reproducibles
Seleccionar páginas representativas
Pruebe inicio, categoría, artículo, servicio, formulario y tabla. Incluya un título largo, un idioma de derecha a izquierda y varias fotos.
Comparar columnas
Revise anchos de 320, 390, 768, 1280, 1440 y 1920 px. Compruebe alineación, orden de lectura y espacios. No oculte defectos mediante desbordamiento oculto.
Ampliar el texto
Pruebe el texto al 200 % y la redistribución a 320 píxeles CSS. Mantenga accesibles información y controles; las tablas pueden tener desplazamiento propio.
Revisar fotografías
Compruebe recorte, tema, dimensiones y crédito. No estire una foto según el texto vecino. Describa lo visible e identifique las fotos de archivo.
Probar interacciones
Use el teclado en menús, filtros, preguntas y formularios. Revise foco visible, errores y conservación de datos sin enviar una consulta real.
Guardar evidencias
Registre URL, idioma, ancho, navegador, defecto y resultado de la corrección. Complete las mediciones de laboratorio con datos reales cuando haya tráfico suficiente.
Registro de revisión
- URL e idioma
- Pantalla y zoom
- Defecto y captura
- Corrección y resultado de la nueva prueba
Método de trabajo, no certificado de conformidad. Adapte el alcance y documente las excepciones.
Antes de publicar: seis comprobaciones funcionales
- Recorrer menús, enlaces, descargas y cambios de idioma; comprobar el destino real.
- Usar datos ficticios: campos vacíos, direcciones inválidas, acentos y textos largos.
- Verificar que los errores identifican el campo, funcionan con teclado y conservan los datos útiles.
- Probar también la validación del servidor: las comprobaciones del navegador pueden eludirse.
- Distinguir confirmación y entrega efectiva; usar un destino de prueba autorizado.
- Comprobar estados sin JavaScript, rechazos y recuperación; excluir secretos de las pruebas.
Situaciones y controles adecuados
En pantallas pequeñas, desplace la tabla horizontalmente. Con el teclado, enfoque la tabla y use las flechas.
| Situación | Qué indica | Comprobación útil |
|---|---|---|
| Un control desaparece con el texto al 200 %. | La tarea deja de ser accesible al ampliar. | Adapte el diseño y pruebe de nuevo con teclado. |
| Una foto se deforma o deja un gran hueco en escritorio. | Sus proporciones desequilibran el contenido cercano. | Revise límites de tamaño y orden de lectura. |
| Una tabla queda cortada por overflow: hidden. | Se ocultan datos. | Dé a la tabla desplazamiento propio accesible por teclado y celdas con ajuste de texto. |
| Un título traducido se corta en otra lengua. | Probar un solo idioma es insuficiente. | Pruebe textos largos, idiomas RTL y el cambio real de idioma. |
Ejemplo ficticio
Una página ficticia de servicio parece correcta a 1.440 píxeles. A 320, su título traducido largo queda cortado; con texto al 200 %, un control de FAQ resulta inaccesible.
Limite la foto, permita reducir columnas y ajustar texto. Repita el recorrido a 320, 390, 768 y 1.440 píxeles, con ampliación de texto y teclado. Registre defectos restantes y compruebe las correcciones.
Criterios de validación
- Información y controles son legibles en anchuras e idiomas representativos.
- La ampliación de texto y el teclado permiten completar la tarea.
- Se registran versión, navegador, idioma y resultados de la nueva prueba.
Preguntas prácticas
¿Basta una captura?
No. Comprueba un estado. Pruebe también contenido largo, teclado y estados abiertos, filtrados o con errores.
¿Hay un tamaño de letra universal?
No. Evalúe legibilidad, longitud de línea, zoom y contraste. El tamaño por sí solo no garantiza accesibilidad ni equilibrio.
¿Cómo interpretar los Core Web Vitals?
Los umbrales de buena experiencia son LCP ≤ 2,5 s, INP ≤ 200 ms y CLS ≤ 0,1 en el percentil 75. Miden carga, interacción y estabilidad, sin sustituir la revisión visual.
¿Hace falta una captura para cada dispositivo posible?
Seleccione familias principales de páginas, tareas útiles y navegadores con diferencias observadas. Documente los límites: unas capturas no prueban todos los dispositivos.
¿Cómo priorizar las correcciones visuales?
Resuelva primero tareas bloqueadas, datos ocultos y legibilidad. Después ajuste proporciones, alineación y espaciado, comprobando el funcionamiento de otras páginas.