I recently took an introductory JavaScript and jQuery class so I could learn how to write scripts from scratch instead of just blindly using and occasionally fiddling with other people’s scripts and jQuery plugins. To give myself some JavaScript practice, I decided to create two bookmarklets to solve a web accessibility testing dilemma: how to find inaccessible CSS background images.
One bookmarklet outlines elements that have a background image set, and the other removes all background images. The idea is to use either or both of these to see whether any of the informational images on the page have been set as CSS background images instead of foreground images (the <img> element in the HTML). This is an accessibility problem, since CSS background images can’t have alt text to explain the information contained within them. Background images should be reserved for either purely decorative images or informative images that repeat information found elsewhere in the text (like an image of a printer next to the word “print”).
If you think these bookmarklets would be helpful to you too when doing accessibility testing, you can grab them from my kittenrific demo page.
I know that there are other tools out there that purport to do this, but I created these bookmarklets anyway because a) I can’t get those tools to work for some reason, and b) I learn by doing. If you’re a JavaScript learner too, let me show you the code and briefly explain how it works. Here’s the function that removes background images:
var tags = document.getElementsByTagName('*');
var element;
for (var i = 0; i<tags.length; i++){
element = tags[i];
if (element.currentStyle) { // IE
if( element.currentStyle['backgroundImage'] !== 'none' )
element.style.backgroundImage = 'none';
}
else if (window.getComputedStyle) { // Mozilla, Chrome, and Opera
if( document.defaultView.getComputedStyle(element, null).getPropertyValue('background-image') !== 'none' )
element.style.backgroundImage = 'none';
}
}What this function does is first find all the elements on the page using the universal selector (*) and stick those in an array called tags. Then I’ve got a for loop that goes through each one of these elements and looks at the styles it has on it. IE does this using currentStyle, as seen in the first if statement, and the other browsers do this using getComputedStyle, as seen in the elseif. In both cases, the script checks to see if the CSS background-image property (called backgroundImage in the IE version) has a value of something other than none, and if so, it sets the background-image value to none, using an inline style. The outline function works exactly the same way, except that it uses element.style.outline = '2px solid #f00' instead of element.style.backgroundImage = 'none'.
(I will note that I’m not using jQuery in this code because I feel that bookmarklets shouldn’t have any external dependencies, when possible. But, I did also write them in jQuery, just to make sure I could! Practice, practice.)
Since I’m a beginner at JavaScript, these bookmarklets are simple and there are likely better ways to write them. If you have suggestions for how I can improve this code, please share! I have a demo file and the code up on GitHub (another thing I’m a beginner at, incidentally).
