Update a11y.ts

.changeset/orange-trainers-learn.md

@@ -0,0 +1,5 @@
+---
+"astro": minor
+---
+
+Improve a11y-missing-content rule for audit feature of dev-overlay

packages/astro/src/runtime/client/dev-overlay/plugins/audit/a11y.ts

@@ -352,13 +352,45 @@ export const a11y: AuditRuleWithSelector[] = [
 	},
 	{
 		code: 'a11y-missing-content',
-		title: 'Missing content on element important for accessibility',
-		message: 'Headings and anchors must have content to be accessible.',
+		title: 'Missing content',
+		message:
+			'Headings and anchors must have an accessible name, which can come from: inner text, aria-label, aria-labelledby, an img with alt property, or an svg with a title.',
 		selector: a11y_required_content.join(','),
 		match(element: HTMLElement) {
 			// innerText is used to ignore hidden text
 			const innerText = element.innerText.trim();
-			if (innerText === '') return true;
+			if (innerText !== '') return false;
+
+			// Check for aria-label
+			const ariaLabel = element.getAttribute('aria-label')?.trim();
+			if (ariaLabel && ariaLabel !== '') return false;
+
+			// Check for valid aria-labelledby
+			const ariaLabelledby = element.getAttribute('aria-labelledby')?.trim();
+			if (ariaLabelledby) {
+				const ids = ariaLabelledby.split(' ');
+				for (const id of ids) {
+					const referencedElement = document.getElementById(id);
+					if (referencedElement && referencedElement.innerText.trim() !== '') return false;
+				}
+			}
+
+			// Check for <img> with valid alt attribute
+			const imgElements = element.querySelectorAll('img');
+			for (const img of imgElements) {
+				const altAttribute = img.getAttribute('alt');
+				if (altAttribute && altAttribute.trim() !== '') return false;
+			}
+
+			// Check for <svg> with valid title
+			const svgElements = element.querySelectorAll('svg');
+			for (const svg of svgElements) {
+				const titleText = svg.querySelector('title');
+				if (titleText && titleText.textContent && titleText.textContent.trim() !== '') return false;
+			}
+
+			// If all checks fail, return true indicating missing content
+			return true;
 		},
 	},
 	{