altの可視化

check-alt-value-for-capture.js

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)
  }
)

check-alt-value.js

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)
  }
)

check-aria-label.js

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)
  }
)

check-click-event.js

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;'
      }
    }
  }
)