Text and controls must not cover each other at desktop or phone widths.
Passes when
No confirmed occlusion of painted text or a visible control
Fails when
A painted box covers text or a control by at least 4 px on both axes and 10% of the smaller painted box
How to fix it
Find what covers what at the width shown, then give the layout room: let text wrap, drop fixed heights and negative margins, or stack the items below a breakpoint.
Saved evidence 3 element records
Element 1/ · 1440 px viewport
Loading saved crop…
html > body > main > section:nth-of-type(2) > div > ul > li:nth-of-type(1) > a
Element 238 × 298 px · x 261, y 809
html > body > main > section:nth-of-type(2) > div > ul > li:nth-of-type(1) > a is covered by html > body > main > section:nth-of-type(2) > div > ul > li:nth-of-type(2) over 50.0% of the smaller painted box
Element 2/ · 1440 px viewport
Loading saved crop…
html > body > main > section:nth-of-type(2) > div > ul > li:nth-of-type(1) > a
Element 238 × 298 px · x 261, y 809
html > body > main > section:nth-of-type(2) > div > ul > li:nth-of-type(1) > a is covered by html > body > main > section:nth-of-type(2) > div > ul > li:nth-of-type(2) > a > div:nth-of-type(1) over 42.9% of the smaller painted box
Element 3/ · 1440 px viewport
Loading saved crop…
html > body > main > section:nth-of-type(2) > div > ul > li:nth-of-type(1) > a
Element 238 × 298 px · x 261, y 809
html > body > main > section:nth-of-type(2) > div > ul > li:nth-of-type(1) > a is covered by html > body > main > section:nth-of-type(2) > div > ul > li:nth-of-type(2) > a > div:nth-of-type(2) > span:nth-of-type(1) over 100% of the smaller painted box
The order on screen differs from the order in the code
30 reordered blocks
Blocks should come in the same order in the markup as they appear on screen.
Passes when
Visual and DOM reading order agree within content regions
Fails when
Order differs within instructions, or at least three blocks are reordered in one region
How to fix it
Reorder the markup to match the layout instead of moving blocks with order, row-reverse or grid placement. This matters most in steps and instructions.
Saved evidence 3 element records
Element 1/ · 1440 px viewport
No image saved
html > body > main > section:nth-of-type(2) > div > ul > li:nth-of-type(2) > a > h3
Element 238 × 19 px · x 397, y 1027
DOM rank differs from visual rank
Element 2/ · 1440 px viewport
No image saved
html > body > main > section:nth-of-type(2) > div > ul > li:nth-of-type(3) > a > h3
Element 238 × 19 px · x 533, y 1027
DOM rank differs from visual rank
Element 3/ · 1440 px viewport
No image saved
html > body > main > section:nth-of-type(2) > div > ul > li:nth-of-type(4) > a > h3
Fields need visible labels, and icon-only buttons should be few and use familiar icons.
Passes when
Fields are visibly identified and standalone icon controls are clear
Warns when
A nonstandard standalone icon control needs a label
How to fix it
Give every field a visible label, since placeholders vanish while typing. Add text to icon-only buttons, or keep them to familiar icons (search, close, menu) with an accessible name and a tooltip.
Saved evidence 2 element records
Element 2/ · 1440 px viewport
Loading saved crop…
html > body > main > header > div > div > a:nth-of-type(2)
Element 16 × 16 px · x 1184, y 24
Element 1/ · 1440 px viewport
No image saved
html > body > main > footer > div > div > div:nth-of-type(1) > div > div > a:nth-of-type(2)
Element 32 × 32 px · x 278, y 1948
On /news
1 control without a visible label
Fields need visible labels, and icon-only buttons should be few and use familiar icons.
Passes when
Fields are visibly identified and standalone icon controls are clear
Warns when
A nonstandard standalone icon control needs a label
How to fix it
Give every field a visible label, since placeholders vanish while typing. Add text to icon-only buttons, or keep them to familiar icons (search, close, menu) with an accessible name and a tooltip.
Saved evidence 1 element record
Element 1/news · 1440 px viewport
Loading saved crop…
html > body > main > header > div > div > a:nth-of-type(2)