University of Minnesota Duluth block M and wordmark


Short Text Alternatives are Required

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: