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/ · 390 px viewport
No image saved
html > body > footer > nav > div:nth-of-type(12) > a
Element 195 × 106 px · x 195, y 1167
html > body > footer > nav > div:nth-of-type(12) > a is covered by html > body > footer > div:nth-of-type(2) > div over 14.2% of the smaller painted box
Element 1/ · 320 px viewport
No image saved
html > body > footer > nav > div:nth-of-type(12) > a
Element 160 × 104 px · x 160, y 1202
html > body > footer > nav > div:nth-of-type(12) > a is covered by html > body > footer > div:nth-of-type(2) > div over 12.9% of the smaller painted box
Element 2/ · 320 px viewport
No image saved
html > body > footer > p > small:nth-of-type(1) > a
Element 294 × 35 px · x 15, y 1536
html > body > footer > p > small:nth-of-type(1) > a is covered by html > body > footer > p > small:nth-of-type(2) > a over 100% of the smaller painted box
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 1/ · 1440 px viewport
No image saved
html > body > footer > div:nth-of-type(2) > div > div > ul > li:nth-of-type(1) > a
Element 124 × 15 px · x 145, y 914
Element 2/ · 1440 px viewport
No image saved
html > body > footer > div:nth-of-type(2) > div > div > ul > li:nth-of-type(2) > a
The order on screen differs from the order in the code
2 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
Warns when
One or two reordered blocks outside sequential content
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 2 element records
Element 1/ · 390 px viewport
Loading saved crop…
html > body > main > div:nth-of-type(1) > h1 > strong
Element 152 × 25 px · x 144, y 72
DOM rank differs from visual rank
Element 2/ · 390 px viewport
Loading saved crop…
html > body > main > div:nth-of-type(1) > h1 > span
Element 150 × 25 px · x 146, y 47
DOM rank differs from visual rank
Passed (10)ShowNot evaluated (13)Show
The other 506 rules of the source taxonomy aren’t part of today’s scan. See the methodology.
Score by domain
Visual communication1 of 2 checks to fix50 /100
Information and findability3 checks, all pass100 /100
Functional and interaction support1 of 1 check to fix50 /100
Inclusion and adaptation2 of 8 checks to fix81 /100
