The issue of CSS image sprites has been raised again on the Web Accessibility Initiative Interest Group mailing list. Here is the advice we provide on the issue:
CSS image sprite issues
- A default HTML method to add a text alternative is not provided.
- When images are disabled the sprite is not displayed.
Note: This is not an accessibility issue, but is a usability issue . If you do not want to test whether images are disabled, there is a high contrast mode (only) detection script available. - When high contrast mode is enabled in the Windows OS, the sprite is not displayed (CSS background images are not displayed in high contrast mode).
CSS image sprite issue fixes
- Include alternative text inside the element that the CSS background image is attached to.
- If images are enabled and Windows high contrast mode is not enabled use Javascript to add a style sheet that visually hides the text alternative, but is still available to assistive technology.
- Use JavaScript to detect when images are disabled and remove the CSS visually hidden display state of the text alternative.
- Use JavaScript to detect when Windows high contrast mode is enabled and remove the CSS visually hidden display state of the text alternative.
Accessible CSS image sprite example page – example files (zip)
Example code (JavaScript):
function HCTest() {
var objDiv, strColor, objFlag;
//reference to img element used to check if images are disabled
objFlag = document.getElementById('flag');
//Create a test div
objDiv = document.createElement('div');
//Set its color style to something unusual
objDiv.style.color = 'rgb(31,41,59)';
//Attach to body so we can inspect it
document.body.appendChild(objDiv);
//Use standard means if available, otherwise use the IE methods
strColor = document.defaultView?document.defaultView.getComputedStyle(objDiv, null).color : objDiv.currentStyle.color;
//Delete the test DIV
document.body.removeChild(objDiv);
//Check if we got back what we set (strColor== ??) If not we are in high contrast mode
// Use .offsetwidth and .readyState (for IE) to check if images are enabled
//If either images are disabled or high contrast is enabled (or both) the CSS stylesheet link will not be added to the page and the visually hidden text will be displayed in place of the missing background image
if (((objFlag.offsetWidth === 1 && objFlag.readyState === 'complete')||(objFlag.offsetWidth === 1 && objFlag.readyState === undefined))
&& (strColor === 'rgb(31,41,59)' || strColor === 'rgb(31, 41, 59)'))
{
var objHead = document.getElementsByTagName('head');
var objCSS = objHead[0].appendChild(document.createElement('link'));
objCSS.rel = 'stylesheet';
objCSS.href = 'alt.css';
objCSS.type = 'text/css';
}
}
Example code (HTML):
//call function onload
<body onload="HCTest();">
//image for testing offsetwidth
<img id="flag" src="clear.gif" alt="">
//example link with CSS background image
<a href="#" class="sprite">
//text label displayed when CSS image is not displayed
<span class="visually-hidden">Select</span></a>
...
</body>
Example code (CSS):
In a separate file
.visually-hidden {
position: absolute !important;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
padding:0 !important;
border:0 !important;
height: 1px !important;
width: 1px !important;
overflow: hidden;
}
Notes by Ted Drake, on use of the off screen technique described:
Using negative position can create long scroll bars when localizing a site for a rtl language. Also, it uses CSS properties that are commonly used and easy to accidentally over-ride.
The Yahoo Accessibility Lab recommends using clip for content that should be hidden from the visual user, yet available to screen reader users. Thierry Koblentz has a great article on this technique, as well as the underlying philosophy behind using the correct CSS techniques for hiding content. Clip your hidden content for better accessibility
What the technique does
The technique above resolves the issues of provision of a text alternative in all circumstances and provision of a visible label when images are disabled or high contrast mode is enabled.
Enabling Windows high contrast mode
- Windows XP – Choose a High Contrast Color Combination to Improve Screen Resolution
- Vista – Turn on High Contrast and change the settings
Related reading:
- Techniques for High-Contrast-Friendly Icons
- High Contrast Proof CSS Sprites
- Detecting if images are disabled in browsers
Thanks to: my friend and colleague Gez Lemon for providing a cleaner script and discussion about disabled images not being an accessibility issue.