[Draft] Module 5: Images and Graphics in [Draft] Designer Modules, Curricula on Web Accessibility

• Foundation Prerequisites
• Designer Module 1: Visual Design
• Designer Module 2: Information Design
• Designer Module 3: Navigation Design
• Basic knowledge of:
  • Visual Design
  • Prototyping
  • Responsive Design
  • Information Architecture

• Applied expertise in teaching:
  • WCAG Success Criterion 1.1.1 Non-Text Content
  • WCAG Success Criterion 1.4.5 Images of Text
  • WCAG Success Criterion 1.4.9 Images of Text (No Exception)
• In-depth knowledge of:
  • Foundation Prerequisites
  • Designer Module 1: Visual Design
  • Designer Module 2: Information Design
  • Designer Module 3: Navigation Design
  • Visual Design
  • Prototyping
  • Responsive Design
  • Information Architecture
  • Content Design
  • Technical Writing

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 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 mechanisms:
  • 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 contrast ratios for functional images

Teaching Ideas for Topic

Optional ideas to teach the learning outcomes:

• Show examples of different images used to convey functionality, for example for printing, searching, or saving a document. Explain that it is necessary to provide an equivalent, succinct text alternative that explains the function rather than a description of the image. For reference on how to provide a text alternative for an image conveying function, see technique G94: Providing short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content.

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 contrast ratios, to graphical buttons and links.

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 mechanisms:
  • 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 contrast ratio 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 CAPTCHA and biometrics, 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 use of too many informative images and justify the use of other ways to convey the information, 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 mechanisms 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 — Present students with 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 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.

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 contrast ratios 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:

• use appropriate contrast ratios for complex images
• evaluate the use of complex images and select other ways to present the information; for example, using tables, simpler images, and plain text
• determine if and how complex images are operated using input devices, including mouse, keyboard, voice, and touch
• consider placement and spacing for alternatives to complex images
• design clear and consistent identification mechanisms 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, and 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
• identify related requirements for content authors to 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:

• Provide examples of complex images and graphics, such as charts, diagrams, maps, and infographics. Explain that they need to have a contrast ratio 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 complex images also need to have text descriptions that allow people to understand and interact with 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.
• Practical — 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.

Decorative images are used for ornamental purposes and convey no information or function. Build on Designer Module 1: Visual Design to explain accessibility requirements such as use of color, ability to resize, and adaptability in the context of decorative images. 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 wwdecorative images that avoid distractions and cognitive overload
• explain how the overuse of decorative images could become distracting for some users and slow down loading times and interaction for other 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.

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.