[Draft] Module 1: Visual Design [WIP] in [Draft] Designer Modules, Curricula on Web Accessibility

Introduction

Courses based on this module should:

demonstrate how people with disabilities rely on layouts that adapt to different screen sizes, screen configurations, and style sheets
explain accessibility requirements for color, layout, spacing, and position of components

Learning Outcomes for Module

Students should be able to:

explain how people with disabilities rely on designs that adapt to different colors, layouts, spacing, and positions
design layouts with sufficient color contrast for text, images of text, and controls
design clear and distinguishable focus indicators, for example using borders, color, and highlighting
design layouts that adapt to different font sizes and spacing set by the user in browser and operating system settings
design layouts that adapt to different screen sizes, screen configurations, and user style sheets
use landmarks to group related content, including headings, spacing, and styling
use visual and non-visual cues to convey information, including text, color, patterns, and icons
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
identify related requirements for developers to apply the necessary semantics to interface components

Competencies

Skills required for this module:

Students

Foundation Prerequisites
Basic knowledge of:
- Visual Design
- Prototyping
- Responsive Design

Instructors

Applied expertise in teaching:
In-depth knowledge of:
- Foundation Prerequisites
- Visual Design
- Prototyping
- Responsive Design

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 that is 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:

Show examples of sufficient and insufficient color contrast for text. Explain that color contrast 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 sufficient color contrast to text (including images of text), see technique G18: Ensuring that a color contrast 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 color contrast of at least 3:1.
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 these users require additional methods to convey that information. For references on how to supplement information conveyed through color, see technique G182: Ensuring that additional visual cues are available when text color differences are used to convey information.

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 be able 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: Landmarks and Cues

Explain how people with disabilities perceive different web page regions and content through text, landmarks, and cues. Present strategies to plan for the inclusion of such text, landmarks, and 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 landmarks, such as headings
design layouts that enable to present landmarks and cues in different screen sizes, screen configurations, and style sheets
use text cues to supplement information provided through vision only, for example available dates in a calendar represented with a different background color

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 landmarks to perceive such regions. Explain that defining landmarks and their styles is a designers’ responsibility, whereas implementing such landmarks 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 and those with colors to convey available dates in a calendar. 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.

Ideas to Assess Knowledge for Topic

Optional ideas to assess knowledge:

Practical — Give students a web page and ask them to define the appropriate landmarks and their styling. Assess how students define landmarks and regions using a variety of methods, including semantics and styling.
Practical &mdash: Give students examples of information conveyed visually and ask them to provide text to help understand the information. Assess how students provide the necessary textual information to supplement information 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 interactions when using different screen sizes, screen configurations, and style sheets. Emphasize that these behaviors need to be planned early on in the visual design phase.

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
design meaningful focus orders that adapt to different viewports, screen sizes, and multiple breakpoints

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.

Ideas to Assess Knowledge for Module

Optional ideas to assess knowledge:

Portfolio — Students design a web page. Assess how students use customizable color, layout, spacing, and position to support content perception, identification, and readability.

Teaching Resources

Suggested resources to support your teaching:

Designing for Web Accessibility — Tips for user interface and visual design.
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.
Keyboard Compatibility (Web Accessibility Perspective) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities.
Colors with Good Contrast (Web Accessibility Perspective) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities.
Clear Layout and Design (Web Accessibility Perspective) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities.
Customizable Text (Web Accessibility Perspective) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities.
WCAG — Address accessibility of web content on desktops, laptops, tablets, and mobile devices.