Cómo estructurar una página de enlaces usable y accesible

Una página de enlaces se visita casi siempre desde un teléfono, a menudo con una sola mano, con poca batería o con una conexión irregular. Entre tus visitantes también hay personas con baja visión, daltonismo o que navegan con un lector de pantalla. Diseñar para esas condiciones no es un extra: es lo que hace que la página funcione para la mayoría.

Un orden de lectura predecible

La estructura más clara sigue siempre el mismo orden: identidad (foto, nombre, biografía), acción principal, el resto de enlaces y, al final, la información secundaria. Ese orden coincide con lo que el visitante necesita saber: quién eres, qué le propones y qué más tienes. Si intercalas imágenes grandes o videos antes del enlace principal, empujas lo importante fuera de la primera pantalla.

Contraste y legibilidad

El contraste entre el texto y el fondo es el factor de legibilidad que más se descuida. Las pautas de accesibilidad web del W3C (WCAG) recomiendan una relación mínima de 4,5:1 para texto normal y de 3:1 para texto grande. No necesitas calcularla a mano: cualquier verificador de contraste en línea te dice si un par de colores cumple. Algunas reglas prácticas:

• Si usas una imagen de fondo, comprueba que el texto se lea sobre sus zonas más claras y más oscuras, no solo en el centro.
• Evita el texto gris claro sobre fondo blanco o gris oscuro sobre negro.
• No transmitas información solo con el color (por ejemplo, “los enlaces rojos son urgentes”): una parte de tus visitantes no distingue ciertos colores.

En ADXLY, la sección Mi página → Diseño muestra una vista previa en tiempo real mientras cambias colores, fondos y tipografías. Revisa esa vista previa con el brillo del teléfono al mínimo: si se lee así, se leerá en casi cualquier situación.

Botones que se pueden tocar sin errores

Los dedos no son punteros de precisión. WCAG 2.2 establece un tamaño mínimo de 24 × 24 píxeles CSS para los objetivos táctiles, y las guías de diseño de los sistemas móviles recomiendan áreas todavía mayores, en torno a 44–48 píxeles. Además del tamaño, importa la separación: dos enlaces pegados provocan toques equivocados. Las plantillas de botones de una página de enlaces suelen respetar esto por defecto; el riesgo aparece al añadir iconos pequeños o filas de botones muy juntos.

Imágenes con sentido para todos

Los lectores de pantalla anuncian las imágenes por su texto alternativo. Si una imagen transmite información (un cartel con la fecha de un evento, por ejemplo), esa información debe estar también en texto, ya sea en el título del bloque o en un párrafo cercano. Si la imagen es puramente decorativa, no hace falta describirla. Nunca pongas información esencial solo dentro de una imagen: además de excluir a quien no la ve, no se puede copiar ni buscar.

Rendimiento: cada segundo cuenta

Una página lenta pierde visitantes antes de que vean nada. Las causas habituales en una página de enlaces son imágenes demasiado pesadas, videos de fondo y muchos contenidos incrustados de terceros (reproductores, mapas). Algunas recomendaciones:

• Sube las imágenes al tamaño en que se van a mostrar; una foto de 4000 píxeles de ancho no se ve mejor en una pantalla de 400.
• Usa un video de fondo solo si aporta algo; una imagen bien elegida suele bastar.
• Limita los contenidos incrustados a los que realmente vayan a usarse.

ADXLY sirve las imágenes de las páginas públicas a través de un optimizador que genera versiones del tamaño adecuado para cada pantalla, pero una imagen de origen razonable sigue siendo el mejor punto de partida.

Animaciones con moderación

Las animaciones pueden dar personalidad, pero en exceso distraen y, en algunas personas, provocan mareo. Los sistemas operativos incluyen una preferencia de “reducir movimiento” que las páginas bien construidas respetan. Elige efectos suaves, evita que los botones se muevan solos de forma continua y nunca uses parpadeos rápidos.

Cómo verificar tu página en diez minutos

1. 1

   Ábrela en tu teléfono con datos móviles

   Cronometra cuánto tarda en verse el enlace principal.

2. 2

   Baja el brillo al mínimo

   Comprueba que todo el texto sigue siendo legible.

3. 3

   Amplía el texto del sistema

   Activa un tamaño de letra grande en tu teléfono y revisa que nada se corte ni se superponga.

4. 4

   Activa el lector de pantalla

   VoiceOver en iPhone o TalkBack en Android: recorre la página y escucha si los enlaces se entienden.

5. 5

   Toca cada enlace con el pulgar

   Sin ampliar la pantalla y sin errores.

Una página usable no es la más vistosa, sino la que cualquier persona puede entender y usar sin esfuerzo. Para la parte de contenido y orden, consulta cómo organizar los enlaces de un creador.