Last active
October 27, 2021 08:22
-
-
Save tai-fukaya/4ec6e783975c9c6ecc3298e6c5c2acd4 to your computer and use it in GitHub Desktop.
altの可視化
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const imgs = document.getElementsByTagName('img'); | |
const body = document.getElementsByTagName('body')[0]; | |
[...imgs].forEach( | |
(img) => { | |
const {alt, ariaHidden} = img | |
if (ariaHidden) {return} | |
img.style = `border: 5px solid ${color};` | |
const clientRect = img.getBoundingClientRect() | |
const altText = document.createElement('div') | |
altText.textContent = img.alt || '虚空' | |
altText.style.zIndex = 9999 | |
altText.style.position = 'fixed' | |
altText.style.top = `${Number(clientRect.top).toFixed()}px` | |
altText.style.left = `${Number(clientRect.left).toFixed()}px` | |
altText.style.fontSize = '12px' | |
if (img.alt) { | |
altText.style.color = '#000' | |
altText.style.background = '#ff0' | |
} else { | |
altText.style.color = '#fff' | |
altText.style.background = '#f00' | |
} | |
altText.dataParent = img | |
body.appendChild(altText) | |
} | |
) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const imgs = document.getElementsByTagName('img'); | |
[...imgs].forEach( | |
(img) => { | |
const {alt, ariaHidden} = img | |
if (ariaHidden) {return} | |
img.style = 'visibility: hidden;' | |
const altText = document.createElement('div') | |
altText.textContent = img.alt || '虚空' | |
if (img.alt) { | |
altText.style = 'font-size: 12px; color: #000; background: #ff0;' | |
} else { | |
altText.style = 'font-size: 14px; color: #fff; background: #f00;' | |
} | |
altText.dataParent = img | |
img.parentNode.insertBefore(altText, img) | |
} | |
) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const emptyInteractiveNodes = document.querySelectorAll('a[href]:empty, button:empty'); | |
const ariaLabelNodes = document.querySelectorAll('[aria-label]'); | |
[...emptyInteractiveNodes].forEach( | |
(node) => { | |
const ariaLabel = node.ariaLabel | |
if (!ariaLabel) { | |
// TODO 虚空 | |
console.log(node) | |
} | |
} | |
); | |
[...ariaLabelNodes].forEach( | |
(node) => { | |
if (node.tagName !== 'NAV') { | |
node.style = 'visibility: hidden;' | |
} | |
const altText = document.createElement('div') | |
altText.textContent = node.tagName + ' ' + node.ariaLabel | |
altText.style = 'font-size: 12px; color: #000; background: #ff0;' | |
altText.dataParent = node | |
node.parentNode.insertBefore(altText, node) | |
} | |
) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const nodes = document.querySelectorAll('*'); | |
[...nodes].forEach( | |
(node) => { | |
const events = getEventListeners(node) | |
if(events.click?.length > 0) { | |
const {tagName, className, href} = node | |
let isOk = false | |
if (tagName === 'BUTTON') isOk = true | |
if (tagName === 'A' && href != null) isOk = true | |
if (!isOk) { | |
// TODO 子供にbutton, aがある場合、どうするか | |
node.style = 'border: 5px dotted #f00;' | |
} | |
} | |
} | |
) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment