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 in [Draft] Designer Modules, Curricula on Web Accessibility

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: Functional Images

Functional images convey functionality of a component. For example, search, print, and save functionality. Explain requirements related to color and contrast to help users distinguish these images from other components. Show examples of graphical links and buttons as well as logos. Discuss with students how they would describe each of those examples.

Learning Outcomes for Topic

Students should be able to:

  • define text alternatives for functional images using the following methods:
    • text alternatives for images
    • combinations of text alternatives of images and adjacent text inside components
    • adjacent text inside components to understand its function
  • use consistent naming and imagery for components that have the same functionality across web pages
  • explain the benefits of using text labels and decorative images for functionality, instead of using images with text alternatives that are only available to some users, such as screen reader users
  • apply appropriate color contrast for functional images

Teaching Ideas for Topic

Optional ideas to teach the learning outcomes:

Ideas to Assess Knowledge for Topic

Optional ideas to assess knowledge:

  • Practical — Give students different examples of images conveying function, such as a printer for a “print” button and a magnifying glass for a “search” button. Ask students to provide an appropriate text alternative. Assess how students identify images that convey function and how they provide text alternatives that describe the functionality of the component the image is attached to.
  • Practical — Ask students to design a series of graphical buttons and links in a way that they are perceivable and distinguishable by all users. Assess how students apply accessibility requirements, such as color contrast, to graphical buttons and links.

Topic: Informative Images

Informative images convey information that is necessary to understand the content. Their description generally requires a short phrase or sentence. Show examples of images that convey information, such as pictures in a piece of news. Discuss how to describe them.

Explain that providing text alternatives for informative images is a responsibility shared with the content author.

Learning Outcomes for Topic

Students should be able to:

  • define text alternatives that present equivalent information as that contained in informative images using the following methods:
    • boilerplate descriptions that would then be completed and maintained through the development and authoring phases
    • adjacent textual information to complement images and icons, for example in a news headline
    • text alternatives that describe the information conveyed by images
  • apply the appropriate color contrast to images that are necessary to understand the content
  • use styled text instead of images of text when the technology in use can provide the desired visual presentation
  • define alternatives to biometrics and CAPTCHA, for example by providing visual, auditory, and logical CAPTCHA
  • explain the issues associated with relying only on one form of biometrics and CAPTCHA, and describe alternative approaches for authentication
  • evaluate the issues associated to accessing information contained in informative images
  • select other ways to convey the information contained in images when possible, including plain text
  • identify related requirements for developers to code alternative texts for informative images

Teaching Ideas for Topic

Optional ideas to teach the learning outcomes:

  • Show examples of different images that convey information, such as images to provide instructions, and to identify people and objects. Explain that such information needs to be provided using text alternatives, so that the purpose of the image can be understood without having to look at the image. Emphasize that these alternatives may require coordination among designers, developers, and content authors. For references on how to provide text alternatives for images, see G82: Providing a text alternative that identifies the purpose of the non-text content.
  • 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 different verification systems, such as CAPTCHA, to identify human beings trying to access a service or system. Explain that these verification systems need to support several modalities, including visual, auditory, and cognitive. For references on how to provide accessible CAPTCHA, see technique G143: Providing a text alternative that describes the purpose of the CAPTCHA and G144: Ensuring that the Web Page contains another CAPTCHA serving the same purpose using a different modality.

Ideas to Assess Knowledge for Topic

Optional ideas to support assessment.

  • Practical — Give students an image of text and ask them to cooperate with other team roles such as developers and content authors to ensure the image has an equivalent alternative text. Assess how students identify the need for alternative text for images of text.
  • Short Answer Questions — Present students with a situation where a human verification system needs to be used and ask them to provide various authentication alternatives for biometrics and CAPTCHA. Assess how students understand the need for providing various authentication alternatives for biometrics and CAPTCHA.

Topic: Complex Images

Complex images are those whose description requires more than a short phrase or sentence. Show examples of complex images, including diagrams and charts, and explain accessibility requirements that these images have, such as appropriate color contrast and appropriate text descriptions.

Explain that coordination among different team members is required to assess the use of complex images based on the overall context, so that the information of such images is perceived and understood visually and through the provided descriptions.

Learning Outcomes for Topic

Students should be able to:

  • apply appropriate color contrast for complex images
  • evaluate the use of complex images
  • select other ways to present the information contained in complex images, for example using tables, simpler images, and plain text
  • determine if and how complex images are operated using input devices, including mouse, keyboard, touch, and voice
  • define the placement and spacing for alternatives to complex images
  • define clear and consistent identification methods for complex image descriptions, including appropriate headings and expandable and collapsible components
  • design user experiences for complex images, including:
    • how to get to the image descriptions
    • how the content of the description should look like
    • if the descriptions could ultimately replace the image itself
  • identify related requirements for content authors to:
    • provide descriptive, equivalent textual information to understand complex images and graphics, including diagrams, charts, maps, and infographics
    • break down complex images into smaller and more manageable pieces, for example simpler images, tables, and plain text

Teaching Ideas for Topic

Optional ideas to teach the learning outcomes:

Ideas to Assess Knowledge for Topic

Optional ideas to assess knowledge:

  • Practical — Have students add complex images to a website, such as charts or diagrams, and ensure they have the required color contrast. Assess how students understand the contrast requirements for complex images.
  • Practical — Have students cooperate with developers and content authors to implement a map in a way that everybody can understand its meaning and interact with it. Assess how students identify the need for text alternatives for complex images and cooperate with other team members to ensure such alternatives exist.

Topic: Decorative Images

Decorative images are used for ornamental purposes and convey no information or function. Decorative images require empty text alternatives, so that they can be ignored by assistive technologies, and reduce noise. Explain that determining if an image is decorative is a responsibility shared with the content author.

Learning Outcomes for Topic

Students should be able to:

  • describe the differences between decorative and non-decorative images depending on the type of information conveyed by the image and the overall context
  • describe different ways to present information contained in an image in the surrounding content so that the image can be considered decorative
  • evaluate the potential distraction and cognitive overload from using too many decorative images and select decorative images that avoid distractions and cognitive overload
  • explain how the overuse of decorative images could slow down loading times and interaction for users
  • 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 render with the appropriate role is a developers’ responsibility.
  • Invite students to research how overuse of decorative images can impact some users. For example, too many decorative images can create distractions and cognitive overload, as well as slow down loading times.

Ideas to Assess Knowledge for Topic

Optional ideas to assess knowledge:

  • 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.
  • Practical — Give students and interface with too many decorative images and ask students to select the ones that avoid distractions, cognitive overload, and slow loading times. Assess how students balance the use of decorative images to avoid distractions, cognitive overload, and slow loading times.

Ideas to Assess Knowledge for Module

Optional ideas to assess knowledge:

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