# Adaptable y accesible desde el principio

> 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.

## Analogía

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 preview o de production primero en el teléfono. El **diseño adaptable** (construido **empezando por el móvil**) significa que tu frontend 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.

## 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 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

```text
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.
```

---
Fuente: [Agentic Makers](https://agenticmakers.app/es/aprende/adaptable-y-accesible) · Licencia: CC BY 4.0