[Draft] Module 3: Images and Graphics
in [page not found in this repository, no fallback text given]
Introduction
Courses based on this module:
- explain the use of accessible coding for images and graphics
- describe types of images from an accessibility perspective
- demonstrate how people with disabilities use text alternatives to access information contained in images and graphics
Learning Outcomes for Module
Students should be able to:
- explain how text alternatives enable people with disabilities to access information contained in images and graphics
- identify informative, textual, decorative, functional, and complex images
- mark up and write text alternatives for images
- use CSS properties to style text decorations instead of images of text
- use markup languages to convey mathematical expressions instead of images of text
- code mechanisms to provide additional descriptions for images and graphics
Competencies
Skills required for this module:
Students
- Prerequisites for Students
- Basic knowledge of:
Instructors
- Applied expertise in teaching:
- WCAG 2 Success Criterion 1.1.1 Non-text Content
- WCAG 2 Success Criterion 1.4.5 Images of Text
- WCAG 2 Success Criterion 1.4.9 Images of Text (No Exception)
- WCAG 2 Success Criterion 4.1.2 Name, Role, Value
- HTML
img
element - HTML
alt
attribute - HTML
longdesc
attribute - HTML
picture
element - CSS Specifications
- ARIA
img
role - WAI-ARIA attributes
aria-label
,aria-labelledby
, andaria-describedby
Figure
andfigcaption
elements- In-depth knowledge of Prerequisites for Students
Topics to Teach
Topics to support the teaching sequence:
Topic: Simple Images
Explain that simple images and graphics, such as informative, textual, and decorative, only require a short text alternative to describe them. Mention scenarios where text alternatives allow people to access information which would not be available otherwise. Relate these strategies to WCAG success criterion 1.1.1 Non-text Content.
Learning Outcomes for Topic
Students should be able to:
- code HTML elements
picture
,img
, and<input type="image">
, as well as SVG graphics, using the HTML attributesalt
,title
,aria-label
, oraria-labelledby
- explain what simple images, such as informative, textual, and decorative, mean in the context of Web accessibility
- explain how text alternatives are read aloud by text-to-speech technologies
- explain how text alternatives can be visualized from mobile devices when images are turned off due to data restrictions
- explain how text alternatives are used for better image indexing and ranking
Teaching Ideas for Topic
Optional ideas to teach the learning outcomes:
- Explain that the HTML attribute
alt
should contain concise and clear information about the image. State that it is not necessary to include the word “image” in the text alternative since that would be separately announced via the HTML elementimg
. Mention that when an image is decorative, the value for thealt
attribute should be empty (“”), and, whenever possible, the image should be included in the web page using CSS instead of the HTML elementimg
. Examples of how to usealt
to code text alternatives are provided in techniques H2: Combining adjacent image and text links for the same resource and H37: Using alt attributes onimg
elements. - Demonstrate the use of other ways to convey text alternatives, such as the HTML attributes
title
,aria-label
, oraria-labelledby
. Explain that these may not be well supported by old browsers and assistive technologies. Examples of how to usearia-label
andaria-labelledby
to provide descriptions for images are provided in techniques ARIA6: Using aria-label to provide labels for objects and ARIA10: Using aria-labelledby to provide a text alternative for non-text content. - Define informative, textual, and decorative images. Show examples of each, such as product prices, ornaments, or small pieces of textual information coded as an image. Show the same image in different web pages and explain that an image can belong to different types depending on the context. Descriptions of informative and decorative images are provided in the WAI tutorials on Decorative Images and Informative Images.
- Demonstrate the use of voice commands, keystrokes, and gestures provided by speech and mainstream technologies to navigate web pages through images. Explore advanced functionality that some tools provide, such as presenting all images in a list where users can select the image they are interested in. Examples of how people with disabilities interact with the Web are provided in Stories of Web Users.
- Explain that images may not be available because of data restrictions or slow connections. Turn off images using common extensions or the settings screen in most browsers. Show and compare pages with and without text alternatives. Emphasize how essential information is often missed due to the lack of text alternatives.
- Explain that text alternatives are one of the techniques used by search engines to determine what an image is about. Indicate that the more accurate an text alternative is, the better its image could rank.
Ideas to Assess Knowledge for Topic
Optional ideas to support assessment:
- Short Answer Questions — Students are asked about the different HTML and WAI-ARIA elements and attributes to provide text alternatives for images. Assess students’ knowledge of the different coding techniques to provide text alternatives for images.
- Practical — Students provide text alternatives for a given set of informative and decorative images. Assess how students relate a given image with its specific function within a website.
- Practical — Students are presented with the same image in different contexts and are asked to provide the corresponding text alternative for each. Assess how students take into account the context of an image to provide its text alternative.
Topic: Functional Images
Explain that functional images, such as images in links and buttons, provide functionality. Relate functionality of the image to its adjacent text.
Learning Outcomes for Topic
Students should be able to:
- code functional images using the HTML attributes
alt
or adjacent link text - write text alternatives for button images, link images, and image input types that describe the action these images are carrying out
- explain what functional images mean in the context of web accessibility
Teaching Ideas for Topic
Optional ideas to teach the learning outcomes:
- Explain that functional images serve to initiate an action, rather than to convey information. For an explanation of what a functional image is, see the WAI tutorials on Images Concepts.
- Show examples of button and image input types, such as those for printing or saving a document. Explain that their text alternatives need to refer to the action that the image conveys. Examples of several text alternatives for functional images are provided in the WAI tutorials on Functional Images.
- Show examples of adjacent link or button texts that may influence the text alternative for a functional image. Explain that when the adjacent text conveys the action performed by the image, a null text alternative should be provided.
Ideas to Assess Knowledge for Topic
Optional ideas to support assessment:
- Short Answer Questions — Students are asked what a functional image is. Assess students knowledge of what a functional image is.
- Practical — Students are presented with functional images with and without surrounding text and are asked to provide text alternatives accordingly. Assess how students provide text alternatives for functional images based on context.
Topic: Complex Images
Explain that complex images, such as charts, diagrams, and infographics, provide rich information and require longer text alternatives to describe them. Discuss mechanisms to provide additional descriptions for complex images. For example, the HTML elements figure
and figcaption
, or the WAI-ARIA attribute aria-describedby
. Mention that providing descriptions for a complex image is a shared responsibility among different team members: content authors, designers, and developers. Relate these mechanisms to WCAG success criteria 1.4.5 Images of Text, and 1.4.9 Images of Text (No Exception).
Learning Outcomes for Topic
Students should be able to:
- mark up additional descriptions for images using one of the following techniques:
- HTML elements
figure
andfigcaption
- WAI-ARIA attribute
aria-describedby
- HTML attribute
longdesc
[primarily supported in eBook publication]
- HTML elements
- style text decorations using CSS Transforms and CSS Fonts technologies instead of using images of text
- code mathematical expressions using the MathML language instead of using images of text
- categorize images based on the following types:
- textual
- complex
- summarize related requirements for authors to write meaningful text alternatives for textual and complex images
Teaching Ideas for Topic
Optional ideas to teach the learning outcomes:
- Discuss ways to provide additional descriptions for complex images and groups of images such as charts, diagrams, or screen shots of materials that are intended to be read as text. For example, the HTML elements
figure
andfigcaption
, the WAI-ARIA attributearia-describedby
or the HTML attributelongdesc
. Mention thatlongdesc
may not be well supported by some browsers or assistive technologies. Examples of how to describe complex images are provided in the WAI tutorials on Complex images and images of Text. - Explain that the MathML language can be used to code mathematical expressions on the Web. Emphasize that screen reader support for MathML on the Web is growing, but other people using assistive technology may need additional browser extensions to access contents in MathML. Examples of how to use the MathML language to code mathematical expressions are provided in the WAI tutorials on mathematical expressions.
- Explain that many visual effects can now be achieved by using CSS Transforms and CSS Fonts technologies, instead of embedding an image file with text into a web page. Examples of how to use CSS3 properties to style text decorations are provided in the WAI tutorials on Using CSS.
Ideas to Assess Knowledge for Topic
Optional ideas to support assessment:
- Practical — Students are asked to code descriptions for a set of given charts and graphics. Assess how students code descriptions for complex images.
- Practical — Students are presented with a set of images of text and are asked to code them using CSS Transforms and CSS Fonts technologies. Assess students’ knowledge of CSS Transforms and CSS Font technologies.
Ideas to Assess Knowledge for Module
Optional ideas to support assessment:
- Practical — Students are guided to use mechanisms that assistive technologies provide to move to next and previous image and to show all the images of a web page in an isolated list. Assess students’ knowledge of mechanisms of assistive technologies to move through images.
- Guided Quiz — Students are presented with a set of images in the context of a website and give their type and possible text alternative. Assess how students identify different types of images and provide text alternatives based on their purpose and context.
- Portfolio — Students add different types of images and graphics to the website they are building. Assess how students code images and graphics and how they provide text alternatives based on their knowledge or with the help of other roles.
Teaching Resources
Suggested resources to support your teaching:
- WAI Web Accessibility Tutorials — Shows how to develop web content that is 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.
- WCAG — Address accessibility of web content on desktops, laptops, tablets, and mobile devices.
- WAI ARIA — Provides an ontology of roles, states, and properties that define accessible user interface elements and can be used to improve the accessibility and interoperability of web content and applications.
- HTML specification — The core markup language for the web, HTML, as well as numerous APIs like Web Sockets, Web Workers, localStorage, etc.
- Video Captions — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities.