Batch 4 — FAIL fixture

@media (orientation: landscape) { body { display: none } } in the stylesheet above. The page is unusable in one orientation.

The second orientation query on this page only changes flex-direction. It must not be reported — that is the normal, correct use of the feature, and the case exists to catch a check that flags every orientation query it finds.

A transform transition on hover and an infinite rotate animation, and no @media (prefers-reduced-motion: reduce) rule anywhere on the page.

This link only changes colour on hover — a transition, but not motion.

The href is real on purpose. The first version used href="#" and the existing link-href-hash check reported it — correctly, but it is noise in a fixture testing four other criteria.

That colour transition must stay silent. 2.3.3 is about movement. A check that treats every transition as motion would report every site on the web, which is the same as reporting nothing.

Justified text stretches the spaces between words to force both edges straight. The uneven gaps form vertical rivers of white space running down the paragraph, which readers with dyslexia lose their place in. WCAG asks for text that is not justified for exactly this reason.

This paragraph sets line-height to 1.15. Lines sitting this close together make it easy to skip a line or read the same one twice, which matters most to readers with low vision or a reading disability. The criterion asks for at least 1.5 within a paragraph.

This case was going to be the third of three measurements. It is being dropped, and the reason is worth recording.

Line length can only be measured from rendered width, and device.js picks the scan viewport at random from eight resolutions between 1280 and 2560. The same paragraph is 90 characters wide on one scan and 60 on the next, with nothing about the page having changed.

A customer would see the issue count move on its own between scans. That costs more trust than the sub-criterion is worth, so 1.4.8 will check only the two properties that are viewport-independent: text-align and line-height.

This paragraph is fourteen hundred pixels wide, so a line of it runs well past eighty characters before it wraps. Long measures are hard to track: the eye has to travel a long way back to find the start of the next line, and losing that return sweep means re-reading. The criterion caps a line at eighty characters.

Left aligned, line-height 1.7, and a measure of about sixty-two characters. This paragraph satisfies all three of the sub-requirements the check reads, and must produce nothing at all.

OK

Two characters, in a container that would fail on both measures. Line length and line-height are properties of prose; measuring a label or a button caption produces noise. The check needs a minimum text length, and this case is here to prove it has one.

The field is announced as invalid and never says why. A screen-reader user hears "invalid" and nothing else.

axe already reports this, as aria-valid-attr-value under 4.1.2: "ARIA attribute element ID does not exist on the page". Adding a 3.3.1 finding on the same element would put one input in two sections of the report saying the same thing.

So 3.3.1 covers only case F — aria-invalid="true" with no error mechanism at all, which axe does not report. Same scoping rule that keeps 1.4.11 out of 1.4.3's lane.

An id that does not exist on the page. Present in the markup, absent in the accessibility tree — a check that only looks for the attribute would pass this, and that is what this case is for.

This is the correct pattern.

Not in an error state. Nothing to identify.