Find images with no alt text.

find-images-with-no-alt-text.js

console.clear();
let out = '';
let images = [];
let problems = [];
$$('img').forEach(img => {
//document.querySelectorAll('img').forEach(img => {
  let text = img.getAttribute('alt');
  if (!text) {
    img.style.outline = '3px solid orangered';
    problems.push(img);
  }
  images.push(img);
  out += `
${text||'No Link text'}
${img.alt}`;
});
if (out === '') {
  console.warn('Sorry, I didn\'t see any images.');
} else {
  let firstImage = "";
  //copy(out);
  //console.info('done harvesting links, ready to paste');
  console.info('Done looking for images.')
  if (problems.length > 0) {
    let s = problems.length === 1 ? "" : "s";
    let vrb = problems.length === 1 ? "is" : "are";
    console.warn('%cThere %s %d image%s with no alt text.', 'color: orangered; font-size: 18px;', vrb, problems.length, s);
    console.groupCollapsed('%cImage%s without alt text', 'color: firebrick; font-size: 16px;', s);
    problems.forEach(img => {
      if (!firstImage) {
        firstImage = img;
      }
      console.dirxml(img)
    });
    console.groupEnd('Here are the images without alt text');
    if (firstImage) firstImage.scrollIntoView({behavior: "smooth"});
  } else {
    console.info('%cWow! You\'re good. All your images have alt text.', 'color: limegreen');
  }
  if (images.length > 0) {
    let s = images.length === 1 ? "" : "s";
    console.info('%cBTW, I found %d image%s on this page. Here they are.', 'color: limegreen', images.length, s);
    console.groupCollapsed('All images');
    images.forEach(img => {console.dirxml(img)});
    console.groupEnd('All links');
  }
}

Benefits

Using this snippet in Chrome lets you use built-in dev tools features.

1. The first image with a missing alt tag automatically scrolls into view
2. The console layout is responsive (as opposed to table layouts)
3. You can right-click and scroll into view all other images
4. You can see a preview of the image when you hover over the image URL

This snippet is more efficient than:

• Running console.table($$('img').filter(i => !i.alt), ['src'])
• Using the Web Developer Chrome extension
• Using a web crawler app
• Manually searching for missing alt text in the page source or media library