Closed1

無理矢理WAI-ARIA

ゆうてんゆうてん

Google Custom Search Element Control APIが生成するウィジェットがとても残念なHTML構造をしていたため、生成後に無理矢理調整するスクリプトを書いた。

Array.from(document.querySelectorAll('EMBED_TARGET_NODE')).forEach((el) => {
	const observer = new MutationObserver((mutations) => {
		for (const mutation of mutations) {
			const addedSearchEl = mutation.addedNodes[0];
			if (!addedSearchEl) {
				continue;
			}
			Array.from(addedSearchEl.querySelectorAll('table')).forEach((table) => {
				table.setAttribute('role', 'presentation');
			});
			Array.from(addedSearchEl.querySelectorAll('input')).forEach((input) => {
				const title = input.getAttribute('title');
				const hasLabel = input.hasAttribute('aria-label');
				if (title && !hasLabel) {
					input.setAttribute('aria-label', title);
					input.removeAttribute('title');
				}
			});
		}
	});

	observer.observe(el, { childList: true });
});

ウィジェットが埋め込まれるターゲットを MutationObserver で監視して、APIが生成した検索UIを追加した時点で、そのHTMLを調整するというもの。

意味のない二重のtable要素などがあるので role=presentation を上書いたり、input要素のAccessible nameを title 属性で定義しているため苦肉の策で aria-label に書き換えている。参考: Axeの評価 label-title-only

このスクラップは2023/05/11にクローズされました