La accesibilidad no podía ser un extra
Un sitio de adopción lo usa cualquier persona: con lector de pantalla, solo con teclado o con poca visión.
Volver a proyectos
N.º 003 · Landing page
Huellitas
Desarrollo sitios accesibles de verdad: HTML semántico, contraste WCAG AA y un formulario que se completa de principio a fin con teclado.
- Año
- 2026
- Tipo
- Landing page · 2 páginas
- Rol
- Diseño y desarrollo front-end
- Stack
- HTML5 · CSS3 · JavaScript
Reto, solución y resultado
Semántica, contraste y un formulario claro
HTML semántico, contrastes revisados con WCAG AA, etiquetas y ayudas enlazadas en cada campo y foco visible en todo.
Sencilla a propósito
Una landing con un formulario de adopción que se completa de principio a fin sin mouse.
Lo destacado
Accesible desde el código
Formulario de adopción
Cada campo tiene su label, el tipo de vivienda va en fieldset y legend, y la ayuda se enlaza con aria-describedby. Si llegas desde la tarjeta de un perro, ya viene seleccionado.
Navegación con teclado
Enlace para saltar al contenido, foco visible de 3 px en el color de acento y aria-current en la página activa.
Idioma y estructura
lang="es" en la página y lang="en" en las frases en inglés; títulos en orden h1 → h2 → h3 y textos alternativos que describen cada foto.
Una decisión técnica
Un formulario que se entiende sin verlo
Cada campo está enlazado a su etiqueta y a su texto de ayuda con aria-describedby, así el lector de pantalla los lee juntos.
El mensaje de resultado vive en una región role="status": se anuncia sin mover el foco. Si falta un dato, el foco salta al primer campo con error.
<label for="email">Correo electrónico</label>
<input type="email" id="email"
autocomplete="email" required
aria-describedby="email-ayuda">
<p class="hint" id="email-ayuda">
Ejemplo: nombre@correo.com
</p>
<!-- Se anuncia al enviar, sin mover el foco -->
<p class="form-status" id="formStatus"
role="status" aria-live="polite"></p>
Contraste medido
Los colores reales del sitio, con su contraste
Títulos y texto
14.2:1 · AAA
Texto principal sobre el fondo
#2B2622 sobre #FBF9F6
#2B2622 sobre #FBF9F6
Descripciones
5.4:1 · AA
Texto secundario sobre el fondo
#6E655C sobre #FBF9F6
#6E655C sobre #FBF9F6
Enviar solicitud
5.4:1 · AA
Texto del botón sobre el acento
#FAF7F2 sobre #A34D2D
#FAF7F2 sobre #A34D2D
Secciones alternas
5.0:1 · AA
Texto secundario sobre el fondo alterno
#6E655C sobre #F4EFE6
#6E655C sobre #F4EFE6
WCAG AA pide 4.5:1 para texto normal y AAA, 7:1. El acento se oscureció a #A34D2D para que el botón cumpliera.