5 Bookmarklets for Quick Accessibility Checks

Tags:

  • [[benrobertson.io/accessibility]]
  • Drafts

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

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 Focus

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

Construct.css (formerly Trashy.css)

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