Weblin — HTML integrity tests

Development-only tests.css flags markup anti-patterns and a11y issues in the browser. The flagged elements below are intentionally bad — each shows its pink/amber outline and, because this page sets <html data-tests-labels>, an on-page message chip.

Without data-tests-labels, messages are still visible by inspecting the element in DevTools: each flagged element carries a --error-* / --warning-* custom property. Note: <img>/<input> are replaced elements, so their chips don't render — only the outline + DevTools property.

error warning

Bad links a:not([href]) · a[href=""] · a[href$="#"] · a[href^="javascript:"] · a[disabled]

link without href · empty href · fragment only · javascript href · disabled anchor

Unassociated label label:not(:has(input,textarea,select)):not([for])

Orphan input (warning) input:not(form input)

Figure problems unlabeled · stray figcaption · empty figcaption · aria-label override

tiny

No figcaption, no aria-label

Stray caption outside its figure
tiny
tiny
Both a figcaption and an aria-label

Breadcrumbs outside a labeled nav ol[class*="breadcrumb"]:not(nav[aria-label] ol)

Divitis (warning) :is(div > div > div > div > *)

Five levels of divs deep

Nested header nav (warning) header nav:has(ul > ul)

Missing img alt img:not([alt])

Button problems (warnings) button:not([type]) · button:empty

Content outside a landmark body :not(header, nav, main, aside, footer) ...

This box sits directly in <body>, between <main> and <footer>, so it escapes landmark navigation.