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”).
(more…)
