Module 3: Images in Developer 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: Text Alternatives

Demonstrate how text alternatives allow people to access information included in images. Explain how text alternatives can be presented in different ways, for example visually in different text sizes, through text-to-speech, as braille, and as symbols. Explain different coding techniques to provide text alternatives for images.

Learning Outcomes for Topic

Students should be able to:

  • explain how text alternatives for images are processed by assistive technologies and how they can be presented to people with disabilities in different ways, such as text, text-to-speech, braille, and symbols
  • identify images that convey information, including images of text, versus images that are purely decorative
  • write markup for informative images using the HTML attributes alt and title, and WAI-ARIA attributes aria-label and aria-labelledby, and describe how these attributes are processed by assistive technologies to provide text alternatives
  • write markup for decorative images using empty text alternatives and using CSS so that they are ignored by assistive technologies
  • describe related requirements for content authors to provide short text alternatives for informative images

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 why it is not necessary to include the word “image” in the text alternative because the HTML element img is already announced by assistive technologies. Mention that decorative images should have empty (“”) values in the alt attributes, or that they should be included in the web page using CSS instead, so that they are ignored by assistive technologies. Examples of how to use alt to code text alternatives are provided in techniques H2: Combining adjacent image and text links for the same resource and H37: Using alt attributes on img elements.
  • Demonstrate other ways to provide text alternatives, such as the HTML attribute title and WAI-ARIA attributes aria-label and aria-labelledby. Explain that these may not be well supported by older browsers and assistive technologies. Examples of how to use aria-label and aria-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.
  • Show different examples of informative images (including images of text) and contrast them with decorative images. Explain how context can affect the meaning of the same image. Emphasize how each context may require a different text alternative, including an empty text alternative when the image is decorative. Descriptions of informative and decorative images are provided in the WAI tutorials on Decorative Images and Informative Images.

Ideas to Assess Knowledge for Topic

Optional ideas to support assessment:

  • Short Answer Questions — Ask students 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 — Give students the same image in different contexts and ask students to provide the corresponding text alternative for each. Assess how students consider the context of an image to provide its text alternative.

Topic: Functional Images

Explain why images that indicate functionality, such as images in links and buttons, require text alternatives that describe the purpose of the function rather than to describe the image itself. Explain how the text alternative depends on the context of the image, such as any adjacent text.

Learning Outcomes for Topic

Students should be able to:

  • write text alternatives for button images and image input types that describe the action these images are carrying out
  • write text alternatives for images in links that, along with any adjacent link text, describe the action the links are carrying out
  • write text alternatives that are consistent across the content so that the same function is recognized when it is placed in different places of the content
  • write markup for functional images using the HTML attributes alt and title, and WAI-ARIA attributes aria-label and aria-labelledby, and describe how these attributes are processed by assistive technologies to provide text alternatives

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. An explanation of functional images is provided in the WAI tutorials on Images Concepts.
  • Show examples of button and image input types, such as those for printing and 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 and 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 — Ask students what a functional image is. Assess students’ knowledge of what a functional image is.
  • Practical — Give students functional images with and without surrounding text and ask students 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, including providing these descriptions for everyone directly in the content.

Learning Outcomes for Topic

Students should be able to:

  • write markup for additional descriptions for images using one of the following techniques:
    • HTML elements figure and figcaption (and HTML attribute alt when individual images require specific descriptions)
    • WAI-ARIA attribute aria-describedby
    • HTML attribute longdesc (in certain contexts, such as ePub)
  • style text using CSS Transforms and CSS Fonts instead of using images of text
  • write code to update text alternatives when images are changed dynamically, including animations
  • explain how to provide accessible charts, diagrams, and infographics by using SVG instead of non-scalable images
  • explain how to provide accessible mathematical expressions by using MathML instead of using images of text
  • describe related requirements for designers to provide charts, diagrams, and infographics that are easy to understand
  • describe 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:

  • Explain ways to provide additional descriptions for complex images and groups of images such as charts, diagrams, and screen shots of materials that are intended to be read as text. For example, the HTML elements figure and figcaption, the WAI-ARIA attribute aria-describedby and the HTML attribute longdesc. Explain that the alt attribute may be also advised if there are individual images within those groups of images that require specific descriptions. Mention that longdesc may not be well supported by some browsers and assistive technologies. Examples of how to describe complex images are provided in the WAI tutorials on Complex images and images of Text.
  • Discuss how working with the content authors and designers can often lead to simpler ways of communicating the information for everyone. Also discuss how descriptions for complex images benefit many people, so that providing these descriptions directly in the content is often more beneficial than providing these as text alternatives for users of assistive technologies only.
  • Demonstrate how SVG can be used to provide graphics, including animations. Discuss the support for SVG in browsers and assistive technologies, as well as authoring tools to create such graphics. Explain the benefits of graphics provided as SVG, which allows them to be resized without pixelating, allows text and objects within the image to be accessed by assistive technologies, and allows the presentation to be customized.
  • Demonstrate how MathML can be used to code mathematical expressions. Emphasize that screen reader support for MathML is growing, but others 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.
  • Demonstrate that many visual effects can now be achieved by using CSS Transforms and CSS Fonts, instead of using images of text. Explain the benefits of using real text, which can be resized and adapted, as opposed to images that do not support such uses. 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 — Ask students to code descriptions for a set of given charts and graphics. Assess how students code descriptions for complex images.
  • Practical — Give students a set of images of text and ask students to code them using CSS Transforms and CSS Fonts. Assess students’ knowledge of CSS Transforms and CSS Font technologies.
  • Practical — Give students charts, diagrams, and infographics and ask students to code them using SVG, providing descriptions as appropriate. Assess students’ knowledge of how to code graphics using SVG and how to provide their descriptions when necessary.

Ideas to Assess Knowledge for Module

Optional ideas to support assessment:

Teaching Resources

Suggested resources to support your teaching:

Back to Top