5 Bookmarklets for Quick Accessibility Checks

Tags: [[Accessibility]] [[Drafts]]

🔗Missing altMissing alt

https://twitter.com/jdjuan/status/1022301088651853824

https://gist.github.com/cfjedimaster/ee4a2fd935318e29bd5364d71ea221c1

img:not([alt]) {
   filter: grayscale(100%);
}

javascript:(
  function() {
    const images = document.querySelectorAll('img:not([alt])');
        for (let i = 0; i < images.length; i++) {
          const image = images[i];
          image.style.filter = 'grayscale(100%)';
        }
        if(images.length > 0) {
          console.warn(`${images.length} images are missing an alt attribute`, { images });
        } else {
          console.info('👍 No images are missing alt attributes.');
        }
 }
)()

🔗Duplicate IDsDuplicate IDs

javascript:(
    function () {
        var ids = {};
        var found = false;
        jQuery('[id]').each(function() { if (this.id && ids[this.id]) { found = true; console.warn('Duplicate ID #'+this.id); } ids[this.id] = 1; }); if (!found) console.log('No duplicate IDs found'); })();

🔗Links the open in a new windowLinks the open in a new window

javascript:(function() {
  const links = document.querySelectorAll('[target]');
  for (let i = 0; i < links.length; i++) {
    const link = links[i];
    if (link.getAttribute('target') !== '_self') {
      link.style.backgroundColor = 'yellow';
      link.style.outline = '2px solid orange';
    }
  }
  console.warn(`${links.length} links open in a new window.`, { links });
})()

🔗What Has FocusWhat Has Focus

https://codepen.io/svinkle/pen/WgYRxq

🔗Trashy.cssTrashy.css

🔗headings!headings!

https://twitter.com/Una/status/1277657662432391168

/ Headers out of order (i.e. h2 before h1, etc.) Result: dotted blue outline / h2 ~ h1, h3 ~ h1, h4 ~ h1, h5 ~ h1, h6 ~ h1, h3 ~ h2, h4 ~ h2, h5 ~ h2, h6 ~ h2, h4 ~ h3, h5 ~ h3, h6 ~ h3, h5 ~ h4, h6 ~ h4, h6 ~ h5 { outline: 2px dotted blue; }