[Draft] Module 5: Images and Graphics in [Draft] Designer Modules, Curricula on Web Accessibility
Introduction
Courses based on this module should:
- explain strategies that people with disabilities use to access information contained in images and graphics
- explain accessibility requirements related to images and graphics, including text alternatives and color contrast
Learning Outcomes for Module
Students should be able to:
- explain how images and graphics help people with disabilities to process information, identify content, and understand functionality
- explain how text alternatives are essential for people with disabilities to understand the information contained in images
- define meaningful and consistent text alternatives for functional images, for example those included in buttons, links, icons, and logos
- define consistent imagery to help users recognize the purpose of icons, thumbnails, and other graphical components
- explain the issues associated with perception, interpretation, and rendering of images of text
- explain how to avoid images of text by using technologies that achieve the desired visual presentation wherever possible
- evaluate the potential distraction and cognitive overload from using too many images and select alternative ways to provide the information, including tables and plain text
- identify related requirements for:
- developers to code images and text alternatives appropriately
- content authors to provide appropriate descriptions for images, including charts, diagrams, and other complex graphics
Competencies
Skills required for this module:
Students
- Foundation Prerequisites
- Prior Designer Modules
- Basic knowledge of:
- Visual Design
- Prototyping
- Responsive Design
- Information Architecture
Instructors
- Applied expertise in teaching:
- In-depth knowledge of:
- Foundation Prerequisites
- Prior Designer Modules
- Visual Design
- Prototyping
- Responsive Design
- Information Architecture
- Content Design
- Technical Writing
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 methodss:
- 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:
- Show examples of different images used to convey functionality, for example for printing, searching, or saving a document. Explain that these images need 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.
- Invite students to research the most common iconography and naming for elements such as print, save, and search. Explain that these iconography and names need to be consistent throughout the website.
- Refer back to Designer Module 1 Visual Design, Topic Color to explain color contrast requirements for functional images.
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 methodss:
- 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 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 issues associated to accessing information contained in informative images and select other ways to convey the information where 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 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: 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 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, 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:
- Provide examples of complex images and graphics, such as charts, diagrams, maps, and infographics. Refer back to Module 1: Visual Design, Topic: Color. Explain that they need to have a color 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 color 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 color contrast. 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.
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 uveruse 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:
- Short Answer Questions — Ask students which types of images require which color contrast ratios. Assess how students understand the different types of images and their color contrast requirements.
- Portfolio — Students design the imagery for a website. Assess how students include accessibility requirements in the images in graphics they design, for example color contrast, text alternatives that belong to the design phase, and placeholders for any other text alternative that is planned for later stages of the design and development process.
Teaching Resources
Suggested resources to support your teaching:
- Designing for Web Accessibility — Tips for user interface and visual design.
- Images (WAI Web Accessibility Tutorials) — Shows how to provide alternatives to images that are accessible to people with disabilities.
- How People with Disabilities Use the Web — Provides stories of people with disabilities using the Web; describes types of disabilities and some of the barriers that people encounter using the Web; and introduces types of assistive technologies and adaptive strategies that some people use.
- Keyboard Compatibility (Web Accessibility Perspectives) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities.
- Colors with Good Contrast (Web Accessibility Perspective) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities.
- Clear Layout and Design (Web Accessibility Perspective) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities.
- WCAG — Address accessibility of web content on desktops, laptops, tablets, and mobile devices.