[Draft] Module 1: Flexible Layout and Design in [Draft] Designer Modules, Curricula on Web Accessibility
Introduction
Courses based on this module should:
- explain how people with disabilities use different screen sizes, screen configurations, break points, and style sheets to identify, distinguish, and process contents
- explain accessibility requirements for user interface components that relate to color, layout, spacing, and position
Learning Outcomes for Module
Students should be able to:
- explain how people with disabilities identify and distinguish user interface components based on different features, such as color, layout, spacing, and position
- design user interfaces with headings, landmarks, text cues, patterns, and icons to supplement information conveyed through color alone
- design user interfaces with adjustable font sizes and adequate spacing to support readability
- design user interfaces with appropriate contrast ratios for text, images of text, and controls
- design user interfaces with clear and distinguishable focus indicators, for example using borders, background color, and highlighting
- design user interfaces that support placement of different regions and user interface components where users expect them
- identify related requirements for developers to apply the necessary semantics to user interface components
Competencies
Skills required for this module:
Students
- Prerequisites for students
- Basic knowledge of:
- Visual Design
- Responsive Design
Instructors
- Applied expertise in teaching:
- WCAG Success Criterion 1.1.1 Non-text Content
- WCAG Success Criterion 1.3.1 Info and Relationships
- WCAG Success Criterion 1.3.2 Meaningful Sequence
- WCAG Success Criterion 1.3.3 Sensory Characteristics
- WCAG Success Criterion 1.3.4 Orientation
- WCAG Success Criterion 1.4.1 Use of Color
- WCAG Success Criterion 1.4.3 Contrast (Minimum)
- WCAG Success Criterion 1.4.4 Resize Text
- WCAG Success Criterion 1.4.6 Contrast (Enhanced)
- WCAG Success Criterion 1.4.10 Reflow
- WCAG Success Criterion 1.4.11 Non-Text Contrast
- WCAG Success Criterion 1.4.12 Text Spacing
- WCAG Success Criterion 2.4.3 Focus Order
- WCAG Success Criterion 2.4.6 Headings and Labels
- WCAG Success Criterion 2.4.7 Focus Visible
- In-depth knowledge of:
- Prerequisites for students
- Visual Design
- Responsive Design
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:
- Show examples of interfaces where information is conveyed exclusively with differences in color, such as a form where required fields are marked in red. Explain that some users cannot perceive color well or at all, so alternative methods to convey that information are required. For references on how to convey information without using color alone, see technique G182: Ensuring that additional visual cues are available when text color differences are used to convey information.
- Show examples of different foreground and background color combinations. Explain how contrast ratios between foreground and background allow users to perceive content and distinguish components from one another.
- Show examples of how different pieces of text are perceived depending on their background color. Explain that contrast ratios for text (including images of text) need to be at least 4.5:1 with respect to their background. For references on how to apply contrast ratios to text (including images of text), see technique G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text.
- Show examples of different interactive components, such as buttons and links, and explain that they should have a contrast ratio of at least 3:1. For techniques on how to add contrast ratios for graphics and interface components, see technique G195: Using an author-supplied, highly visible focus indicator.
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:
- Portfolio — Students design a prototype of a web page. Assess how students use color, layout, spacing, and position to support content perception and identification.
Teaching Resources
Suggested resources to support your teaching:
- @@@
- How People with Disabilities Use the Web — Describes some of the barriers that people encounter using the Web; and introduces types of assistive technologies and adaptive strategies that some people use.
- WCAG — Address accessibility of web content on desktops, laptops, tablets, and mobile devices.