Annotating Designs for Other Information


Annotating Images and Alt-Text Tables

Of course, providing alternative text for images and other non-interactive content is essential for accessibility– and particularly for screen reader users. Without alternative text, a picture becomes meaningless to a users who are blind or who have vision impairments. In many cases, providing alternative text also improves search engine optimization.

While pre-production teams do not need to know the developments techniques for making providing alternative text, they should still make clear to developers what this alternative text should be. Developers, in turn, have a plethora of different techniques, which can be applied to ensure that the proper text is read by the screen reader.

screenshot described in accompanying text

In the screenshot above (full size version), we have a fairly high-fidelity mockup of an online clothing store with accompanying alt text table that identifies the alt text for each image. You’ll notice that not every image or graphic is marked up– this is because some images are actually interactive elements as described in the section on Annotating Designs for User Interaction. And, while the information contained in this alt text table can easily be folded in a single set of annotations along with the user interactions annotations, we separated them out here for clarity.

So how did we annotate the images in this wireframe?

  1. Well, first, the “Brand X” logo is simply identified as “Brand X logo.” That’s easy and obvious enough. This just follows Alternate Text on Images.
  2. Below that, there is the large announcement banner image that spans the width of the screen. Each of the images here are decorative but we still need to make the image of text (that reads, “So Ready for School!!!” accessible to the screen reader. Thus, our alt text for this image is identified as simply “So Ready for School!!!”.
  3. Next we have the thumbnail images above the links to the product that they illustrate. As the text describes the link, the images themselves are decorative– and so each will get an null (or empty) alt text. This follows from Incidental Images. Rather than provide a separate explanation for each one, we’ve given all of them the same number in the alt text table.
  4. We extended this same technique to the star ratings below the thumbnail images.