[Draft] Module 3: Images and Graphics

Discuss how people interact with accessible images. Mention scenarios where accessible images can help users access information which would not be available otherwise. Relate accessible images to WCAG success criterion 1.1.1 Non-text Content and 1.4.5 Images of Text.

Learning Outcomes for Topic

Students should be able to:

• Describe how people access information contained in images and graphics using:
  • Screen reader keystrokes or functions to access text alternatives.
  • Voice commands to focus and interact with functional images.
  • Access to alternative texts from mobile devices when images are turned off due to data restrictions.
  • Search functions that take advantage of better image indexing and ranking when images have alternative texts.

Teaching Ideas for Topic

Optional ideas to teach the learning outcomes:

• Demonstrate how screen reader users can get information about a given image via the text alternative, a description of the image contents in plain text. State that it is not necessary to include the word “image” in the alternative text, since that piece of information would be separately announced when the image role is used appropriately. Indicate that most screen readers have specific keystrokes to navigate between images as well as functions to list all text alternatives of a web page.
• Show examples of how users of speech input software can voice specific words or phrases to jump through the different images of a page. Compare these with web pages where there is no alternative text for those functional images.
• Demonstrate how images may not be available because of data restrictions or slow connections. Turn them off using common extensions or the settings screen in most browsers. Show pages with adequate alternative texts. Compare them with other images with no alternative texts. Emphasize how essential information is often missed due to the lack of text alternatives.
• Explain that search engines use alternative texts (among other techniques) to better determine what an image is about. Indicate that the more accurate an alternative text is, the better your images could rank.

Ideas to Assess Knowledge for Topic

Optional ideas to support assessment.

• Practice — Students use a screen reader to navigate through a given set of images. Assess how students know specific keystrokes and functionality of a screen reader.
• Practice — Students are shown image buttons or links without text alternatives and are asked to provide them. Assess how students provide adequate alternative texts for some specific types of images.
• Practice — Students use speech input software to interact with button or link images. Assess how students relate the functionality of images with their corresponding alternative texts.

Introduce different Types of images based on their function and purpose, as well as technologies that can be used to make them accessible.

Learning Outcomes for Topic

Students should be able to:

• List the following types of images from an accessibility perspective:
  • Decorative.
  • Informative.
  • Functional.
  • Text.
  • Complex.

Teaching Ideas

Optional ideas to teach the learning outcomes

• Show examples of decorative images. Explain that an image is considered decorative when its purpose is merely ornamental, i.e., it does not add new meaning to the adjacent text and could be removed without loosing information. For references on decorative images, see the WAI website tutorials Decorative Images.
• Show examples of informative images. Explain that these images convey a small piece of information that can generally be expressed using few words. For reference on informative images see the WAI website tutorials, Informative Images.
• Show examples of functional images. Explain that they carry out an action on the page when they are pressed, such as print, or send. For reference on functional images, see the WAI website tutorials, Functional Images.
• Show examples of images of text. Explain that these images are really text coded as an image in machine language. Emphasize that text within an image object cannot be interpreted by assistive technologies, cannot be resized and background and foreground colors cannot be modified. For reference on images of text, see the WAI website tutorials, Images of Text.
• Show examples of complex images, such as graphs, charts, or diagrams. Contrast them with informative images in that complex images convey information that cannot be expressed in a short phrase or sentence.

Introduce several mechanisms that can be used to provide image descriptions. Emphasize that some descriptions will ideally be provided by content authors.

Learning Outcomes for Topic

Students should be able to:

• Code img elements and image input types with the alt attribute to provide accessible descriptions.
• Code SVG graphics with the alt attribute, the aria-label, or aria-labelledby properties to provide text alternatives.
• Style animated text with CSS Transforms and CSS Fonts technologies instead of using images of text.
• Convey mathematical expressions with MathML language instead of using images of text.
• Mark up long descriptions for images using one of the following techniques:
  • longdesc attribute.
  • figure and figcaption elements.
  • aria-describedby.

Teaching Ideas for Topic

Optional ideas to support assessment.

• Introduce the HTML alt attribute. Explain that it should contain concise and clear information about the image. Mention that when an image is decorative, the value for the attribute should be empty (“”). For reference on how to use the alt attribute to code image descriptions, see techniques H2: Combining adjacent image and text links for the same resource and H37: Using alt attributes on img elements.
• Introduce CSS Transforms and CSS Fonts technologies. Explain that many visual effects can now be achieved by using these technologies instead of embedding an image file into a website. Explain that this is a WCAG requirement under success criterion 1.4.5 Images of Text. For reference, see the images of text section of the Images tutorial.
• Introduce the MathML language and explain that it serves to convey mathematical expressions on the Web. Emphasize that screen reader support for MathML on the Web is growing, but other assistive technology users may need additional browser extensions. Explain that this is a WCAG requirement under success criterion 1.4.5 Images of Text. For reference, see Images tutorial (mathematical expressions example).
• Introduce ways to provide additional descriptions for complex images and groups of images such as aria-describedby or longdesc. Explain that sometimes concise descriptions are not enough to convey the information.

Ideas to Assess Knowledge for Topic

Optional ideas to support assessment.

• Guided Quiz — Students are presented with a set of images in the context of a website and give their type and possible alternative text. Assess how students identify different types of images and provide alternative texts based on their context.
• Practice — Students use the alt attribute to provide alternative texts for a given set of functional images. Assess how students relate a given image with its specific function within a website.
• Practice — Students are presented with a set of images of texts and are asked to code them using CSS Transforms and CSS Fonts technologies and provide mechanisms for authors to include text alternatives and descriptions. Assess students’ knowledge of CSS Transforms and CSS Font technologies.