WCAG 2.2 達成基準 2.5.8 ターゲットのサイズ(AA)を可視化する

const hitEl = [
	...document.querySelectorAll(
		'a,button,input,select,textarea,label,summary',
	),
].filter((el) => !(el.matches('input,select,textarea') && el.closest('label')));

const hits = [...hitEl]
	.map((el) => {
		const box = el.getBoundingClientRect();
		if (box.width < 0 && box.height < 0) {
			return null;
		}
		if (box.width < 24 || box.height < 24) {
			return {
				type: 'under',
				x: box.left + box.width / 2,
				y: box.top + box.height / 2,
				rect: box,
			};
		}
		return {
			type: 'over',
			rect: box,
		};
	})
	.filter(Boolean);
const cover = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
const width = document.documentElement.scrollWidth;
const height = document.documentElement.scrollHeight;
cover.viewBox.baseVal.x = 0;
cover.viewBox.baseVal.y = 0;
cover.viewBox.baseVal.width = width;
cover.viewBox.baseVal.height = height;
cover.setAttribute('width', width + 'px');
cover.setAttribute('height', height + 'px');
cover.style.position = 'absolute';
cover.style.top = '0';
cover.style.left = '0';
cover.style.zIndex = '100000';
cover.style.pointerEvents = 'none';

const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');

for (const hit of hits) {
	if (hit.type === 'under') {
		const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
		circle.cx.baseVal.value = hit.x;
		circle.cy.baseVal.value = hit.y;
		circle.r.baseVal.value = 12;
		circle.style.fill = 'rgba(255, 0, 0, 0.5)';
		g.append(circle);
	}
	const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
	rect.x.baseVal.value = hit.rect.left;
	rect.y.baseVal.value = hit.rect.top;
	rect.width.baseVal.value = hit.rect.width;
	rect.height.baseVal.value = hit.rect.height;
	rect.style.fill = 'rgba(255, 0, 0, 0.5)';
	g.append(rect);
}

cover.append(g);

document.body.append(cover);