Naughty naughty no alt: CSS style to clearly show which images lack an alt-text
Posted by jpluimers on 2021/10/05
The CSS from [WayBack/Archive.is] Naughty naughty no alt that shows the below red moving rendering of images that do not have an alt-text is simple:
<style> body { margin: 5vw; } img { max-width: 25vw; margin: 1vw; box-sizing: border-box; } img:not([alt]) { border: 2px solid red; animation: pulse 1.2s ease infinite; } @keyframes pulse { 0% { transform: scale(1) rotate(0); } 25% { transform: scale(1.3) rotate(15deg); filter: blur(2px); opacity: 0.8; box-shadow: 0 0 2vw 2vw red; } 50% { transform: scale(1) rotate(0); filter: none; } 75% { transform: scale(1.3) rotate(-15deg); filter: blur(5px); opacity: 0.8; box-shadow: 0 0 2vw 2vw red; } 100% { transform: scale(1) rotate(0); } } </style>
Less intrusive CSS fragements are
img:not([alt]) { filter: blur(5px); }
and
img:not([alt]) { border: 5px solid red; }
Via:
- [Archive.is] Marcy Sutton on Twitter: “Love this accessibility trick. Make it part of every CSS reset! 😜 https://t.co/4IciD9Rx5J”
- [Archive.is] Addy Osmani on Twitter: “Tip: highlight images missing alt text with img:not([alt])”
- [Archive.is] Alice Boxhall on Twitter: “@addyosmani I like the blur idea! Can you make a screenshot of that option as well?”
- [Archive.is] Addy Osmani on Twitter: “@malimirkeccita I kinda like img:not([alt]) { opacity: 0.5; }”
- [Archive.is] Kilian Valkhof on Twitter: “Something ffoodd.github.io/a11y.css/ can do for you along with many more accessibility warnings.… “
- [WayBack] a11y.css
This CSS file intends to warn developers about possible risks and mistakes that exist in HTML code. It can also be used to roughly evaluate a site’s quality by simply including it as an external stylesheet.
Available as:
- CSS file
- WebExtension
- Bookmarklet
- [WayBack] GitHub – ffoodd/a11y.css: This CSS file intends to warn developers about possible risks and mistakes that exist in HTML code. It can also be used to roughly evaluate a site’s quality by simply including it as an external stylesheet.
- [WayBack] a11y.css
- [Archive.is] KARL GROVES on Twitter: “@addyosmani @A11yLondon Here you go: karlgroves/diagnostic.css”
- [WayBack] GitHub – karlgroves/diagnostic.css: Diagnostic.css is a stylesheet which allows the user to test for common errors in a page’s markup
Diagnostic.css is a stylesheet which allows the user to test for common errors in a page’s markup. Inspired by Eric Meyer’s diagnostic CSS file, this one is intended to flesh out accessibility related issues on a page.
Available as:
- CSS file
- Bookmarklet
- User script
- [WayBack] GitHub – karlgroves/diagnostic.css: Diagnostic.css is a stylesheet which allows the user to test for common errors in a page’s markup
- [Archive.is] Amir Shahzeidi on Twitter: “@addyosmani I’ve turned it into a bookmarklet:
javascript:var images = document.querySelectorAll('img');if(images) {for (var i = images.length - 1; i >= 0; i--){var alt = images[i].getAttribute('alt');if(!alt){images[i].style.border = "5px solid red";}}}Hope it’s correct😀” - [Archive.is] Glora on Twitter: “@addyosmani On my WordPress website I need to use img[alt=””] { border: 5px solid red } if not it doesn’t work because the images have an alt attribute but an empty one.”
- [Archive.is] Addy Osmani on Twitter: “Tip: highlight images missing alt text with img:not([alt])”
–jeroen
The Wiert Corner - irregular stream of stuff 
Leave a Reply