diff --git a/src/validate/html/index.ts b/src/validate/html/index.ts
index 88609d174f81..b2a190696f22 100644
--- a/src/validate/html/index.ts
+++ b/src/validate/html/index.ts
@@ -19,14 +19,29 @@ export default function validateHtml(validator: Validator, html: Node) {
 	const elementStack: Node[] = [];
 
 	function visit(node: Node) {
-		a11y(validator, node, elementStack);
-
 		if (node.type === 'Element') {
 			if (meta.has(node.name)) {
 				return meta.get(node.name)(validator, node, refs, refCallees);
 			}
 
-			validateElement(validator, node, refs, refCallees, stack, elementStack);
+			const isComponent =
+				node.name === ':Self' ||
+				node.name === ':Component' ||
+				validator.components.has(node.name);
+
+			validateElement(
+				validator,
+				node,
+				refs,
+				refCallees,
+				stack,
+				elementStack,
+				isComponent
+			);
+
+			if (!isComponent) {
+				a11y(validator, node, elementStack);
+			}
 		} else if (node.type === 'EachBlock') {
 			if (validator.helpers.has(node.context)) {
 				let c = node.expression.end;
diff --git a/src/validate/html/validateElement.ts b/src/validate/html/validateElement.ts
index 2572fd29d40c..1156ebcea787 100644
--- a/src/validate/html/validateElement.ts
+++ b/src/validate/html/validateElement.ts
@@ -11,11 +11,9 @@ export default function validateElement(
 	refs: Map<string, Node[]>,
 	refCallees: Node[],
 	stack: Node[],
-	elementStack: Node[]
+	elementStack: Node[],
+	isComponent: Boolean
 ) {
-	const isComponent =
-		node.name === ':Self' || node.name === ':Component' || validator.components.has(node.name);
-
 	if (isComponent) {
 		validator.used.components.add(node.name);
 	}
diff --git a/src/validate/html/validateHead.ts b/src/validate/html/validateHead.ts
index 73d100a4503a..bac56474b284 100644
--- a/src/validate/html/validateHead.ts
+++ b/src/validate/html/validateHead.ts
@@ -11,6 +11,6 @@ export default function validateHead(validator: Validator, node: Node, refs: Map
 
 	node.children.forEach(node => {
 		if (node.type !== 'Element') return; // TODO handle {{#if}} and friends?
-		validateElement(validator, node, refs, refCallees, [], []);
+		validateElement(validator, node, refs, refCallees, [], [], false);
 	});
 }
diff --git a/test/validator/samples/a11y-not-on-components/input.html b/test/validator/samples/a11y-not-on-components/input.html
new file mode 100644
index 000000000000..e6073bb742b8
--- /dev/null
+++ b/test/validator/samples/a11y-not-on-components/input.html
@@ -0,0 +1,9 @@
+<Widget scope="foo">
+	<input autofocus>
+</Widget>
+
+<script>
+	export default {
+		components: { Widget },
+	};
+</script>
diff --git a/test/validator/samples/a11y-not-on-components/warnings.json b/test/validator/samples/a11y-not-on-components/warnings.json
new file mode 100644
index 000000000000..319a2aef8176
--- /dev/null
+++ b/test/validator/samples/a11y-not-on-components/warnings.json
@@ -0,0 +1,10 @@
+[
+	{
+		"message": "A11y: Avoid using autofocus",
+		"loc": {
+			"column": 8,
+			"line": 2
+		},
+		"pos": 29
+	}
+]