L27 · Construcción y vista previa · 5 min
Adaptable y accesible desde el principio
En una frase
Una app adaptable y accesible se ajusta con fluidez desde la pantalla de un teléfono pequeño hasta un monitor ancho, y funciona igual de bien con el pulgar, el teclado o un lector de pantalla, porque tu agente la construye desde el primer día con HTML semántico y buen contraste.
Piénsalo así
Piensa en un edificio diseñado desde el plano con puertas amplias, letreros claros y una rampa suave en la entrada. Cualquier persona —con un carrito de bebé, cargada con bolsas, en silla de ruedas o con prisa— entra con comodidad sin necesidad de hacer obras más tarde.
Cómo funciona
La mayoría de las personas abrirán tu enlace de Definiciónvista previa (Preview)Un enlace privado de prueba que Vercel crea para cada cambio, para probarlo antes de publicarlo.Abrir en el glosario → o de Definiciónproducción (Production)La versión publicada de tu app, la que ve todo el mundo. Sale de `main`.Abrir en el glosario → primero en el teléfono. El diseño adaptable (construido empezando por el móvil) significa que tu DefiniciónfrontendLa parte de una app que funciona en el navegador de quien la visita: lo que se ve y se pulsa.Abrir en el glosario → se ve limpio y legible en una pantalla estrecha de 320 px sin desplazamientos laterales, y se amplía con orden en tabletas y pantallas grandes, con dimensiones explícitas en las imágenes para que la página no dé saltos al cargar.
La accesibilidad (a menudo abreviada a11y, según el estándar WCAG 2.2 AA) garantiza que cualquier persona pueda usar tu app. Cada control interactivo usa la etiqueta HTML que le corresponde (<button> para acciones, <a> para enlaces, <label> unido a cada campo de formulario) para que un lector de pantalla anuncie qué es cada elemento, y cada botón mide al menos 44 × 44 px para pulsar con el pulgar sin fallar.
Tú puedes comprobar tres de las reglas más importantes en treinta segundos: (1) pulsa la tecla Tab varias veces para verificar que llegas a todos los botones y enlaces solo con el teclado y que un borde visible indica dónde estás; (2) comprueba que el texto tiene buen contraste con el fondo (al menos 4,5:1) y nunca depende solo del color para avisar de un error; y (3) respeta prefers-reduced-motion para que las animaciones no mareen.
Cómo se ve en tu proyecto
Tu agente sigue las skills web-design-guidelines y vercel-composition-patterns cada vez que construye una pantalla. Antes de dar por buena una tarea, estrecha la ventana del navegador al tamaño de un teléfono (o abre el enlace de vista previa (Preview) en tu teléfono) y recorre la página con la tecla Tab para confirmar que todo se lee y se pulsa bien.
Copia para tu agente
Revisa las pantallas de nuestra app con la skill web-design-guidelines: comprueba que el diseño se ve limpio a 320 px de ancho, que los botones miden al menos 44×44 px, que cada campo tiene su etiqueta, que el foco con la tecla Tab es visible y que el contraste cumple WCAG 2.2 AA.
Comprobación rápida · 1 pregunta