Skip to content

designer modules outline

daniel-montalvo edited this page Mar 1, 2021 · 26 revisions

Designer Modules

This is an outline for the designer modules. It contains proposals for module titles and learning outcomes at a module level.

[Draft] Module 1: People with Disabilities in User Research

Students should be able to:

  • describe how involving users with disabilities early and throughout in the design and development process can lead to overall improved usability for everybody, including people without disabilities
  • ensure people with disabilities are included in design methodologies and techniques, for example in use cases, user analysis, personas, scenarios, and usability testing
  • identify different groups of people with disabilities and explain strategies they use to interact with the Web
  • ensure that collected user input in user research includes different groups of users with disabilities and various levels of experience using the Web
  • ensure informed consent and other ethical considerations in research practice are observed when working with people, including people with disabilities
  • ensure people with disabilities who participate in user research always understand the purpose of the research, and are aware of their right to opt out at any time if so desired

[Draft] Module 2: Colors and Styles

Students should be able to:

  • explain how people with disabilities rely on colors and styles to identify and distinguish different user interface components
  • create designs that allow for adequate contrast ratios between foreground user interface components, such as text, images of text, and controls and their corresponding background
  • ensure distinguishable styles are used to identify different components, such as text, links, buttons, or form elements
  • create designs that allow for clear and distinguishable focus indicators, for example using surrounding lines, background color, and highlighting
  • ensure that different page regions are conveyed using distinguishable styles
  • ensure flashing content is below the general flash and red flash thresholds, or that there is no content that flashes more than three times in a second
  • ensure additional mechanisms are available apart from color alone to convey information, such as labels and icons

[Draft] Module 3: Layout and Spacing

Students should be able to:

  • explain how people with disabilities rely on layout and spacing to orient themselves in web pages and applications
  • ensure page regions are placed where expected depending on their type and function, for example, page headers at the top and page footers at the bottom
  • ensure headings are nested according to the hierarchical structure of the page and describe the topic of the section they entitle
  • ensure white space and proximity help users determine the relations between different page regions and contents
  • ensure touch target sizes that are at least 44 by 44 CSS pixels
  • ensure meaningful sequence is preserved when using different viewport sizes or different devices to access content
  • create designs that allow to preserve content and functionality when line height as well as spacing between paragraphs, words, and letters are modified by the user
  • create designs that allow text resizing up to 200% without loss of content and functionality
  • create designs that do not restrict the content view and operation to a single display orientation, such as portrait or landscape

[Draft] Module 4: Navigation and Operability

Students should be able to:

  • explain strategies that people with disabilities use to navigate and operate web pages
  • create designs that allow for multiple navigational mechanisms, such as menus, search boxes, breadcrumb trails, and sitemaps
  • create designs that allow users to bypass blocks of repeated content
  • create designs that allow for mechanisms to stop, adjust, and extend time limits
  • create designs that allow for mechanisms to pause, stop, or hide any moving, blinking, scrolling, or auto-updating content, such as animations or carousels
  • create designs that allow for mechanisms to stop or control the volume of audio that plays automatically
  • ensure interactions do not rely solely on multipoint or path-based gestures, such as swipe or pinch
  • ensure that mechanisms to undo or abort an action carried out with pointer operations are always available
  • identify related requirements for developers to ensure that navigational mechanisms are operable using the keyboard and other input devices

[Draft] Module 5: Informational Design

Students should be able to:

  • explain how people with disabilities rely on different means, structures, and techniques for presenting information, such as textual, graphical, tabular, audio, or video information
  • identify and describe different uses of text, such as for labels, static content, or dynamic messages
  • describe different ways to complement information presented in text, such as using graphics, color, or shape
  • identify and describe different types of images from an accessibility perspective, such as informative, textual, decorative, functional, and complex images
  • identify and describe different types of tables from an accessibility perspective, such as layout, simple, and complex tables
  • identify the different types of multimedia content (for example audio or video content), and relate each of them to the user needs of people with disabilities
  • provide appropriate text alternatives for images included in the design phase, such as logos or graphical components
  • provide text that allows users to identify graphical interactive elements such as links or menu items
  • create designs that allow to provide accurate descriptions for components such as complex tables, charts, or infographics
  • create designs that allow to provide alternatives to multimedia content, such as transcripts for audio or audio described content,
  • identify related requirements for developers to ensure that table header cells are programmatically associated to their corresponding data cells
  • identify related requirements for developers to ensure alternatives and descriptions are programmatically associated to their corresponding component

[Draft] Module 6: Instructions and Feedback

Students should be able to:

  • explain how people with disabilities rely on instructions and feedback to understand and interact with components such as forms and widgets
  • provide clear and distinguishable labels that allow to identify different components
  • provide overall instructions to help users understand and interact with forms and widgets, such as:
    • allowed data formats
    • required and optional input
    • explanations of what will happen when a change in a control results in a change of context
    • ways to stop and resume sessions
  • provide overall instructions about existing time limits in a form and provide specific feedback when such time limits are about to expire
  • provide clear instructions about the current step and about the total number of steps involved in a multi-step form
  • provide meaningful and descriptive notification messages about errors, successes, or any other event resulting from user input
  • ensure that notification messages are easy to understand and can be distinguished from any other component
  • provide clear warnings about imminent time limits,, and ensure mechanisms are available to stop and extend time limits
  • provide suggestions for error correction when they are known
  • create designs that allow for mechanisms to reverse, check, and confirm submissions in legal or financial transactions
  • identify related requirements for developers to ensure that labels, instructions, and feedback can be programmatically associated with their corresponding control or component

[Draft] Module 7: Labels and Widgets

Students should be able to:

  • explain strategies that people with disabilities use to identify, operate, and interact with widgets
  • ensure that custom widgets have appropriate labels that describe their purpose
  • ensure that meaningful sequence and clear focus indicators for custom widgets are provided through the widget's lifetime
  • create designs for custom widgets that support interaction using multiple input devices, such as keyboard,
  • define custom interaction patterns, such as where to place focus when a dialog is open or closed, and what the focus management should be within those dialogs
  • define mechanisms that allow users to obtain information about custom interaction patterns, such as specific keyboard shortcuts for applications and expected behavior of custom widgets
  • identify related requirements for developers to create designs using native HTML elements to the extent possible and describe their benefits in relation to non-native elements
  • identify related requirements for developers to ensure that states and properties of custom widgets, such as expanded, collapsed, visible, or hidden, are distinguishable both visually and programmatically
  • identify related requirements for developers to write code for specific keyboard interactions that custom widgets may require