¿Pueden los clientes usar tu sitio web cuando amplían el texto?

Por Noe Guerrero III

Imagina un taller de reparación en McAllen con una página de servicio que se ve bien en un teléfono. Un cliente amplía la página en una laptop para leer los detalles del servicio. El encabezado ocupa un tercio de la pantalla, el botón del chat tapa el enlace para cotizar y el cliente tiene que desplazarse de lado para leer una línea de texto. La página sigue cargando. Conseguir una cotización es otra historia.

Elige algo que un cliente necesite hacer y hazlo tú mismo con texto más grande y después en una ventana de navegador estrecha. Abre el menú, lee los detalles del servicio y llega al siguiente paso. Si necesitas reducir el zoom para terminar, anota dónde ocurrió. Así tendrás un problema específico que comunicarle a tu diseñador o desarrollador.

Revisa por separado el tamaño del texto y la distribución

Empieza en un navegador de escritorio con el zoom al 100%. Registra la URL de la página, el navegador y el ancho inicial del área de visualización. Después usa el control de zoom del navegador para aumentar el tamaño por pasos hasta llegar al 200%. Observa las etiquetas y las instrucciones, además de los párrafos. Un botón puede verse bien al 150% y perder la mitad de su etiqueta en el siguiente paso. Si la página cambia su distribución al aumentar el zoom, comprueba que el texto realmente crezca. El porcentaje de zoom describe el ajuste del navegador, y la página puede cambiar sus propios tamaños de letra al mismo tiempo.

El criterio de las Pautas de Accesibilidad para el Contenido Web (WCAG) sobre el cambio de tamaño del texto pide que este pueda ampliarse hasta el 200% sin perder contenido ni funcionalidad, con excepciones para subtítulos e imágenes de texto. Una función de ampliación compatible del navegador puede proporcionar ese aumento. Guía de W3C sobre el cambio de tamaño del texto

Después revisa cómo se redistribuye el contenido en un espacio estrecho. Para una página que se recorre hacia abajo, usa un área de visualización de 320 píxeles CSS de ancho. Empieza con un área de 1,280 píxeles CSS al 100% de zoom para llegar a ese ancho al 400%. También puedes configurar un área de 320 píxeles CSS en las herramientas de diseño adaptable para comprobar el ancho. Usa como referencia el ancho del área donde se muestra la página. La resolución anunciada de la pantalla de una laptop mide algo diferente. Guía de W3C sobre la redistribución del contenido

Con ese ancho, lee un párrafo sin desplazarte de lado. Un mapa o una tabla de datos que necesita dos dimensiones puede tener su propia área de desplazamiento. Las indicaciones y los datos de contacto alrededor deberían seguir cabiendo en la página.

Sigue el mismo recorrido del cliente

Usa la página de servicio a la que realmente llegan los clientes. En el ejemplo del taller, podría ser una página sobre reparación de pantallas de laptops. Busca la sección que dice qué puede reparar el taller y después intenta solicitar una cotización. Abre el menú al menos una vez y revísalo mientras está desplegado. Si el sitio tiene versiones en inglés y español, repite los pasos en ambas. Una etiqueta que cabe en una línea en inglés puede ocupar dos en español.

• Lee los detalles del servicio. Revisa el encabezado, el texto que aparece debajo y cualquier enlace dentro del párrafo. Si el texto se recorta, comprueba si puedes mostrar el resto con los controles que ofrece el sitio.

• Usa el menú abierto. Desplázate dentro de él si hace falta, elige un destino y regresa. Comprueba que puedas cerrarlo y acceder a la página que está debajo.

• Llega al botón para cotizar. Busca un encabezado que se quede fijo, una burbuja de chat o un banner que tape el botón al desplazarte. Pruébalo también con el teclado. Deberías poder ver a qué elemento llega el foco y activar ese control.

• Revisa la siguiente pantalla. En un formulario de prueba, provoca el error de un campo obligatorio vacío y lee el mensaje con el mismo zoom. Si tienes un entorno de prueba, completa la tarea hasta la pantalla de confirmación. Un cliente puede recorrer una página de servicio legible y aun así quedarse atorado en el formulario. Revisa un formulario de cotización en un teléfono

Dale al desarrollador un resultado que pueda reproducir

“Falla con texto grande” deja mucho a la imaginación. Para el taller ficticio, una nota útil diría “Página de reparación de pantallas de laptops, español, zoom del navegador al 200%. Desde la página de inicio, abre el menú y selecciona Reparación de laptops. En la página de servicio, la burbuja de chat tapa parcialmente el botón para cotizar. El resultado esperado es un botón completamente visible al que se pueda llegar y que se pueda activar”. Incluye una captura que muestre los elementos superpuestos y el ancho del navegador que usaste.

Si un encabezado o una etiqueta se recortan, revisa si su contenedor puede crecer y si se permite que el texto pase a otra línea. Una tarjeta cuya altura se fijó para alinear una fila de etiquetas cortas puede quedarse sin espacio cuando esas etiquetas crecen. Si el problema es un banner fijo, considera permitir que se desplace con la página cuando el ancho sea reducido. Recortar el texto puede ocultar un síntoma, así que comprueba que la etiqueta completa siga disponible antes de dar la corrección por terminada. Ejemplos de W3C sobre texto recortado u oculto

Después de una corrección, repite los mismos pasos con el zoom y el ancho registrados. Regresa al 100% y revisa el recorrido una vez más. Si cambiaste un componente compartido, como un encabezado o una tarjeta, prueba una segunda página donde aparezca. Limita el resultado a lo que revisaste, incluida la página, el idioma y la tarea. Usa la misma comprobación en otra página importante la próxima vez que cambies su distribución.