Module 1: Visual Design in 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 contrast ratio is essential for people with disabilities to perceive, distinguish, and understand content.

Describe how some people rely on color differences to understand and distinguish content. Explain that some people perceive color in different ways, and that some may not perceive color 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 contrast ratio for text, images of text, and controls
  • design text and images of text that have a contrast ratio of at least 4.5:1 with respect to their background
  • design large-scale text and images of text that have a contrast ratio of at least 3:1 with respect to their background
  • design user interface components and graphics that have a contrast ratio of at least 3:1 with respect to their background
  • define layouts that enable users to change colors based on customized screen sizes, screen configurations, and style sheets
  • specify 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 contrast ratio must be. Assess how students understand and distinguish sufficient contrast ratio for different components.
  • Practical — Have students design a prototype and apply sufficient contrast ratio to text, images of text, components, and graphics. Assess how students understand and apply sufficient contrast ratio 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, spacing, and text alignment to support readability.

Learning Outcomes for Topic

Students should be able to:

  • specify clear and distinguishable styles for links, buttons, form labels and instructions, and text
  • specify customizable style properties to support content readability, including:
    • font types
    • font sizes
    • spacing
    • text alignment
    • 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.
  • Demonstrate the use of custom style properties to increase the contrast ratio in a web page, for example properties in user style sheets and functionality in operating systems. Explain that use of these tools affects how the page is viewed.
  • 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.
  • Show examples of text aligned to the left, to the right, and justified. Explain that it is difficult for some users to read justified text due to the uneven spacing created by the justification. Therefore, text should align to only one side where possible to enhance readability. For reference, see technique G169: Aligning Text on Only One Side.

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 types, sizes, spacing, and text alignment 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 themselves on web pages and applications. For example, focus indicators to show interactive elements and 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 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
  • specify 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 designer’s responsibility, whereas implementing such cues and their semantics is a developer’s responsibility.
  • Show examples of interfaces that convey information 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 design 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 and screen configurations.

Demonstrate approaches to detect the overuse of design elements to minimize 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
  • specify meaningful focus orders that adapt to different viewports, screen sizes, and multiple breakpoints
  • evaluate the potential 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 must be large enough to accommodate different people’s needs.
  • Invite students to research how overuse of design elements can cause distractions and cognitive overload for some users. For example, overuse of interactive widgets, images, and moving content can make some users overwhelmed.

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.
  • Short Answer Questions — Ask students about the elements that can cause distractions and cognitive overload. Assess how students identify interactive widgets, images, and moving content as elements that can cause distractions and cognitive overload.

Ideas to Assess Knowledge for Module

Optional ideas to assess knowledge:

Teaching Resources

Suggested resources to support your teaching:

Back to Top