Implementation
Accessibility & handoff
Carry the visual reference into a complete, usable implementation with semantic markup and verified behavior.
Usage & approach
Test with a keyboard, screen reader, zoom, and both themes. Keep labels, headings, focus states, and error relationships when adapting an example. Verify contrast for every final pairing; leaf green and muted colors are not interchangeable with the primary action color. Reference screens do not certify the accessibility of your application.
Specifications
- Keyboard
- Keep focus-visible outlines; ensure a logical tab order.
- Touch
- Controls use a 44px minimum height in these examples.
- Responsive
- Check 375px, 768px, and 1024px previews plus real browser zoom.
- Handoff
- Wire actions, validation, authorization, loading, and recovery in the owning app.
Accessible action
A descriptive control with a keyboard focus outline and minimum target size.
<button type="button" aria-describedby="review-help" class="inline-flex min-h-11 items-center justify-center rounded-md bg-[#006838] px-5 py-2.5 text-sm font-semibold text-white hover:bg-[#00552e] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#006838] dark:bg-[#006838] dark:text-white dark:hover:bg-[#00552e] dark:focus-visible:outline-[#006838] disabled:cursor-not-allowed disabled:opacity-50">Review quotation</button>
<p id="review-help" class="mt-3 text-base leading-7 text-[#333] dark:text-[#c4c7c5]">Check the traveller details and selected coverage before continuing.</p>HTML + Tailwind CSS · fit to panel
Bring this into your project
Copy the HTML from the code panel. Keep complete utility names in files scanned by Tailwind, retain accessible labels and focus styles, and connect actions to your own application. Preview controls belong to this documentation and are not part of the copied example.