Accessibility heuristic

The development overlay’s heuristic (checkAccessibility) on the same page. Unlike the page checks it reports the skipped heading level and the empty button; it does not look at metadata.

Accessibility heuristic

examples/output/a11y-heuristic.json

<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>Spring sale – Example shop</title>
		<link rel="canonical" href="https://example.com/sale/" />
		<meta property="og:title" content="Spring sale" />
		<script type="application/ld+json">{"@context":"https://schema.org","@type":"WebPage"}</script>
	</head>
	<body>
		<a href="#main">Skip to content</a>
		<main id="main">
			<h1>Spring sale</h1>
			<h3>Shoes</h3>
			<img src="/shoes.jpg" />
			<a href="/cart"><svg aria-hidden="true" width="16" height="16"></svg></a>
			<form>
				<label for="email">Email</label>
				<input id="email" type="email" />
				<input type="search" placeholder="Search" />
				<button type="submit"></button>
			</form>
		</main>
	</body>
</html>

Heuristic findings for examples/pages/sample.html
Element	Finding	Reference
<img src="https://example.com/shoes.jpg...">	Image missing alt attribute	1.1.1 Level A
<button>	Button has no accessible text	4.1.2 Level A
<input type="search">	Form control missing label	1.3.1 Level A
<h3>	Heading level skipped (1 to 3)	1.3.1 Level A
<a href="https://example.com/cart...">	Link has no accessible text	2.4.4 Level A

checkAccessibility
debug
WCAG