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 1: Visual Design in [Draft] Designer 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: Color

Explain how sufficient color contrast (contrast ratio in WCAG) is essential for people with disabilities to perceive, distinguish, and understand content.

Describe how some people rely on color to understand and distinguish content. Explain that some people cannot perceive color well or at all. Discuss different ways to supplement information presented using color, such as using shapes and icons.

Learning Outcomes for Topic

Students should be able to:

  • explain how appropriate use of color enables people with disabilities to read, understand, and distinguish components
  • determine sufficient color contrast for text, images of text, and controls
  • design text and images of text that have a color contrast of at least 4.5:1 with respect to their background
  • design large-scale text and images of text that have a color contrast of at least 3:1 with respect to their background
  • design components and graphics that have a color contrast of at least 3:1 with respect to their background
  • define layouts to enable users to change colors based on customized screen sizes, screen configurations, and style sheets
  • use visual cues in addition to text color, for example by using different patterns, shapes, and icons
  • use text to complement information provided visually

Teaching Ideas for Topic

Optional ideas to teach the learning outcomes:

Ideas to Assess Knowledge for Topic

Optional ideas to assess knowledge:

  • Short Answer Questions — Give students several components and ask them what the color contrast should be. Assess how students understand and distinguish sufficient color contrast for different components.
  • Practical — Have students design a prototype and apply sufficient color contrast to text, images of text, components, and graphics. Assess how students understand and apply sufficient color contrast based on the different components that they are designing.
  • Practical — Discuss examples of information presented using color. Ask students to supplement that information using other visual cues. Assess how students use shapes and icons to supplement information presented using color distinguishable.

Topic: Styles

Explain how people with disabilities rely on distinguishable and customizable style properties, such as font types, sizes, and spacing, to support readability.

Learning Outcomes for Topic

Students should be able to:

  • use clear and distinguishable styles for links, buttons, form labels and instructions, and text
  • define customizable style properties to support content readability, including:
    • font types
    • font sizes
    • spacing
    • colors

Teaching Ideas for Topic

Optional ideas to teach the learning outcomes:

  • Demonstrate the use of styles to distinguish links, buttons, and form labels and instructions, from plain text. Explain how people rely on font types, font sizes, spacing, and color to distinguish components.
  • Show examples of usable font sizes and explain how they support readability. Contrast previous examples with fonts that are not as easy to read. Emphasize that several user groups rely on customizable fonts to read and understand content properly.
  • Show examples of different page layouts with and without appropriate spacing. Explain how spacing allows for better readability of the content and for better identification of the different parts of the interface.

Ideas to Assess Knowledge for Topic

Optional ideas to assess knowledge:

  • Practical — Have students design a prototype with adaptable and distinguishable styles that help users perceive different content. Assess how students use different style properties such as font sizes and spacing to make content perceivable and to distinguish components from one another.

Topic: Orientation Cues

Explain how people with disabilities use visual and non-visual cues to orient on web pages and applications. For example, focus indicators as well as spacing and grouping to communicate regions. Present strategies to help students incorporate early planning for such cues within the visual design phase.

Learning Outcomes for Topic

Students should be able to:

  • design focus indicators that enable people to tell where they are as they move through web pages and applications using the keyboard
  • define page regions by using headings, spacing, and grouping
  • design layouts that enable presentation of visual and non-visual cues in different screen sizes, screen configurations, and style sheets
  • define methods to help users perceive and understand visual and non-visual cues, for example by using text, color, and icons to convey the status of tasks in a project

Teaching Ideas for Topic

Optional ideas to teach the learning outcomes:

  • Invite students to use a web page that has appropriate focus indicators first, and then invite them to use a web page without focus indicators. Explain how focus indicators allow people who rely on keyboard navigation to determine where they are as they move through web pages and applications. For reference on how to provide appropriate focus indicators, see techniques G149: Using user interface components that are highlighted by the user agent when they receive focus and G195: Using an author-supplied, highly visible focus indicator.
  • Show examples of different web page regions, such as header, navigation, main, and footer. Explain that several groups of people with disabilities rely on visual and programmatic cues to perceive such regions. Explain that defining the presentation of these cues is a designers’ responsibility, whereas implementing such cues and their semantics is a developers’ responsibility.
  • Show examples of interfaces where information is provided through vision only, such as those with icons and color to convey the status of different tasks in a project. Explain that some people cannot rely on visual means to obtain information. These users need text to understand the information provided. For references on how to complement information presented visually with text, see technique G96: Providing textual identification of items that otherwise rely only on sensory information to be understood.

Ideas to Assess Knowledge for Topic

Optional ideas to assess knowledge:

  • Practical — Ask students to define the visual presentation of focus indicators on a web page or application. Assess how students understand the importance of focus indicators for users to know where they are on a web page or application.
  • Practical — Give students a web page and ask them to define its regions. Assess how students define web page regions using a variety of methods, including headings, spacing, and grouping.
  • Short Answer Questions — Give students examples of orientation cues conveyed visually and ask them to provide other visual and non-visual cues to help understand the information. Assess how students provide several visual and non-visual cues to help users understand the information.

Topic: Flexible Layouts

Refer to responsive design techniques. Explain that other elements also contribute to an accessible user experience. Encourage consideration of how content sequence, focus indicators, and target size can be designed to adapt to different screen sizes, screen configurations, and style sheets.

Demonstrate approaches to balance the use of too many design elements to avoid potential overload and distraction for some users.

Learning Outcomes for Topic

Students should be able to:

  • design layouts to support text resizing without loss of content and functionality
  • design layouts to support text zooming and enlarging in different viewport sizes and through multiple breakpoints
  • design layouts that adapt their content view and operation to portrait and landscape orientations
  • design layouts with target sizes that adapt to different screen sizes, screen configurations, and style sheets, for example when creating responsive designs
  • design layouts to support user customization of line height, as well as spacing between paragraphs, words, and letters
  • define meaningful focus orders that adapt to different viewports, screen sizes, and multiple breakpoints
  • evaluate the overuse of design elements, in particular interactive widgets, images, and moving content
  • select elements that minimize distraction and cognitive overload

Teaching Ideas for Topic

Optional ideas to teach the learning outcomes:

  • Discuss with students the differences between web sites and applications that preserve content and functionality when resized up to 200% and those which do not. Explain that some people often need to resize text to read it properly. For references on how to ensure text resizes up to 200%, see technique G179: Ensuring that there is no loss of content or functionality when the text resizes and text containers do not change their width.
  • Discuss the use of multiple screen sizes, screen configurations, and style sheets by people with low vision. Explain that these configurations often go beyond the traditional mobile, tablet, and desktop breakpoints.
  • Show examples of user interfaces showing up in both portrait and landscape modes. Explain that the ability to show an interface both in portrait and landscape is essential for people who cannot change their device orientation due to mobility impairments.
  • Show examples of different user interfaces that support customizing line height as well as spacing between paragraphs, words, and letters to support readability.
  • Show examples of different target sizes and explain that some people have difficulty to tap smaller targets due to mobility impairments. Explain that target sizes need to be large enough to accommodate different people’s needs.

Ideas to Assess Knowledge for Topic

Optional ideas to assess knowledge:

  • Practical — Have students design different layouts considering text resizing, line height, spacing between paragraphs, words, and letters. Assess how students consider text resizing, line height, and spacing between paragraphs, words, and letters.
  • Practical — Have students design an interface that adapts to portrait and landscape modes. Assess how students understand the need for interfaces to adapt to both portrait and landscape modes.

Ideas to Assess Knowledge for Module

Optional ideas to assess knowledge:

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