Images
Every image needs alt text. Decorative ones can use an empty alt.
playground · mistakes on purpose
Playground
Every block on this page has mistakes on purpose, next to a version that passes. OdinEye is running: hover a marker to read the problem, or open the panel in the bottom right corner to see the full list.
- Error
- Warning
- ✕ should be flagged
- ✓ should pass
Accessibility
Buttons
A button needs a name: visible text or an aria-label.
✕ icon only
✕ only spaces
✓ has text
✓ aria-label
Links
Same rule as buttons. An image inside a link counts if it has alt text.
Form fields
A placeholder is not a label. Use a label element or an aria-label.
✕ placeholder only
✕ no label
✕ no label
✓ aria-label
✓ inside a label
✓ buttons are ignored
Headings
One h1 per page, and no skipped levels on the way down.
Second main title
Section
Subsection, skips h3
Deep subsection, skips h5
Duplicate ids
An id must be unique. Labels and anchors break when it is not.
A
B
123
✕ id used three timesC
SEO
Most SEO checks look at the whole page (title, description, Open Graph, canonical). This page gets those right, so they only show up in the panel when something is missing. The link checks are below.
Link text
Link text should say where the link goes.
✕ generic
✕ generic
✕ generic, in Portuguese
✓ descriptive
Link destination
A link that goes nowhere should be a button.
Layout
Images
Broken, stretched, or much bigger than the space they fill.
Touch targets
Anything clickable should be at least 24×24px.
Text size
Text under 12px is hard to read, especially on a phone.
This text is too small
Even smaller
✕ 8pxThis text is fine
Overflow
This box is wider than the window, so the whole page scrolls sideways. That is the bug.
This box is wider than the page