One of the most important things you can do to make a web page
accessible is to always include a short text alternative for an
image via an alt attribute of the img element. The alt attribute is used to
specify equivalent content for those who cannot process images or
who have image loading disabled. An alt attribute is usually
read automatically by default in screen readers. It is programmatically determinable and semantic.
All images require alternative text as Mike West discusses in the following video. A transcript of Web Accessibility: Images require alternative text is also available.
CSS Background Images
If an image has purpose it shouldn't be buried in CSS, as it is completely hidden to a non-sighted user. This is a trend seen more often these days, as developers are looking to use CSS to accomplish things. It may have an efficiency savings in time and code-weight, but it has serious accessibility costs. Like a null alt attribute, CSS background images should only be used for purely decorative images. A big issue with non decorative CSS background images is that when images are turned off or when high contrast mode is enabled (for example, under the Windows OS) background images disappear. If a background image has meaningful content, text or icons then users of high contrast mode and those without images will not see that content. Recommendations are:
- Do not use backgrounds to convey information.
- Documents should be organized so they are readable without requiring associated style sheets.