Hacer que el sitio sea utilizable para personas con discapacidad
Solucionar las barreras prácticas que impiden a las personas leer, navegar o completar formularios usando un teclado o tecnología de asistencia.
Cuándo usarlo
Antes del lanzamiento y después de cualquier cambio importante en el diseño, la navegación o los formularios.
Antes de empezar
- Contenido de página e imágenes reales; el texto alternativo significativo no puede escribirse honestamente a partir de marcadores de posición vacíos.
- El flujo de usuario más importante, como enviar una consulta, realizar una reserva o completar el proceso de pago.
- Cualquier subtítulo o transcripción que ya tengas para audio y video.
- Tiempo para realizar las comprobaciones manuales de teclado y zoom mencionadas en el resultado esperado.
El prompt
Estos prompts funcionan mejor en inglés — pégalos tal como están, incluso en páginas traducidas.
Review and improve the entire site for people with disabilities without changing its purpose or visual identity. A screen reader is software that reads a page aloud and lets someone navigate by headings, links and controls. Make every page understandable in that order: use one clear main heading, sensible subheadings, meaningful link text, real buttons for actions, and labels that say what every form field does. Make every menu, link, button, form, popup and close control usable with only a keyboard. Keyboard focus means the item currently selected by the keyboard: it must have a clearly visible outline and move in a sensible order. Do not trap someone inside a popup, and return focus to the right place when it closes. Check text, button, form and error-message contrast in every normal, hover, selected and disabled state. Never use color alone to communicate success, warning, error or selection. Keep text readable when a visitor zooms to 200 percent and on a narrow phone. Add useful alt text, which is a short description read aloud instead of an image, to images that carry information. Use [REAL DESCRIPTION OR PURPOSE] where my input is needed. Mark purely decorative images so the screen reader skips them. Do not invent details about people, products, food, places or results that are not visibly present. Give every form field a persistent label, connect each error to the field that caused it, and move focus to a clear error summary after a failed submission. Add captions or a written transcript for [VIDEO OR AUDIO], and respect a visitor's reduced-motion setting, which is a device preference asking sites to limit movement. Keep the style [CURRENT BRAND FEELING] with visible focus states that belong in the design. Test the main navigation and [MOST IMPORTANT USER FLOW] using only the keyboard, then give me a plain-language list of what you fixed, what I still need to describe or caption, and what requires a human test.
¿Ya estás creando? Pega esto en tu proyecto. ¿Empiezas de cero? Abre una cuenta gratuita en un creador compatible a continuación.
Créalo en
Qué crea esto
- Estructura de página, texto de enlaces y etiquetas de formulario claros
- Acceso completo mediante teclado con enfoque visible
- Mayor contraste y señales de estado que no dependen solo del color
- Texto alternativo honesto e imágenes decorativas ignoradas correctamente
- Mejores errores de formulario, compatibilidad con reducción de movimiento y una lista de verificación para pruebas humanas
Comprueba que funcionó
Pega el prompt, espera a que termine la construcción y luego confirma esto — en lenguaje sencillo, sin comprobaciones técnicas:
- Comenzando desde la parte superior de una página, puedes acceder y usar el menú, todos los controles principales y el flujo completo e importante presionando Tab, Shift+Tab, Enter y Space
- Siempre puedes ver qué elemento está seleccionado mediante el teclado, y ninguna ventana emergente te atrapa
- Con un zoom del 200 por ciento, el texto permanece legible y los controles no se superponen entre sí
- Al apagar la pantalla o mirar hacia otro lado, la página sigue teniendo sentido cuando la lee un lector de pantalla
- Los errores de formulario nombran el problema y te llevan de vuelta al campo que necesita corrección
- Cada imagen significativa tiene una descripción precisa, y las imágenes decorativas no se leen en voz alta
¿Falta algo? Es normal — pídelo en un mensaje corto de seguimiento en vez de volver a ejecutar todo el prompt.
Siguientes pasos
Probar un flujo completo mediante teclado
Después de la revisión general de accesibilidad
Test [USER FLOW, e.g. choose a service and submit a booking] from beginning to end using only the keyboard. Fix anything that cannot be reached, activated, understood or escaped. Do not use a mouse during the test. Report each step in plain language and confirm where focus moves after errors and success.
Sabrás que funcionó cuando: El flujo completo se puede realizar sin ratón y la ruta de enfoque está documentada.
Revisar descripciones de imágenes conmigo
Cuando el sitio tiene muchas fotos, diagramas o imágenes de productos importantes
List every meaningful image on [PAGE OR SECTION] with its current alt text and the reason the image is there. Flag descriptions that are empty, generic, repetitive or that claim details not visible in the image. Do not rewrite the flagged items until I provide [THE REAL DESCRIPTION OR PURPOSE].
Sabrás que funcionó cuando: Recibes una revisión honesta y una lista corta de descripciones que solo tú puedes proporcionar.
Añadir subtítulos y transcripciones
Antes de publicar páginas con discurso o sonido importante
Add synchronized captions to [VIDEO] using [CAPTION FILE OR VERIFIED TEXT], and place a readable transcript near [VIDEO OR AUDIO]. Include spoken words and important non-speech sounds without inventing anything. Make both usable on a phone and by keyboard.
Sabrás que funcionó cuando: Los visitantes pueden seguir el contenido multimedia sin sonido y pueden leer la misma información en texto.
Ojo con
- Una puntuación automática no es una prueba. Los escáneres omiten el orden de lectura confuso, el texto alternativo engañoso y los flujos que son agotadores de usar. La solución es una breve prueba manual de teclado y lector de pantalla en las páginas reales.
- El texto alternativo generado puede inventar detalles con confianza. Describe solo lo que es visible y relevante para el propósito de la imagen; deja una tarea claramente marcada para el propietario cuando el generador no pueda saberlo.
- Eliminar los contornos de enfoque hace que el sitio sea inutilizable mediante teclado. Reemplaza un valor predeterminado poco atractivo con un contorno claro y apropiado para la marca, nunca lo dejes sin nada.
- El contraste debe cubrir todos los estados. El texto de marcador de posición, los botones deshabilitados, las pestañas seleccionadas y los errores en línea a menudo se pasan por alto, incluso cuando el texto normal del cuerpo pasa la prueba.
- Los widgets de accesibilidad complementarios, a menudo llamados superposiciones, no son un sustituto confiable para arreglar el sitio. Pueden añadir controles mientras dejan las barreras subyacentes en su lugar, y pueden crear otras nuevas.
Notas por plataforma
Las tres plataformas principales pueden implementar estos cambios, pero ningún constructor puede probar la accesibilidad basándose únicamente en el código generado. La revisión de sitios publicados de Lovable puede señalar problemas de accesibilidad comunes, mientras que Base44 y v0 también pueden aplicar correcciones de código y diseño cuando se les solicita explícitamente; todas las plataformas aún requieren pruebas de teclado, zoom y lector de pantalla realizadas por una persona. Las comprobaciones automáticas pueden detectar la falta de texto alternativo, pero no pueden determinar si la descripción es honesta o útil.
Gasta menos créditos
Toda plataforma te cobra por el trabajo que hace su IA — así que el hábito más barato es pensar antes de construir. Estas seis reglas eliminan la mayor parte del desperdicio, elijas la plataforma que elijas.
- Planifica primero en un chat gratuito. Esboza todo en ChatGPT, Claude o Gemini — páginas, funciones, qué recoge cada formulario, cómo debe verse. Pensar allí es gratis; pensar dentro de un builder se factura.
- Empieza con un prompt escrito, no con una frase. "Hazme una web" es la frase más cara al construir con IA. Un primer prompt completo — como los de este sitio — ahorra decenas de rondas de corrección.
- No seas perezoso con los detalles. Cada detalle que omites vuelve como una corrección que pagas. Nombre del negocio, colores, cada página, cada campo del formulario, qué pasa tras el envío — ponlo todo en el primer prompt.
- Después, un cambio por mensaje. "Arregla la cabecera, y el formulario, y los colores" produce un enredo que cuesta más deshacer de lo que ahorró.
- ¿Atascado? Deja de parchear. Si la misma corrección falla unas tres veces, no envíes una cuarta — describe el estado final deseado de toda la sección en un mensaje nuevo.
- Empieza gratis. Mejora el plan cuando necesites más. Usa la cuota gratuita para crear y explorar tu primera versión. Mejora el plan cuando necesites más uso o funciones de pago, y revisa el coste de los servicios conectados antes del lanzamiento.
Los prompts de esta página están escritos para hacer casi todo este trabajo por ti — de eso se trata.
Lee la guía completaPlaybooks relacionados
Prompts relacionados
Parte de estos kits
Revisado el: 2026-07-27