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 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 — 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 with students and ask them 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 — 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 orient on web pages and applications using text and visual cues, including focus indicators, as well as spacing and grouping to communicate regions. Present strategies to plan for the inclusion of such cues early in 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 appropriate visual and non-visual cues, such as headings
  • design layouts that enable to present visual and non-visual cues in different screen sizes, screen configurations, and style sheets
  • use text cues to supplement information provided through vision only, for example using text and icons to convey when a form field is required

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 using the keyboard only to determine where they are as they move through web pages and applications using the keyboard only. 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 to convey when a form field is required. Explain that some people cannot rely on visual means to obtain information, so they 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 and cues. Assess how students define regions and cues using a variety of methods, including semantics and styling.
  • Short Answer Questions — Give students examples of orientation cues conveyed visually and ask them to provide text to help understand the information. Assess how students provide the necessary textual information to supplement orientation cues conveyed visually.

Topic: Flexible Layouts

Explain how people with disabilities rely on layouts that adapt to different screen sizes, screen configurations, and style sheets to identify, distinguish, and process content. Demonstrate how content sequence, focus indicators, and target sizes adapt to different screen sizes, screen configurations, and style sheets. Emphasize that designers need to plan for these features early on in the visual design phase.

Demonstrate how too many design elements can cause overload and distraction for some users. Demonstrate approaches to balance the use of too many design elements.

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
  • 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 use of too many design elements, in particular interactive widgets, images, and moving content) on a page, and select elements that avoid potential 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 important 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 tap targets and explain that some people have difficulty to tap smaller targets due to mobility impairments. Explain that tap targets need to be large enough to accommodate different people’s needs.

Ideas to Assess Knowledge for Topic

Optional ideas to assess knowledge:

  • Practical — 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 — 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/.