Skip to content

Accessibility pass

Headings, labels, focus, contrast and keyboard use on this page, fixed and reported

Do an accessibility pass on this page and fix what you find. Check and fix: - Structure: one h1, headings in order, landmarks (header, nav, main, footer), lists marked up as lists. - Names: every link and button says where it goes or what it does. Icon-only buttons get an accessible name. Images that carry meaning get alt text; decorative ones get an empty alt. - Forms: every field has a visible label tied to it, errors are in text next to the field, and the right input types and autocomplete values are set. - Keyboard: everything works with Tab, Enter, Space and Escape, in a sensible order, with a clearly visible focus ring (focus-visible) on every control. - Color: text contrast of at least 4.5 to 1 (3 to 1 for large text), and nothing said by color alone. - Motion: anything that animates respects prefers-reduced-motion. Use the platform first: a real button, a real link, a real label. Add ARIA only where no native element says it. Keep it editable on midcode's canvas: write text and class names literally in the markup (no class names built from variables or helpers), one element per thing I might want to select, and Tailwind classes for every style. Report what you fixed, and what you could not fix without a decision from me.

Other prompts