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 5: Images and Graphics

Introduction

Courses based on this module should:

Learning Outcomes for Module

Students should be able to:

Competencies

Skills required for this module:

Students

Instructors

Topics to Teach

Topics to achieve the learning outcomes:

Topic: Text Alternatives

Explain several uses of text alternatives, such as to describe the function of graphical user interface component (functional images) and to describe the images so that users can understand their purpose without looking at them (informational images). Explain that describing the functions of user graphical interface components is a designer’s responsibility, whereas providing text alternatives for informative images is a responsibility shared with the content author.

Learning Outcomes for Topic

Students should be able to:

  • identify situations where it is necessary to provide text alternatives that present equivalent information as that contained in the image
  • provide short text alternatives for controls and components that accept user input, for example search, print, and save buttons
  • provide text alternatives that identify and describe the purpose of human verification systems, such as captcha
  • collaborate with other team members to implement several modalities of captcha that rely on other sensory characteristics apart from vision, such as visual, auditory, and logical
  • identify related requirements for content authors to provide descriptive, equivalent textual information to understand complex images and graphics, such as diagrams or charts

Teaching Ideas for Topic

Optional ideas to teach the learning outcomes:

Ideas to Assess Knowledge for Topic

Optional ideas to support assessment:

  • Practical — Give students a set of images conveying function, such as a printer for a “print” button and a magnifying glass fort as “search” button. Ask students to provide an appropriate text alternative. Assess how students identify images that convey function and provide text alternatives that describe the functionality of the component the image is attached to.
  • Short Answer Questions — Present students with a situation where a human verification system needs to be used and ask them to provide authentication alternatives for other sensory characteristics apart from vision. Assess how students understand the need for providing human verification systems that rely on different sensory characteristics in addition to vision.

Topic: Data Visualization

Show examples of complex images and images of text. Images of text are those which are intended to be read as text but are coded as an image. Complex images are those whose description requires more than a short phrase or sentence. Explain accessibility requirements that these images have, such as appropriate contrast ratios and appropriate text descriptions.

Explain that coordination among different team members is required to establish the relations between parts of complex images and their adjacent components (for example text and other images) so that the relationship is perceived and understood visually and through the provided descriptions.

Learning Outcomes for Topic

Students should be able to:

  • create user interfaces that support appropriate contrast ratios for complex images when they are required to understand the contents
  • create user interfaces that support use of text instead of images of text when the technology in use can provide the desired visual presentation
  • identify related requirements for content authors to provide descriptions for complex images that convey the same information as the graphical object

Teaching Ideas for Topic

Optional ideas to teach the learning outcomes:

  • Provide examples of complex images and graphics, such as charts and diagrams. Explain that they need to have a contrast ratio requirement of at least 3:1, as they are necessary to understand the content. For references on how to provide complex graphics that meet the required contrast ratio, see technique G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text.
  • Explain that images of text present information intended to be read as text. Emphasize that sometimes it is difficult to tell visually if text has been coded as a text or as an image, so coordination among designers, developers, and content authors is needed to determine if the technologies in use can achieve the desired visual presentation. Emphasize that, if an image of text is still required, there needs to be a text alternative that conveys the same information as the image of text. Explain that coding an image of text appropriately is a responsibility of the developer, whereas providing descriptions for images of text is a responsibility shared with the content author.
  • Show examples of complex images and graphics, such as maps, diagrams, and charts. Explain that they need to have text descriptions that allow people to understand and interpret such images without having to look at them. Explain that providing these text alternatives is a designers’ responsibility, whereas providing the text descriptions is a responsibility shared with the content author.

Ideas to Assess Knowledge for Topic

Optional ideas to assess knowledge:

  • Practical — Students add complex images to a website, such as charts or diagrams, and ensure they have the required contrast ratio. Assess how students understand the contrast requirements for complex images.

Topic: Decorative Images

Decorative images are used for ornamental purposes and convey no information or function. Explain that these images do not require text alternatives, as these would add clutter to the information that assistive technologies provide.

Learning Outcomes for Topic

Students should be able to:

  • identify and describe different uses of images with decorative purposes, such as ornamental
  • create user interfaces with decorative images that do not overlap with user interface components and contents when viewed using different screen sizes, configurations, and setups
  • identify related requirements for developers to code decorative images so that they are skipped by assistive technologies

Teaching Ideas for Topic

Optional ideas to teach the learning outcomes:

  • Show examples of images and graphics that do not convey function or information, such as ornamental icons. Explain that they serve ornamental purposes as long as people can understand and interact with the user interface with or without such icons. Explain that deciding what is the images role is a designers’ responsibility, whereas coding the images so that they rendered with the appropriate role is a developers’ responsibility.

Ideas to Assess Knowledge for Topic

Optional ideas to support assessment:

  • Practical — Ask students to provide decorative images to illustrate a text article and ask them to ensure these icons are visible in different screen sizes and devices. Assess how students understand the need for decorative images to adapt to the different user needs and preferences.

Ideas to Assess Knowledge for Module

Optional ideas to support assessment:

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/.