Fix-it Challenges
Don't just spot the crime. Fix it.
Each challenge is a small broken page. Edit the code, watch the page change, and pass every check. 15 points each, and the Fix-it Specialist badge after five.
0 of 10 solved
- #01 · AccessibilityEasyThe invisible productA screen reader announces this product photo as "image" and nothing else. Describe the photo, and mark the decorative divider so it is skipped.
- #02 · AccessibilityEasyThe nameless formThis booking form relies on placeholder text, which disappears as soon as you type and is often not read out. Give every field a visible label.
- #03 · AccessibilityMediumThe whispering priceThe price and the button text are pale grey and hard to read in sunlight. Change the colours so both pass the 4.5:1 contrast ratio.
- #04 · MobileEasyThe locked zoomThis page stops people zooming in on their phones, which locks out anyone who needs larger text. Free the zoom without breaking the phone layout.
- #05 · SEO basicsEasyThe "click here" gangScreen reader users often jump from link to link, and search engines read link text. Three links all say "click here". Make each one say where it goes.
- #06 · Design and clarityMediumThe heading pile-upThis page has three main headings and jumps from h1 to h4. Search engines and screen readers can't tell what matters. Give it one h1 and a tidy order.
- #07 · Content freshnessEasyThe dusty footerThe footer says © 2019 and the "news" box still has placeholder text. Visitors wonder whether this business still exists. Clean it up.
- #08 · Conversion and contactEasyThe untappable phone numberPhone visitors have to copy this number by hand. Make the number and email address open the phone and mail apps when tapped.
- #09 · Broken elementsMediumThe impostor buttonThe "Book now" control is a styled <div>. It can't be reached with a keyboard and screen readers don't call it a button. Replace it with the real thing.
- #10 · Language and localizationMediumThe backwards Arabic pageThis Arabic page is set up as English, left to right, so punctuation lands on the wrong side and screen readers use an English voice. Tell the browser the truth.
Your code runs only in your browser. Scripts are switched off in the preview.