TaskFix the seven a11y violations. Add: alt on the img, aria-label on the icon button, aria-describedby on the email input pointing to #err, #err id on the error p, change the link color from #ccc to #595959, replace outline:none with a :focus-visible style on button.cta (outline 2px solid #3B82F6), add aria-live='polite' to #counter, and add <a class='skip-link' href='#main' style='position:absolute;top:8px;left:8px'>Skip</a> at the top.
Module capstone: audit a broken page
200 XP15 min
Theory
Putting A5 together
Audit the starter HTML/CSS. It has seven a11y violations from this module's lessons. Fix all seven and your build passes.
The violations:
- The image has no
altattribute. - The icon button has no
aria-labeland no visible text. - The error message isn't linked to its input via
aria-describedby. - The link uses light gray that fails contrast (3.2:1 needs 4.5:1).
- The button has
outline: nonewith no replacement focus style. - The dynamically-updated counter isn't marked
aria-live. - There's no skip-to-content link.
Apply lessons 1-11 to fix each. The Check button verifies all seven simultaneously.
π
Sign up to start coding
Theory is open to everyone. The interactive editor, live preview, and check are unlocked with a 7-day free trial β card required, cancel anytime.
Sign up β free trial βFirst 10 lessons in each track are free. No card needed for those.