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/methodology · 320 px viewport
Loading saved crop…
html > body > main > div > div > details > nav > ol > li:nth-of-type(1) > a
Element 280 × 40 px · x 20, y 153
html > body > main > div > div > details > nav > ol > li:nth-of-type(1) > a is covered by html > body > main > div > article > header > p:nth-of-type(1) over 62.5% of the smaller painted box
Element 2/methodology · 320 px viewport
Loading saved crop…
html > body > main > div > div > details > nav > ol > li:nth-of-type(2) > a
Element 127 × 19 px · x 20, y 203
html > body > main > div > div > details > nav > ol > li:nth-of-type(2) > a is covered by html > body > main > div > article > header > h1 over 35.9% of the smaller painted box
Element 3/methodology · 320 px viewport
Loading saved crop…
html > body > main > div > div > details > nav > ol > li:nth-of-type(2) > a
Element 280 × 40 px · x 20, y 193
html > body > main > div > div > details > nav > ol > li:nth-of-type(2) > a is covered by html > body > main > div > article > header > p:nth-of-type(1) over 37.5% of the smaller painted box
On /docs
9 confirmed overlapping pairs
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/docs · 320 px viewport
Loading saved crop…
html > body > main > div > div > details > nav > ol > li:nth-of-type(1) > a
Element 280 × 40 px · x 20, y 153
html > body > main > div > div > details > nav > ol > li:nth-of-type(1) > a is covered by html > body > main > div > article > header > p:nth-of-type(1) over 62.5% of the smaller painted box
Element 2/docs · 320 px viewport
Loading saved crop…
html > body > main > div > div > details > nav > ol > li:nth-of-type(2) > a
Element 94 × 19 px · x 20, y 203
html > body > main > div > div > details > nav > ol > li:nth-of-type(2) > a is covered by html > body > main > div > article > header > h1 over 35.9% of the smaller painted box
Element 3/docs · 320 px viewport
Loading saved crop…
html > body > main > div > div > details > nav > ol > li:nth-of-type(2) > a
Element 280 × 40 px · x 20, y 193
html > body > main > div > div > details > nav > ol > li:nth-of-type(2) > a is covered by html > body > main > div > article > header > p:nth-of-type(1) over 37.5% of the smaller painted box
The order on screen differs from the order in the code
On /methodology
1026 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 2/methodology · 1440 px viewport
Loading saved crop…
html > body > main > div > article > section:nth-of-type(4) > div:nth-of-type(1) > ul > li:nth-of-type(1) > details > div > p
Element 654 × 50 px · x 558, y 2221
DOM rank differs from visual rank
Element 1/methodology · 1440 px viewport
No image saved
html > body > main > div > article > section:nth-of-type(4) > div:nth-of-type(1) > ul > li:nth-of-type(2) > details > summary > span:nth-of-type(1)
Element 92 × 26 px · x 452, y 2236
DOM rank differs from visual rank
Element 3/methodology · 1440 px viewport
No image saved
html > body > main > div > article > section:nth-of-type(4) > div:nth-of-type(1) > ul > li:nth-of-type(2) > details > summary > span:nth-of-type(2)
Element 622 × 26 px · x 558, y 2236
DOM rank differs from visual rank
On /docs
10 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/docs · 390 px viewport
Loading saved crop…
html > body > main > div > article > header > p:nth-of-type(1)
Element 350 × 19 px · x 20, y 182
DOM rank differs from visual rank
Element 2/docs · 390 px viewport
Loading saved crop…
html > body > main > div > div > details > nav > ol > li:nth-of-type(2) > a