Skip to content

Instantly share code, notes, and snippets.

@joe-watkins

joe-watkins/LICENSE.txt

Forked from 140bytes/LICENSE.txt
Last active August 29, 2015 14:23
Show Gist options
  • 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.
Download ZIP
Detect Missing Alt Tags - 140byt.es
Raw
README.md

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.

Raw
annotated.js
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
}
}
Raw
index.js
function(t,e){for(var n=document.getElementsByTagName(t),s=0;s<n.length;s++)n[s].alt||(n[s].style.cssText=e)};
Raw
LICENSE.txt
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.
Raw
package.json
{
"name": "detectAltTags",
"description": "Detect missing alt tags on images & add border if missing.",
"keywords": [
"accessibility",
"alt tags",
"css"
]
}
Raw
test.html
<!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