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 3: Images and Graphics

Introduction

Courses based on this module:

Learning Outcomes for Module

Students should be able to:

Competencies

Skills required for this module.

Students:

Instructors:

Topics to Teach

Optional topics to achieve the learning outcomes.

Topic: Simple Images

Explain the purpose and scope of simple images and graphics, for example, functional, informative, and decorative. Mention scenarios where alternative texts allow people 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 attributes alt, title, aria-label, or aria-labelledby
  • define the purpose and scope of simple images, such as functional, informative, and decorative images
  • explain how text alternatives are read aloud by text-to-speech technologies
  • explain how alternative texts 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 alternative text since that would be separately announced via the HTML element img. Mention that when an image is decorative, the value for the alt attribute should be empty (“”), and, whenever possible, the image should be included in the web page using CSS instead of the HTML element img. For reference on how to use alt to code alternative texts, see techniques H2: Combining adjacent image and text links for the same resource and H37: Using alt attributes on img elements.
  • Demonstrate use of other ways to convey alternative texts, such as the HTML attributes title, aria-label, or aria-labelledby. Explain that these may not be well supported by old browsers and assistive technologies. For reference on how to use aria-label and aria-labelledby to provide descriptions for images, see 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 examples of functional, informative, and decorative images and define their scope and purpose. Show the same image in different web pages and explain that an image can belong to different types depending on the context. For references on functional, informative, and decorative images, see the WAI website tutorials, Decorative Images, Informative Images, and Functional Images.
  • Demonstrate use of commands, keystrokes, or gestures of text-to-speech technologies to move to next or previous image. Explore advanced functionality which presents all images in a list where users can select the image they are interested in. For reference on how people with disabilities interact and navigate web pages, see 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 alternative texts. Emphasize how essential information is often missed due to the lack of alternative texts.
  • Explain that alternative texts are one of the techniques used by search engines to determine what an image is about. Indicate that the more accurate an alternative text is, the better your images 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 alternative texts for images. Assess students’ knowledge of the different coding techniques to provide alternative texts for images.
  • Practical — Students provide alternative texts for a given set of functional, 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 alternative text for each. Assess how students take into account the context of an image to provide its alternative text.

Topic: Complex Images

Describe mechanisms to provide additional descriptions for complex images. For example, the HTML elements figure and figcaption, or the WAI-ARIA attribute aria-describedby. Emphasize that some additional descriptions may be provided by content authors. 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 and figcaption
    • WAI─ARIA attribute aria-describedby
    • HTML attribute longdesc
  • Style text decorations using CSS Transforms and CSS Fonts technologies instead of using images of text
  • code mathematical expressions with the MathML language instead of using images of text
  • categorize images based on the following types:
    • textual
    • complex

Teaching Ideas for Topic

Optional ideas to teach the learning outcomes:

  • Explain that sometimes alternative texts are not enough to convey the information of an image. Discuss ways to provide additional descriptions for complex images and groups of images, for example the HTML elements fig and figcaption, and the WAI-ARIA attributes aria-describedby or the HTML attribute longdesc. For reference on how to describe complex images see the WAI website tutorials, Complex images.
  • 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. For reference on using CSS3 properties to style text decorations, see the WAI website tutorials, Using CSS.
  • 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 assistive technology users may need additional browser extensions to access contents in MathML. For reference on how to use the MathML language to code mathematical expressions, see the WAI website tutorials, mathematical expressions example.

Ideas to Assess Knowledge for Topic

Optional ideas to support assessment.

  • Practical — Students are shown charts and graphics without descriptions and are asked to provide them. Assess how students provide adequate descriptions for complex images.
  • Practical — Students are presented with a set of images of texts 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.

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