Back to projects No. 003 · Landing page

Huellitas

I build sites that are truly accessible: semantic HTML, WCAG AA contrast and a form you can complete from start to finish with a keyboard.

View site View code
Full Huellitas page: hero, featured dogs, how it works, stories and final call to action
Year
2026
Type
Landing page · 2 pages
Role
Front-end design and development
Stack
HTML5 · CSS3 · JavaScript
The challenge

Accessibility couldn't be an extra

Anyone might use an adoption site: with a screen reader, with only a keyboard or with low vision.

The solution

Semantics, contrast and a clear form

Semantic HTML, contrast checked against WCAG AA, labels and hints linked to every field, and visible focus throughout.

The result

Simple on purpose

A landing page with an adoption form you can complete from start to finish without a mouse.

Highlights

Accessible from the code up

01

Adoption form

Every field has its label, the housing type uses fieldset and legend, and hints are linked with aria-describedby. If you arrive from a dog's card, that dog is already selected.

Huellitas adoption application form with Toby selected
02

Keyboard navigation

A skip-to-content link, a 3 px visible focus ring in the accent color and aria-current on the active page.

03

Language and structure

lang="es" on the page and lang="en" on English phrases; headings in h1 → h2 → h3 order and alt text that describes each photo.

A technical decision

A form you can understand without seeing it

Each field is linked to its label and to its hint text with aria-describedby, so screen readers read them together.

The result message lives in a role="status" region: it's announced without moving focus. If something is missing, focus jumps to the first field with an error.

contacto.html · excerpt
<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>

<!-- Announced on submit, focus doesn't move -->
<p class="form-status" id="formStatus"
   role="status" aria-live="polite"></p>
Measured contrast

The site's real colors, with their contrast

Headings and text
14.2:1 · AAA Main text on the background
#2B2622 on #FBF9F6
Descriptions
5.4:1 · AA Secondary text on the background
#6E655C on #FBF9F6
Submit application
5.4:1 · AA Button text on the accent color
#FAF7F2 on #A34D2D
Alternate sections
5.0:1 · AA Secondary text on the alternate background
#6E655C on #F4EFE6

WCAG AA requires 4.5:1 for normal text, and AAA requires 7:1. The accent was darkened to #A34D2D so the button would pass.

Next project Spotify