This is an unpublished draft preview that might include content that is not yet approved. The published website is at w3.org/WAI/.

[Draft] Module 3: Images and Graphics

Introduction

Courses based on this module:

Learning Outcomes for Module

Students should be able to:

Competencies

Skills required for this module.

Students:

Instructors:

Topics to Teach

Optional topics to achieve the learning outcomes.

Topic: Images for All

Explain how some users interact with accessible images. Mention scenarios where accessible images can help users access information which would not be available otherwise.

Learning Outcomes for Topic

Students should be able to:

  • Understand the following user strategies to access information in images and graphics:
    • Specific 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.
    • Better image indexing and ranking of images with the information in their alternative texts.

Teaching Ideas for Topic

Optional ideas to teach the learning outcomes:

  • Explain 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.
  • Bring in examples of speech input software and show the necessary steps to jump through the different images of a page.
  • 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 inaccurate or non-existing 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 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 a screen reader to navigate through a given set of images that they have not seen before. Assess how students know specific keystrokes and functionality of a screen reader.
  • 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.

Topic: Including Images in Websites

Introduce different technologies that can be used to make images and graphics accessible based on the type and function of the image.

Learning Outcomes for Topic

Students should be able to:

  • List some types of images from an accessibility perspective. For example, informative, functional, text, complex, and decorative images.
  • 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.
  • Markup long descriptions for images with one of the following techniques:
    • longdesc attribute.
    • figure and figcaption elements.
    • aria-describedby.

Teaching Ideas for Topic

Optional ideas to support assessment.

  • Introduce the different types of images and provide examples for each of them. For reference, see the pages for image types at Images tutorial.
  • 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 (“”).
  • 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. 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. 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.

Ideas To Assess Knowledge for Module

Optional ideas to support assessment.

[To be developed]

Teaching Resources

Suggested resources to support your teaching:

Back to Top

This is an unpublished draft preview that might include content that is not yet approved. The published website is at w3.org/WAI/.