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にクローズされました