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: Flexible Layout and 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: Text Styling

Explain how people with disabilities rely on different style properties, such as font sizes and spacing, to perceive contents.

Learning Outcomes for Topic

Students should be able to:

  • design user interfaces with clear and distinguishable styles for different components, such as links, buttons, form elements, or texts
  • design user interfaces with font sizes that enhance content readability
  • design user interfaces with adequate spacing to support readability and to help distinguish components from one another

Teaching Ideas for Topic

Optional ideas to teach the learning outcomes:

  • Demonstrate the use of styles for distinguishing user interface components from one another, such as links, buttons, form elements, and texts. Explain how people rely on font sizes, spacing, and typography to distinguish components from one another.
  • Demonstrate the use of different font sizes and explain how they affect readability of the content.
  • Show examples of different page layouts with and without adequate spacing. Explain how spacing allows to distinguish different user interface components and pieces of content from one another. Emphasize that spacing also allows for better readability of contents and for better identifications of the different parts of the user interface. apply adequate spacing, see @@@

Ideas to Assess Knowledge for Topic

Optional ideas to support assessment:

  • Practical — Students design a paper prototype with distinguishable styles that help perceive different contents. Assess how students use different style properties to make content perceivable and to distinguish components from one another.

Topic: Landmarks and Cues

Discuss strategies to provide mechanisms for users to perceive different web page regions. Present different strategies to complement different content types, such as visual and textual, through the use of visual and text cues.

Learning Outcomes for Topic

Students should be able to:

  • define page regions by using appropriate landmarks
  • design user interfaces with text cues to convey information provided through vision only, such as an asterisk to convey required form fields in a form
  • design user interfaces with focus indicators that allow people to tell where they are as they move through the web page and applications using the keyboard

Teaching Ideas for Topic

Optional ideas to teach the learning outcomes:

  • Show examples of different regions of web pages. Explain that the use of landmarks is needed for people to perceive such regions. Explain that defining landmarks is a designers’ responsibility, whereas implementing such landmarks is a responsibility shared with the developer.
  • Show examples of interfaces where information is provided through vision only, such as those with icons to convey when a store is open or closed and those with visual cues only to communicate that a product is sold out. Explain that some people cannot rely on visual means to obtain information, so text is needed for them 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.
  • Invite students to navigate a web page with appropriate focus indicators first, and then invite them to navigate 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 technique G149: Using user interface components that are highlighted by the user agent when they receive focus.

Ideas to Assess Knowledge

Optional ideas to support assessment:

  • Practical — Give students a web page and ask them to identify its regions and to define the appropriate landmarks for users to perceive such regions. Assess how students identify page regions and provide mechanisms for people to perceive such regions.
  • Practical &mdash: Give students examples of color alone used to provide information and ask them to provide text information and visual cues to supplement that information. Assess how students provide the necessary textual information and visual cues to supplement information provided exclusively with color.

Topic: Color

Describe how some people use color to understand and distinguish contents. Explain different ways to convey information that is conveyed using color alone, such as shapes or icons. Explain how contrast ratios are essential for people with low vision to perceive, distinguish, and understand contents.

Learning Outcomes for Topic

Students should be able to:

  • explain how appropriate use of color allow people with disabilities to read, understand, and distinguish user interface components
  • design user interfaces with other visual cues in addition to color, for example using different patterns, shapes, and icons
  • design user interfaces with texts and images of text that have a contrast ratio of at least 4.5:1 with respect to their background
  • design user interfaces with large-scale text and images of text that have a contrast ratio of at least 3:1 with respect to their background
  • design user interfaces with components and graphics that have a contrast ratio of at least 3:1 with respect to their background

Teaching Ideas for Topic

Optional ideas to teach the learning outcomes:

Ideas to Assess Knowledge for Topic

Optional ideas to support assessment:

  • Short Answer Questions — Give students a set of user interface components and ask them what the contrast ratio should be. Assess how students understand and distinguish contrast ratios for different user interface components.
  • Practical — Students design a paper prototype and apply appropriate contrast ratios to text, images of text, user interface components and graphics. Assess how students understand and apply contrast ratios based on the different user interface components that they are designing

Topic: Flexible Design

Explain how people with disabilities use different screen sizes, screen configurations, break points, and style sheets to identify, distinguish, and process contents.

Learning Outcomes for Topic

Students should be able to:

  • design user interfaces that support text resizing without loss of content and functionality
  • design user interfaces that support zooming and enlarging text in different viewport sizes and through multiple break-points
  • design user interfaces that support content view and operation in both portrait and landscape orientations
  • design user interfaces with target sizes and spaces to support tapping by people with mobility impairments and people using different input methods
  • design user interfaces that support customizing line height, as well as spacing between paragraphs, words, and letters

Teaching Ideas for Topic

Optional ideas to teach the learning outcomes:

  • Explain that people with low vision often need to resize text to be able to read it properly. This includes resizing text up to 200% using browsers functionality. 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 break-points by people with low vision. Explain that these break points often go beyond the traditional mobile, tablet, and desktop break-points.
  • 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 crucial for people who cannot change their device orientation due to mobility impairments.
  • 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.
  • Show examples of different user interfaces that support customizing line height as well as spacing between paragraphs, words, and letters to support readability.

Ideas to Assess Knowledge for Topic

Optional ideas to support assessment:

  • Practical — Students design different paper prototypes with different interface 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.

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