The layout survives the whole range from 390 to 2560 px without a single layout defect — noticeably better than average. Every finding is in accessibility, and two of the eight exist only in the mobile layout: they are impossible to discover when checking the site at one resolution. That is the point of a breakpoint matrix — some violations appear only because the elements themselves appear.
R-1Higha11y · WCAG 4.1.2
The mobile menu button has no accessible name — only at 390 px
The button that opens the mobile menu (40×40 px) contains only an icon: no text, no aria-label, no title. A screen reader announces it as just “button” — the single entry point into navigation on mobile has no name.
Why this is specifically a breakpoint-matrix finding: on the five desktop and tablet widths the button exists in the DOM but is not visible, and axe reports zero unnamed buttons. At 390 px it becomes visible — and the count jumps to 6, one per page on all 6 pages. An audit at any desktop resolution comes back clean on this criterion.
Steps to reproduce
Open any page at a 390 px viewport
Find the menu button on the right side of the header
The element has no accessible name
The only way into navigation at 390 px — an unnamed icon button. Logo blurred.
Evidence: Compared across two viewports in a single browser session
R-2Mediuma11y · WCAG 2.1.1
A scrollable region without keyboard access — only at 390 px
At 390 px axe reports scrollable-region-focusable on the comparison page (1 of the 6): a horizontally scrollable area does not receive focus and cannot be scrolled from the keyboard. On the other five breakpoints there is no violation — the area simply does not scroll there.
R-3Mediuma11y · image-alt, critical impact
The header logo has no alternative text — on every viewport
The logo image has no alt attribute: one node on each of the 6 pages, on every one of the 6 breakpoints. A header logo usually links to the home page — a screen-reader user gets neither its name nor its destination.
Why Medium and not High, even though axe rates image-alt as critical: text navigation sits right next to the logo and leads to the same places, so one inaccessible link does not cut the user off. R-1 is the opposite case — there the unnamed button is the only way into navigation, with no workaround; hence the different severity at the same axe impact.
R-4Mediuma11y · WCAG 1.3.1 / 4.1.2
The pricing calculator slider is unlabeled — and 6 px tall
The traffic-volume slider (an input type=range) on the home page has no associated label. The control that determines the displayed price is impossible to understand without visual context. Present on all six breakpoints.
The second aspect of the same element is its size: 556×6 px on desktop, 290×6 on mobile — the shortest target on the site. Formally it passes criterion 2.5.8: there are no other targets nearby, so the spacing exception applies. But hitting a 6 px strip with a finger and dragging it to the right step is much harder than the mockup suggests — and that gesture sets the price the visitor sees.
R-5Mediuma11y · WCAG 1.4.3
Text contrast below the AA threshold — 156 elements
color-contrast (serious): 156 nodes on 5 of 6 pages, stable across all breakpoints (155 at 768 px). The number barely moves with viewport width — the problem is in the palette, not the layout.
R-6Lowa11y · WCAG 1.3.1
Broken definition-list structure
On the home page a definition list is assembled incorrectly: dt/dd items sit outside a proper dl structure. A block of 16 product-feature definitions is not read by assistive technology as a related list.
R-7Lowa11y · WCAG 1.4.1
In-text links distinguishable only by colour
On the contact page, links inside a paragraph differ from the surrounding text only by colour — no underline, no other non-visual cue. Three nodes on five breakpoints and two at 1440 px: at that width the paragraph reflows and one link stops being surrounded by text on both sides.
R-8Lowa11y · WCAG 2.4.1
No “Skip to content” link
The skip-navigation link is missing on all 6 pages and all breakpoints.
The mitigating circumstance is weaker than it first looks: main, two navs and exactly one h1 are present — but footer (and its contentinfo equivalent) is missing on all six pages, and header is missing on two. So a screen-reader user has a bypass, but the set of orienting landmarks is incomplete.
Checked — no issues found
✓
Layout. No horizontal overflow and no control overlaps on any of the 36 runs.
✓
Heading hierarchy. Not a single skipped level across all 36 runs; exactly one h1 on every page.
✓
Landmarks. main and two navs present everywhere — with the completeness caveat recorded in R-8.
✓
Target size, mandatory AA level. No violations: 385 targets smaller than 24 px measured directly — every one passes either through the spacing exception or as a link inside a sentence. The same measurement on the mobile-audit object produced a different verdict (one violating pair) — one method, different layout facts.
✓
Text clipping. Clean within the checked class of elements. Disclosed limits: the detector compares actual and visible widths of controls and deliberately skips elements with ellipsis or hidden overflow — “clean” means no clipping in the checked class, not “no clipping anywhere”.
✓
Page language. The lang attribute is set on all pages.
✓
Console and network. Zero JavaScript errors, zero 4xx/5xx responses, zero failed requests across all 36 runs.
✓
Debug output. None in the production build.
Want a report like this for your product?
Fixed scope, clear deliverables — we reply within 24 hours with scope and a quote.
