The Bridge Method · Versión 1.0 · Publicado el 26 de octubre de 2026
Reglas de diseño accesible para sitios web del sector público.
La web debe funcionar para todas las personas. Si usted diseña sitios web, The Bridge Method está aquí para ayudarle a crearlos accesibles e inclusivos, con guías prácticas y listas de verificación que puede usar en su próximo proyecto.
Para muchas instituciones públicas, la fecha límite del Título II de la ADA de abril de 2027 (se abre en una pestaña nueva, en inglés) está cerca. Si usted trabaja en uno de esos sitios web, no tiene que empezar desde cero. Empiece con lo que hay aquí.
Está creado para sitios web del sector público y es útil para escuelas, organizaciones sin fines de lucro y cualquier sitio del que la gente depende. Úselo, adáptelo y compártalo libremente bajo Creative Commons Atribución 4.0.
Lo escribí para que siga disponible para cualquier persona que lo necesite.
¿Diseña sitios web? Esta página es para usted. ¿Representa a una entidad pública? Vea lo que su sitio web tiene que resolver.
Cómo citar
Manrique, E. (2026). The Bridge Method: accessible design rules for public-sector websites (Version 1.0). Zenodo. DOI: 10.5281/zenodo.22986524
Por qué creé este método
Escribí estas reglas por dos razones: ayudar a que los sitios públicos cumplan la ley y dejarle una guía a quienes diseñan sin una todavía, en América Latina y en cualquier lugar donde la accesibilidad aún no se exige ni se enseña.
Por qué un puente
El método lleva el nombre del puente que Leonardo da Vinci dibujó (se abre en una pestaña nueva, en inglés) hace más de quinientos años. No necesita clavos ni cuerdas. Cada viga sostiene a la siguiente, y se arma con madera común, así que cualquiera puede construirlo.
El método funciona igual. Se sostiene solo, cada regla apoya a la siguiente y no cuesta nada, así que cualquier persona que diseña puede usarlo.
Muchas barreras se dibujan antes de escribir una línea de código.
A los diseñadores casi nunca se les enseña a prevenirlas. El método convierte la norma en reglas que un diseñador puede aplicar a un diseño y un revisor puede verificar.
Colores que no pasan el contraste
El texto necesita suficiente contraste con su fondo; si no, las personas con baja visión no pueden leerlo. Tampoco quien mira el teléfono bajo el sol. El texto principal necesita una relación de al menos 4.5:1.
EjemploUn texto gris claro (#999999) sobre blanco llega a 2.85:1 y no pasa. Un gris más oscuro (#595959) llega a 7:1 y pasa.
WCAG 1.4.3
Texto demasiado pequeño o demasiado claro
La letra pequeña o delgada es difícil de leer para las personas con baja visión, y cansa a todos los demás. El método fija el texto principal en 16 px o más, con un interlineado de 1.5.
EjemploEl horario de atención, puesto como una nota al pie de 12 px en letra delgada, pasa a ser texto normal de 16 px junto a la dirección.
Regla del método, relacionada con WCAG 1.4.4 y 1.4.12
Formularios sin etiquetas visibles ni errores útiles
El texto de ejemplo dentro de un campo desaparece cuando alguien empieza a escribir, y la instrucción se pierde justo cuando hace falta. Un error que solo pone el campo en rojo no dice qué corregir.
EjemploCrear la etiqueta «Fecha de nacimiento» encima del campo, con la ayuda «DD/MM/AAAA». Si falla, decir: «Escriba la fecha con día, mes y año, por ejemplo 15/04/1980».
WCAG 3.3.1, 3.3.2, 3.3.3
Estados de foco que nunca se dibujaron
Quien navega con el teclado necesita ver qué botón o enlace está seleccionado. Si el archivo de diseño no tiene estado de foco, el desarrollador no tiene nada que construir.
EjemploDibujar cada botón y cada enlace con un contorno de 3 px que tenga al menos 3:1 de contraste con el fondo, y colocarlo en el archivo de diseño junto al estado hover.
WCAG 2.4.7, 1.4.11
Palabras encerradas en imágenes
Un lector de pantalla no puede leer el texto que forma parte de una imagen. Ese texto tampoco se puede traducir, ampliar con nitidez ni reacomodar en una pantalla pequeña.
EjemploEl afiche de un evento publicado como JPG. Publicar la fecha, el lugar y cómo inscribirse como texto en la página, y dejar el afiche como imagen adicional con una descripción breve (texto alternativo).
WCAG 1.4.5, 1.1.1
Cinco principios: lo que vale en todos los proyectos
No son pasos. Cada uno se aplica en todas las etapas del trabajo.
Diseñar para la tarea
Cada plantilla empieza por la tarea que una persona debe completar.
Una regla que se puede verificar
Cada decisión tiene un número o una prueba de sí o no.
Decidirlo en el archivo de diseño
El contraste, el orden y las etiquetas se anotan, no se adivinan.
Claro en cada versión
Primero el lenguaje claro, y todas las versiones publicadas se diseñan juntas.
Cada proyecto enseña al siguiente
Los componentes y las lecciones vuelven al sistema compartido.
Las reglas visuales de un vistazo
Ocho grupos de reglas, cada uno con su verificación y el criterio de WCAG que lo respalda. Un ejemplo por grupo; el conjunto completo está en el PDF.
Descargar la lista de revisión de diseño (en el Kit para diseñadores, PDF, 337 KB)
Color y contraste
Texto principal de al menos 4.5:1. El significado nunca depende solo del color.
WCAG 1.4.3, 1.4.1
Tipografía
Texto principal de 16 px o más, interlineado de 1.5, sin texto dentro de imágenes.
Método, WCAG 1.4.5
Diseño de página y orden
Un diseño de 320 px sin desplazamiento lateral; orden de lectura anotado.
WCAG 1.4.10, 1.3.2
Componentes
Todos los estados dibujados, incluido un estado de foco visible. Áreas táctiles de 24 px como mínimo.
WCAG 2.4.7, 2.5.8
Formularios
Etiquetas visibles sobre los campos; errores que dicen cómo resolver el problema.
WCAG 3.3.1, 3.3.2, 3.3.3
Imágenes e íconos
Cada imagen marcada como informativa, con texto alternativo, o decorativa.
WCAG 1.1.1
Movimiento y multimedia
Sin carruseles que giran solos; espacio diseñado para subtítulos.
WCAG 2.2.2, 1.2.2
Documentos
Primero una página web; cuando hace falta un PDF, uno etiquetado.
Método, WCAG 1.3.1
Cinco fases: el orden del trabajo, desde la mirada del diseñador
Ocurren en orden. Cada fase parte de lo que confirmó la anterior.
Fase 1
Comprender
Mapa de tareas críticas y notas de barreras de diseño.
Fase 2
Definir el sistema
Paleta con pares aprobados, escala tipográfica, foco y tamaños de área táctil.
Fase 3
Diseñar y anotar
Componentes con todos sus estados y notas con las que los desarrolladores pueden construir.
Fase 4
Revisar en conjunto
Dos revisiones con desarrolladores y evaluadores, antes y después de la construcción.
Fase 5
Guiar y transferir
Sistema de diseño actualizado, guías de ayuda y videos cortos para editores.
La secuencia de trabajo dentro de las fases
En un proyecto real, las cinco fases se desarrollan en doce pasos de trabajo. El orden importa más que las herramientas: cada paso parte de lo que confirmó el paso anterior. La secuencia sirve para cualquier sitio, sector o tamaño de equipo, y se lee como el puente: cada unión es una fase que sostiene sus pasos, de izquierda a derecha, y la flecha a lo largo del suelo lleva las lecciones al próximo proyecto.
Cómo leerlo. El puente es el método. Sus cinco uniones son las cinco fases, en orden de izquierda a derecha, y cada una sostiene sus pasos. Lleva a la gente del sitio de hoy a un sitio donde puede completar sus tareas críticas, y la flecha de abajo cierra el ciclo: las lecciones del paso 12 inician el paso 1 del próximo proyecto.
Ver los doce pasos de trabajo
Fase 1: Comprender
- Revisar el sitio actual: contenido, estructura, barreras y cómo lo usa la gente.
- Escuchar a quienes administran el sitio y a quienes dependen de él.
- Hacer un inventario del contenido y decidir qué se queda, qué cambia y qué se elimina.
- Acordar las tareas críticas y cómo se medirá el éxito.
Fase 2: Definir el sistema
- Definir la estructura: navegación, tipos de página y el camino a cada tarea crítica.
- Crear la base visual accesible y su tabla de pares aprobados.
Fase 3: Diseñar y anotar
- Bocetar primero las tareas críticas, en wireframes simples.
- Presentar opciones de diseño con el razonamiento de cada una, y decidir en conjunto.
- Diseñar las plantillas y los componentes con todos sus estados, y anotarlos.
Fase 4: Revisar en conjunto
- Hacer la entrega con notas para la construcción y luego comparar las páginas construidas con el diseño y la lista de verificación.
Fase 5: Guiar y transferir
- Dejar guías de ayuda, videos cortos y reglas de contenido claras para quienes editan el sitio.
- Medir las tareas críticas después del lanzamiento y devolver las lecciones al sistema de diseño.
Contexto · Solo Estados Unidos
¿Nuevo en el sector público? Los términos clave en lenguaje claro
The Bridge Method sirve para cualquier sitio, en cualquier país. Si diseña para un gobierno estatal o local de Estados Unidos, estos cuatro términos explican lo que añade la ley. ¿Representa a una entidad pública? Vea lo que su sitio web tiene que resolver.
Título II de la ADA
La Ley de Estadounidenses con Discapacidades (ADA, 1990) es una ley de derechos civiles de EE. UU. Su Título II cubre a los gobiernos estatales y locales: todo lo que ofrecen al público, incluidos sitios web y aplicaciones, debe poder ser usado por personas con discapacidad.
Por ejemplo: el sitio web de un condado donde los residentes pagan impuestos sobre la propiedad debe funcionar para alguien que usa un lector de pantalla o solo el teclado.
La norma del Departamento de Justicia
El Departamento de Justicia hace cumplir el Título II. En abril de 2024 publicó una norma que indica cómo deben cumplir la ley los sitios web y las aplicaciones móviles públicas, y en qué fecha. También cubre el contenido que una firma crea o administra para una entidad pública por contrato.
Por ejemplo: una ciudad de 80,000 habitantes debe cumplir la norma a más tardar el 26 de abril de 2027; un pueblo de 8,000 habitantes, a más tardar el 26 de abril de 2028.
WCAG 2.1 nivel AA
Las Pautas de Accesibilidad para el Contenido Web (WCAG), publicadas por el W3C. Son criterios que se pueden comprobar, en tres niveles: A, AA y AAA; la norma exige AA, que incluye A. Para un diseñador: contraste de texto de al menos 4.5:1, texto que se puede ampliar al 200%, un foco de teclado visible y formularios con etiquetas claras.
Por ejemplo: el criterio 1.4.3 de WCAG pide un contraste de 4.5:1 para el texto principal. The Bridge Method lo convierte en una regla que se puede verificar en el archivo de diseño.
Quiénes son las entidades cubiertas
Los gobiernos estatales y sus agencias; condados, ciudades y pueblos; tribunales; distritos escolares públicos, colleges comunitarios y universidades públicas; bibliotecas, hospitales y departamentos de salud públicos; agencias de transporte; y distritos especiales. Las empresas privadas están bajo el Título III y las agencias federales bajo la Sección 508.
Por ejemplo: un college comunitario, la oficina del sheriff de un condado y el sistema de autobuses de una ciudad están cubiertos; un bufete de abogados privado no está cubierto por esta norma.
Llega en 2027
Un curso gratuito de seis módulos para diseñadores
A su propio ritmo y grabado, de unas seis horas, en inglés y en español. Cada módulo termina con un ejercicio sobre una página real del sector público.
1. Por qué los sitios públicos son diferentes
2. Color, tipografía y diseño de página
3. Componentes y formularios
4. Imágenes, documentos y movimiento
5. Lenguaje claro y contenido multilingüe
6. Anotar y revisar
Todas las personas merecen una experiencia digital que funcione para ellas.
Emir Manrique, Digital & Graphic Designer
Historial de versiones
1.0 · 26 de octubre de 2026 · Primera publicación
Licencia
Creative Commons Atribución 4.0 (CC BY 4.0)
No es asesoría legal
Aplicar el método no hace por sí solo que un sitio cumpla con WCAG ni con el Título II; la conformidad requiere probar el sitio construido. Las herramientas automáticas detectan solo una parte de los problemas; para confirmar la conformidad hacen falta pruebas manuales con tecnología de asistencia.