Markup defects do not break the preview. They break the reader.

Generated HTML tends to be structurally plausible and semantically careless. Divs where a list belongs, spans stacked to look like a heading, interactive elements nested inside each other.

It also produces anchors that go nowhere: href values of #, empty strings, or example domains copied from a documentation sample.

And it omits the declarations that assistive technology depends on: a lang attribute on the document, a viewport meta tag, alt text on images.

The document is parsed and inspected as text and as a tree, which surfaces the structural problems without running the page.

Browsers re-parse invalid markup, so the tree the browser builds is not the tree the author wrote. That is a bug in any framework that reconciles against its own copy of the structure.

The practical cases are common: a block element inside a paragraph, a table row outside a table body, a button inside a link. All render, and all can produce mismatches that appear as unrelated visual glitches.

Checking nesting before render is cheaper than debugging the symptom afterwards.

Alt text is the one with the widest impact and the clearest rule: describe the content of an informative image, use an empty attribute for decoration, never paste a filename.

Language declaration is second. Without it, a screen reader pronounces the page in the wrong voice, which is a complete failure for an international audience.

Heading order is third. Assistive technology navigates by heading, so a page with visual-only headings is a page with no structure at all.

It cannot see the rendered DOM. Content injected by script, fragments fetched after load, and styles applied at runtime are outside its view.

It cannot judge design or intent: whether the alt text conveys the right thing, whether the heading hierarchy matches the visual hierarchy, whether an anchor should be a button.

And it cannot test behaviour. A valid form with an unlabelled input passes markup checks and fails the first person who tries to fill it in with a keyboard.

Paste generated markup into the console before it reaches a template. Most of the findings take seconds to fix at that stage and hours after a deploy.

Pair it with a rendered audit for live pages: automated accessibility scanners for the runtime DOM, and a manual keyboard pass for anything with a form.

For customer-facing pages in a regulated sector, add a named reviewer once, with a scope that names markup and accessibility. A machine can find the missing alt attribute; it cannot sign that the page is usable.

A form is where markup defects become lost revenue, and the failures are almost invisible on screen. An input with no associated label, a button with no type attribute submitting a form it was meant to reset, an error message with no programmatic association to the field it describes.

Check the label first: a label element tied to the input by for and id, not placeholder text standing in for one. Then check that the error state is announced, and that autocomplete attributes are present so a browser can fill the fields a returning customer expects.

A table with styled cells and no header elements looks correct and is unusable to assistive technology, which cannot say which column a value belongs to.

Rows belong in a table body, header cells in a header row with a scope attribute, and a caption that says what the table contains. If the table has no header row because the first column labels each row, say so with the right scope rather than defaulting to nothing.

A page's title, description, language and canonical declaration live in the head, and three of the four are routinely missing from generated markup.

Check for a title element that describes the page rather than the brand, a meta description written to be read, a lang attribute on the html element, a viewport declaration, and a canonical link that matches the URL the page is actually served at. Each is one line, and each changes how the page appears in a result.

Alt text is the accessibility half. The other half is layout: a missing width and height reserves no space, so the page jumps as images arrive, and that shift is measurable in how quickly readers abandon a page.

For anything other than a small icon, serve a responsive image with a srcset and a sizes attribute so the browser picks a sensible file, and defer loading for images below the first screen. A hero image marked lazy delays the largest element on the page, which is the opposite of what was wanted.

Header, nav, main and footer are not decoration. They let a screen reader user jump to the region they want instead of listening through the menu for the fourth time.

Use one main element, label multiple nav regions so a reader can tell them apart, and prefer semantic elements over divs with class names that describe what they look like. A section element without an accessible name adds nothing, and a div with a heading inside is usually the simpler answer.