ptg16476052616 LESSON 22: Designing for User Experience
Images and Multimedia
Images are a sticky point when it comes to accessibility. Users with impaired vision
might not be able to appreciate your images or videos. Users with bad hearing might not
enjoy your audio files and find videos without captioning annoying. However, clever
design and usage of the tools provided by HTML can, to a certain degree, minimize the
problems multimedia cause.
Images are known for having probably the best-known accessibility feature of any HTML
element. The alt attribute has been around as long as the <img> tag and provides text
that can stand in for an image if the user has a text-only browser or the image wasn’t
downloaded for some reason. Back when everybody used slow dialup connections to
the Internet, it was easy to become intimately familiar with alt text because it displayed
while the images on a page downloaded. Later, some browsers started showing alt text
as a tool tip when the user let her mouse pointer hover over an image.
Despite the fact that alt text is useful, easy to add, and required by the HTML5 speci-
fication, many pages on the Internet still lack meaningful alternative text for most (if
not all) of their images. Taking a few extra minutes to enter alt text for your images is
a must for anyone who uses HTML that includes images. Also bear in mind that while
using alt="" is perfectly valid, it is a bad idea. If you have images that don’t need alter-
native text, put them as background images in your CSS. Text-based browsers will, in the
absence of alt text, generally display something like [IMAGE] on the page. If the image is
a design feature rather than actual content, this can make the page more difficult to com-
prehend when the screen reader simply says “image” in the middle of a paragraph.
There’s one final area to discuss when it comes to images: the marriage of images and
links in the form of image maps. As you might imagine, image maps can be an acces-
sibility issue. But you can use the alt attribute on your <area> tags in the same way as
you would use it on your <img> tags to provide alternate text for each link area:
<area shape="rect" coords="50,50,100,100" alt="square box" href="box.html">
Many browsers also provide tool tips for alternate text on image maps for non-AT brows-
ers, which makes it more useful for all your users.
With video and audio, it’s even easier to provide fallback options for users who can’t
view or hear them. The first thing you do is include HTML inside the <video> or
<audio> tags that provides fallback information. This might be a text description of the
video, links to alternative text or other versions of the video, or even a full written tran-
script of the audio file.
HTML5 provides another tag to help make audio and video more accessible: <track>.
Although this tag doesn’t have widespread support—as of this writing only Internet