Skip to content

Instantly share code, notes, and snippets.

@joe-watkins
Forked from 140bytes/LICENSE.txt
Last active August 29, 2015 14:23
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save joe-watkins/2a7ad8e1f8b8657f288a to your computer and use it in GitHub Desktop.
Save joe-watkins/2a7ad8e1f8b8657f288a to your computer and use it in GitHub Desktop.
Detect Missing Alt Tags - 140byt.es

Detect Missing Alt Tags - 140byt.es

Test for missing alt tags on a page. Add a border to images that have no value set for the alt tag. View the demo to learn more.

var x = document.getElementsByTagName("img"); // select all images
for (var i = 0; i < x.length; i++) { // loop through images
if(!x[i].alt){ // if the alt attribute value is empty
x[i].style.cssText = "border: solid 2px red;"; // apply red border to image
}
}
function(t,e){for(var n=document.getElementsByTagName(t),s=0;s<n.length;s++)n[s].alt||(n[s].style.cssText=e)};
DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
Version 2, December 2004
Copyright (C) 2011 YOUR_NAME_HERE <YOUR_URL_HERE>
Everyone is permitted to copy and distribute verbatim or modified
copies of this license document, and changing it is allowed as long
as the name is changed.
DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
0. You just DO WHAT THE FUCK YOU WANT TO.
{
"name": "detectAltTags",
"description": "Detect missing alt tags on images & add border if missing.",
"keywords": [
"accessibility",
"alt tags",
"css"
]
}
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>140byt.es - Detect missing Alt tags</title>
<script>
var detectMissingAlt=function(t,e){for(var n=document.getElementsByTagName(t),s=0;s<n.length;s++)n[s].alt||(n[s].style.cssText=e)};
detectMissingAlt("img","border: solid 2px red");
</script>
</head>
<body>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/15309/teapot.jpg">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/15309/leaves.jpg" alt="Leaves">
</body>
</html>
@atk
Copy link

atk commented Jun 24, 2015

How about using CSS(3)?

function(d,s){s=(d=document).createElement('x'),s.innerHTML='<style>img:not([alt]){border:2px solid red}';d.body.appendChild(s.firstChild)}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment