4. Design Guide

4.1 Introduction

This guide provides assistance making web sites and applications friendly for people with cognitive and learning disabilities. The patterns in this guide provide practical guidance to improve the accessibility of designs and the design process.

The objectives and patterns presented here provide supplemental guidance beyond the requirements of The Web Content Accessibility Guidelines WCAG [WCAG22]. They are intended to address barriers that could not be included in the normative WCAG [WCAG22] specification and may not otherwise be addressed.

This guide is divided into design objectives. An outline of these objectives can also be found in the summary section. Simply understanding the objectives and related user stories may help designers make content more accessible to some users with cognitive and learning disabilities.

Each objective contains a number of practical patterns (repeated designs for controls and other elements) that describe what to do to address user needs. Implementing these patterns is essential for some people with cognitive and learning disabilities to be able to use content independently.

4.2 Objective 1: Help Users Understand What Things are and How to Use Them

Users with cognitive and learning disabilities may have trouble with orientation and learning. This can mean people get disoriented in a site.

Learning new things and remembering new information is especially difficult for people with cognitive and learning disabilities. They can also struggle or be unable to learn new design patterns. Make controls, icons and elements simple and conventional to help.

Make it clear to users what things are and how to use them. This includes clearly indicating the purpose of:

  • a site,
  • section of a site,
  • page,
  • section of a page, and
  • controls.

Use headers, labels, and other signposts to help users know the purpose of the page, region, or control.

Help users understand how to use controls and elements on each page.

Use familiar design patterns, terms, and icons to help users who struggle to remember new designs. Ensure the look, location, and interaction of controls and other elements are familiar and consistent across the site.

Show a clear relationship between controls and the content they effect to help users understand the effect of possible actions and reduce potential confusion.

4.2.1 Make the Purpose of Your Page Clear (Pattern)

4.2.1.1 User Need

I need to know the context and purpose of the page.

Related User Story: Clear Purpose.

4.2.1.2 What to Do

Help the user know the purpose of the content. Use:

4.2.1.3 How it Helps

This helps many people, including those with impaired memory and attention as well as anyone who is easily distracted due to age-related forgetfulness and AD(H)D.

For example, someone with mild dementia is using online shopping. They get distracted and then when they look at the screen again they have forgotten what they were doing. A clear heading at the top of each page shows clearly what the page is about and what they are doing.

In another example, a user with AD(H)D is looking for information in a video. They can tell by the video title that this video has the information they need.

4.2.1.4 More Details

Headings clarify the purpose of this specific page.

When possible, provide information to help users understand how they got to the page. For example: clearly indicating breadcrumbs on main navigation, highlighting currently selected tab, etc.

4.2.1.5 Examples

Use:

  1. Page headings that tell the user where they are.

Avoid:

  1. Pages without clear headings or signposts that tell the user where they are. For example:
    • Page headings that do not tell the user where they are, such as a page heading that reads “Service not available”. The user has to remember what the service relates to.
    • Page headings that do not clarify the steps in a form.

4.2.2 Use a Familiar Hierarchy and Design (Pattern)

4.2.2.1 User Need

I need to understand my options and the tasks I can perform and I can identify the controls I can interact with to complete actions. (I find it hard to learn new interface design patterns.)

Related User Story: Clear Operation.

4.2.2.2 What to Do

Use common designs that are familiar to most users. This includes:

  • design elements,
  • affordances (visual hints about how to a control),
  • patterns, and
  • the layout and visual hierarchy (arrangement of elements to show the order of importance).
4.2.2.3 How it Helps

Many users cannot easily learn and remember new design metaphors. Without these skills, it can be much harder or impossible to locate desired items with which to interact, and to know what interactions may do. Users can feel lost or overwhelmed.

Users are more likely to find and recognize common design elements that are repeated often over a long period of use, across many sites.

For example, a user with a mild cognitive impairment or dementia, goes to a site to buy a product. They cannot find where to pay for the item that they want. They may think the site does not allow shopping and the site just provides information.

4.2.2.4 More Details

Common design elements, affordances, and patterns include:

  • A standard layout and visual hierarchy (arrangement of elements to show the order of importance). Place elements where the user is expecting them. For example, in an English site:
    • search in the top right hand corner in a web site,
    • link to the home page in the top left hand corner,
    • link to “contact us” in the top navigation area,
    • link to the site map in the footer area, and
    • submit button at the bottom of a form.
  • Common design patterns (repeated designs for controls and other elements), such as:
    • WAI-ARIA authoring best practices [wai-aria-practices-1.2],
    • patterns used in the most popular sites,
    • very common navigation design patterns and common icons,
    • platform specific (operating system) user interface design for navigation mechanisms and icons, and
    • adaptive user interface design that can be personalized (see above).
  • User interface (design) from a prior version. Allow users to revert back to a prior version of the application with which they are familiar.
  • Links that look like links and buttons that look and act like buttons. For example:
    • underline links with a standard style throughout a page,
    • links generally navigate to a new page, and
    • buttons generally perform an action.
4.2.2.5 Getting Started
  1. When designing web pages, select standard components that look and behave the way users expect. Use standard conventions for layout such as:
    • home link in the upper left corner,
    • navigation at the top, and
    • search in the upper right.
  2. Create an obvious visual hierarchy in the page.
4.2.2.6 Examples

Use:

  1. Common web layouts.

Avoid:

  1. Unfamiliar layouts.
  2. Unfamiliar visual hierarchies.

4.2.3 Use a Consistent Visual Design (Pattern)

4.2.3.1 User Need

I need to understand my options and the tasks I can perform and I can identify the controls I can interact with in order to complete actions.

Related User Story: Clear Operation.

4.2.3.2 What to Do

Use a consistent visual design across groups of pages.

4.2.3.3 How it Helps

Many users take a long time to learn new designs and recognize elements. Once learned, the elements should be used throughout the site.

For example, an older user with age-related forgetfulness takes a long time to learn new designs. When they come to a site, the first page takes time to understand, but then they know what to do on the next page. If the next page is different from the first and also difficult to learn, they become tired and make more mistakes. As they move to a third difficult page the cognitive load becomes too much and they cannot complete the task.

4.2.3.4 More Details

This includes:

  • Consistent design themes, including heading styles, font choices, icons, colors, visual appearance of controls, buttons and links.
  • Headings with the same structural level have the same font and visual style.
  • Icons, controls, and menu items that have same function and role have the same look and style.
  • State and focus for elements with similar function and roles have the same style across a site.
  • Layout is consistent across blocks of content. This includes the position of interactive elements and navigational controls.
  • Structure of content and style of presenting information is consistent. This includes the organization of blocks of text, icons, images, and bullet points.
4.2.3.5 Getting Started

Plan the design for your information before adding content. Think about the colors, font choices, and areas where text and images will appear.

4.2.3.6 Examples

Use:

  1. Headings at the same level look similar, across the site.
  2. A consistent look across the site for controls. For example:
    • Two submit buttons in a web site, both look and function the same way.
    • All selected radio buttons on the site look the same.
    • When an item is tabbed to, it has focus and can be activated. The keyboard focus indicator (outline that shows which element has focus) for all links look the same.
  3. A consistent location for common features. For example:
    • The search box is always in the same place in the entire site.

Avoid:

  1. Elements with similar functions looking different. For example:
    • There are six heading level 2s on a page. Four are styled using Times New Roman and two using Helvetica.
  2. Elements with similar functions presented in different locations. For example:
    • Three pages have a submit button. One is located at the top of the form. One is located at the bottom. One is located in a sidebar.

4.2.4 Make Each Step Clear (Pattern)

4.2.4.1 User Need

I need to recognize where I am in the architecture of the web site, application, or multi-step process, even after I get distracted.

Related User Story: Clear Purpose.

4.2.4.2 What to Do

Provide breadcrumbs, a “how I got here” button, or heading to help the user orientate themselves inside a site or task.

In a multi-step process, this includes showing:

  • the steps completed,
  • the current step,
  • the steps pending, and
  • any important choices.
4.2.4.3 How it Helps

This pattern helps a user who loses focus, forget what they are doing or gets distracted reorient themselves to their current activity. Clearly indicating the current location and progress helps the user continue after they lose focus without reading a great deal of content or restarting.

Providing information about the steps that need to complete a task helps users determine if they can successfully finish the task. This is especially important for users who often find processes difficult to complete.

Examples include:

  • Someone with early stage dementia is interrupted in their task or loses focus and then cannot remember what they were doing. By seeing the bread crumbs they can remind themselves where they are and continue their task.
  • Someone with an attention disability gets distracted and then needs to pick up where they left off.
  • Someone with a processing difficulty is not sure if this application has too many steps and if they will manage. By seeing they are half-way through they can gauge if they can cope with the entire process.
4.2.4.4 Examples

Use:

  1. Breadcrumbs that indicate the current step in the process, important choices, as well as past and future steps.
  2. Headings that clarify exactly were the user is inside the content.
  3. A “how I got here” button. When the user clicks the button they receive orientation information about:
    • the page,
    • how they got here, and
    • where they are inside the content.

Avoid:

  1. Completed steps and choices that are hard to find and check. For example:
    • Placing completed steps on previous pages.
    • Placing selected choices in a control that hides and reveals content (such as an accordion).

4.2.5 Clearly Identify Controls and Their Use (Pattern)

4.2.5.1 User Need

I need to understand my options and the tasks I can perform and I can identify the controls I can interact with in order to complete actions.

Related User Story: Clear Operation.

4.2.5.2 What to Do

Use a clear and recognizable design for controls. Make it clear what elements are controls and how to use them.

This includes:

  • Using a common style on controls (for example, links being underlined).
  • Using common design patterns on links and controls (for example, clicking on a link takes you to the page).
  • Making the borders of controls clear. Links in text do not need borders if identified properly (for example, a help icon has a border).
  • Making controls large enough so that users can click on it and not the item next to it.
  • Ensuring items that are not clickable do not look like links or controls.

When this is not possible, provide instructions that explain how to use the control. Instructions should be on the same page or one click away and written in easy to understand language.

4.2.5.3 How it Helps

Controls are parts of web pages that do something, e.g. a link, button, checkbox. Common style and design patterns on controls are easier to recognize and understand how to use it.

The goal of these controls is to allow someone to use them. As soon as the user needs to discover the control or work out how to use it, some users will fail.

For example, an older user with age-related forgetfulness takes longer to learn new designs. They go to an ecommerce site that has boxes around the headers such as “sale”. It also has simple large text for controls such as the “add to cart” button. The user clicks on the headings and not on the “add to cart” button (that looks like text). After a few failures they assume they cannot manage it and leave the site.

Some users have trouble when controls have a different look, color, or shape than they have used before. For example, when links do not have underlines and blue or purple text some users will not know there is a link (even if this appears with focus).

If you have difficulty with memory, it can be harder to use unique controls. It may take longer to find controls on the page. Even if they work just a little differently than similar ones, some users may need to relearn how to use them each time.

Using typical controls on the page will help people know how to use them. When using more unique controls, include easy to follow instructions and make them easy to find. It should be easy to identify, understand, and use the controls, regardless of how a user uses the page (vision, auditory, voice input).

4.2.5.4 Getting Started

Use standard controls and design patterns.

If you are designing a new control, make them easy to:

  • identify (I know they are there),
  • understand (I know what they do), and
  • use (I know how to use them).

Use a simple style or have easy to follow instructions that explain their use. Test with people with different cognitive and learning disabilities.

4.2.5.5 Examples

Use:

  1. Standard blue and purple link colors or links with an underline and distinct text color (the link text color used is not used for static text on the site).
  2. Buttons with a standard button design (3D rectangles) that support the standard user actions and make it clear when they are pressed.
  3. Tabs that look like tabs and make it clear when they are selected.

Avoid:

  1. Links without an underline.
  2. Links that have the same color as static text on the site, even if the links have a clear focused state.

4.2.6 Make the Relationship Clear Between Controls and the Content They Affect (Pattern)

4.2.6.1 User Need

I need to know how to use all the controls and the effects of each action.

Related User Story: Clear Operation.

4.2.6.2 What to Do

The relationship between controls and affected content should be completely clear and unambiguous.

This can be achieved through:

  • visually grouping controls with the content they relate to,
  • including controls within the region they affect,
  • using clear dividers or white space between regions in a page that may have separate controls or a scroll bar,
  • avoiding multiple or nested scrolling areas.
4.2.6.3 How it Helps

If a control on a page operates only on part of the page, it can be hard to tell what it will affect and what it will not. Users may try the wrong control. Many users will try again, and discover the correct control or scrollbar. However, many people with cognitive or learning disabilities may not be able to work out what to do. Others will feel cognitive overload, and stop as a result. They may assume the application is broken, or that it is too complicated for them. For these users, the application will not be usable.

Clear borders and groupings on the page can help indicate what element the control effects. Having a border or other visual cue around the controls and the relevant section can help make it more understandable. Check with user testing that users with cognitive and learning disabilities find all the page relationships clear and quickly know how to use the controls. Testing is essential when the controls cannot be in the area they affect.

For example, consider a user living with dementia trying to work out which scrollbar to use for embedded scrollable regions. When they try the wrong scrollbar, they do not get the effect they desire and their content may seem to disappear.

4.2.6.4 More Details
  • Separate Interactive Elements. For example: Do not have two scroll bars close together. Some users may find it difficult to determine which one to use with a particular section of content. Instead:
    • use clear visual layout and placement of the scroll bars,
    • break the content into two separate pages, or
    • consider removing unnecessary information from the page.
  • Associate elements and their controls. Place interactive elements like scroll bars and buttons close to the content they can impact. Keep interactive elements further from content to which they do not apply. This makes it easier to identify which elements will impact each section of content.
  • Use dividers. Examples of clear dividers include high contrast borders or white space. A change in background color can be a clear divider if the contrast is strong enough.
  • Help the user see the right control. Use large clear buttons and scroll bars.
4.2.6.5 Examples

Use:

  1. Controls clearly associated with the section they control. Place the control inside the section, and have clear borders around the section. Label the controls to match the section heading. For example:
    • On a library site, a search box for the whole site is located in the upper right of the site’s main navigation. A second search box searches the library catalog. It is located within a section with a clear border, different background color, and a heading “Library Catalog”. The go button reads “search catalog”.
    • A page needs a scrollbar for one section. The scrollbar look like it is inside the section.

Avoid:

  1. Multiple scrollable sections where it is unclear which scrollbar to use for each section.
  2. Controls for one section that look like they might affect the whole page or another section. For example: The search box relates to one area of a page, and not for another area. It is unclear which area the search is for.
  3. Multiple nested scrolling regions.

4.2.7 Use Icons that Help the User (Pattern)

4.2.7.1 User Need

I need to know what features and content are on this page or if I should move on.

Related User Story: Use Symbols.

4.2.7.2 What to Do

Add familiar icons, images, and symbols to important content such as controls and section headings. Each icon or symbol should convey a single meaning and be next to the content it relates to.

4.2.7.3 How it Helps

People who have language comprehension, learning, or reading difficulties may rely on symbols to understand content and navigate to content they need. Symbols also help people who struggle with language and attention to navigate content, including media.

For example, a person with aphasia, has the intellectual ability to understand concepts, but struggles with language. They may be dependent on the use of symbols to browse pages for information.

It can also help the elderly population who can find cluttered pages with dense text hard to read on a screen. Clear symbols, icons, and images that act as signposts to the text content can be very helpful.

4.2.7.4 More Details
  • Use clear and unambiguous icons or symbols that are easy to see and enlarge.
  • Be aware of cultural differences.
  • In left-to-right languages, when adding a few icons or symbols to a page place the image to the left of the text.
  • When adding multiple symbols to a paragraph or section of text, place the symbols above the text.
  • Use personalization semantics such as [personalization-semantics-1.0] to help the user load familiar symbols.
4.2.7.5 Getting Started

Use common icons that the user is likely to understand.

Provide common icons next to key texts, headings, media sections, “contact us” buttons, and "help" buttons.

4.2.7.6 Examples

Use:

  1. Instructions and important lists where each bullet point starts with an icon that relates to the content within that point. For example, see the summary of this document.
  2. Icons next to help, contact information, and search.
  3. Icons in call out boxes.

Avoid:

  1. Important instructions without icons or images to guide the reader.
  2. Cluttered, dense pages full of icons that can confuse or overwhelm the user.

4.3 Objective 2: Help Users Find What They Need

Users with cognitive and learning disabilities may have trouble finding the content they need. They may also struggle to orient themselves inside the content or task. Users should be able to quickly and easily locate what they are looking for. Use a clear and easy layout to help users navigate the system easily. For example:

  • Make anything related to safety or that the user needs to know easy to identify without reading a lot of text!
  • Provide a clear site structure and hierarchy will help users navigate to the page they need.
  • Make the most important things easy to find in the site and on each page.
  • Use good visual cues (like icons) with clear headings, boundaries, and regions to help users understand the page design. This makes the page navigation easier.
  • Provide a search facility or breadcrumbs to help users find things on the site.
  • Break media into chunks to allow users to easily find sections.

4.3.1 Make it Easy to Find the Most Important Tasks and Features of the Site (Pattern)

4.3.1.1 User Need

I need to find it easy to identify the content that I need, and do not need. Information I need to know and important information stands out, or is the first thing I read and does not get lost in the noise of less important information.

Related User Story: Findable.

4.3.1.2 What to Do

Make important tasks and features on the site stand out and easy to find.

This includes:

  • On the home page, calling out key tasks for the web site.
  • Using call out boxes or sections of the home page for these tasks and features.
  • Giving the most important tasks/features visual weight.
  • Placing the tasks/features towards the top of the page so the user does not have to scroll to see them.
  • Placing the tasks/features toward the top of the content so assistive technology finds them quickly.
  • Providing useful headings for each key task or feature.
  • Including key tasks at a top level of the main navigation.
4.3.1.3 How it Helps

People with impaired executive function, impaired memory, and other cognitive and learning disabilities may have difficulty determining what they can do on a site. By calling out important tasks and features, people can more quickly determine whether the site will meet their needs.

For example, a user goes to a web site to buy tickets. He sees many reviews and other information but cannot see how to buy the tickets. The user leaves the site.

4.3.1.4 More Details

Make important features and tasks both visually and programmatically prominent. See The Web Content Accessibility Guidelines WCAG [WCAG22].

4.3.1.5 Getting started

Start by thinking about what are the key tasks for the user.

Include:

  • The most common tasks users want to perform.
  • Tasks that may affect users’ health or well-being.

Usage data can normally identify the most common tasks. Focus groups and surveys are also useful for identifying what users want.

4.3.1.6 Examples

Use:

  1. The most important tasks are directly on the main page and in visually distinct boxes. For example, important tasks on a library site might be: searching, signing up for a library card, locating a branch, and reserving a conference room.
  2. The most used features are near the top of the page.

Avoid:

  1. Items that the team wish to promote more prominently placed than the main reason for users coming to the site. For example: A library web site only includes upcoming events on the main page. Users have to click through non obvious links to search for books, signing up for a library card, locating a branch, or reserving a conference room.
  2. Positioning information users are likely to want so they have to scroll, or page down, to find it.

4.3.2 Make the Site Hierarchy Easy to Understand and Navigate (Pattern)

4.3.2.1 User Need

I need to easily understand, navigate, and browse both the site and page structure.

Related User Story: Clear Navigation.

4.3.2.2 What to do

Make it easy to understand and use the site hierarchy and the menu structure.

This includes:

  • Think about the topics covered in your content. Then organize the site into logical, cohesive sections.
  • Use the site organization in the main menu structure.
  • Create sub-menu items that are clearly and logically associated with the main menu items under which they fall. It should be easy to know that sub-menu items are there and how to get to them. Users should guess correctly, the first time, where to find sub menu items.

Make it easy to identify:

  • the site organization,
  • the menu and content structure,
  • that there are sub-menus and,
  • if there are sub-menu items, how to reach them.
4.3.2.3 How it Helps

Users often become confused and lost when they do not understand the visual hierarchy of the site, menus, and structure. Clear sub-menus and a well-defined structure will help the user know what is on the site and how to find it.

Users often are confused when:

  • organization is unclear,
  • menu terms are hard to understand, and
  • menus and sub-menus are hard to find.

Dividing the site into clear logical sections can help. Make sections clear and subsections easy to find. Make the category structure and headings easy to understand. Create an outline that could serve as a summary of what is on the site.

The terms used in the menu need to make sense to the user. It needs to be obvious to the user what category the page they are looking for would fall under. Using common words that are familiar to the user is very important.

Make the levels in the content hierarchy easy to perceive and understand. Minimal type size or type weight differences or color differences may not be perceived or understood. Hierarchy solely dependent on small unique design elements creates confusion.

For example, a drop down accordion menu of additional sub-menu items may not be viewable without understanding it needs to be clicked (or “rolled over”) as indicated by a small unique design element.

When opening a web page for the first time, the sub-menus are typically collapsed. Some designs may make it difficult to know that there are sub-menus. Some users with cognitive disabilities may not guess that sub-menus are present. Even if they see a menu expand by accident, they may not generalize that this structure may be present for other items in a menu. Making it easy to notice that there are sub-menu items by adding a visual indicator to ensure users can use all of the site.

There are times when opening the sub-menu item may not be easy for some people with cognitive and learning disabilities. For example, the control to expand a menu item relies on a particular gesture or way of rolling over the area with a mouse. The end user may not figure out how to expand the sub-menu and may abandon the task. For example, a menu that expands only after moving the mouse over a particular side of the menu text.

4.3.2.4 More Details
  • Small design elements that indicate sub-menu items are not always meaningful to the user. Test designs with a diverse user set whenever possible to make sure they are clear.

  • Consistently use best practices to make it understandable to the user.

  • Series of nested elements that depend on interpreting small design elements are also confusing, and users may not understand the hierarchy.

  • Clearly indicate when text is hidden or when it can be hidden or revealed.

4.3.2.5 Getting Started
  1. Think about the types of content and categories of content in your site.
  2. Divide the content into clear categories.
  3. Build the main navigation from the important categories.
  4. If you have sub-menus, add a clear symbol that show when sub-menus are closed and when they are open.
4.3.2.6 Examples

Use:

  1. A visually clear and logical site hierarchy.
  2. Clear indicators when text is hidden. For example:
    • Consistently using “+” sign to show that additional information will be shown when pressed.
    • Consistently using triangles next to hidden sub-menu items in menus.

Avoid:

  1. A site hierarchy where users do not correctly guess what item is under each menu item.
  2. Unclear logic for the menu categories.
  3. No visual indication of sub-menu items next to the menu item. For example:
    • The only way to discover the presence of the sub-menu item with a mouse is to move the mouse over the sub-menu item.
    • Opening a sub-menu requires putting the mouse on part of the menu item, and this area is not clear and visually distinguished.

4.3.3 Use a Clear and Understandable Page Structure (Pattern)

4.3.3.1 User Need

I need to easily understand, navigate, and browse both the site and page structure.

Related User Story: Clear Navigation.

4.3.3.2 What to Do

Carefully design the layout of the page. Make sure it has a clear structure and hierarchy so that it is easy to understand.

This can be achieved by:

  • organizing the page content into logical sections,
  • clearly differentiating regions using dividing lines, whitespace, and background colors,
  • providing headings and other visual cues to indicate the structure and purpose of the regions,
  • making any relationship between regions of the page clear, and
  • using visual indicators to help people understand:
    • structure and relative importance of the page content,
    • the grouping and association of items, and
    • when items have a different purpose to surrounding information.
4.3.3.3 How it Helps

People with cognitive and learning disabilities may not be able to use content and applications when the page structure and relationships are unclear. The user may not complete tasks and miss key information. The user may not return to pages that are complicated to use and understand.

Clear, well organized page layouts enable users to easily find key information. They can focus on their tasks instead of working out what is on the page. Using a standard visual layout, and positioning elements consistently, will help users rely on muscle memory and use them. This supports people with disabilities that impact their problem solving skills, slow readers, or people who get overwhelmed when presented with a lot of text. This includes:

A good structure: Organization of page content into sections, each with an obvious purpose, allows users to more easily locate and focus on the sections they need. Content that is not directly relevant to the main purpose of a page should be distinctly separated.

Use borders and shading to group: Grouping information using a border or color shading makes it easier for people to identify groups.

For example:

3 rows of 8 evenly spaced circles divided into two blue rectangles.  The blue backgrounds make the two groupings visually apparent. 4 circles divided into two sets of two by a contrasting border. Each set has a blue and a white circle. The white circles are adjacent but border clearly indicates the sets.

Figure: Example of grouping with shading and borders.

Visual cues: People who have difficulty recognizing or comprehending written language or concentrating, can find graphical cues easier to process. Examples of common graphical indicators and visual cues include:

  • grouping summaries of content,
  • using a card design using colors or white space,
  • flagging important information, such as using call out boxes, and
  • indicating different types of information, such as placing quotes in speech bubbles.
4.3.3.4 More Details

If pages have a lot of content, check that content is grouped and you can see what is related.

Making regions and a clear page structure can include:

  • Clearly label content categories, and use familiar visual cues and icons. This will help recognition and retrieval rather than rely on memory. The background color can be a clear divider if the contrast is strong enough.
  • The heading structure should create an outline of the document that could serve as an abstract of the whole document.

Icons should be used consistently. It is also important the graphical indicators do not clutter the interface. Too many icons can add to the cognitive load for users to process. Examples of clear dividers include high contrast borders or white space. A change in background color can be a clear divider if the contrast is strong enough.

4.3.3.5 Examples

Use:

  1. Well separated sections of content. White space, borders, or call outs are used to separate sections.
  2. Headings and icons to help define sections of content. This organizes the information on the page so it is easier to understand the layout and find specific information.
  3. Call outs boxes.

Avoid:

  1. Dense text, with little white space.
  2. Unclear page structure and hierarchy.
  3. Lack of visually differentiated sections.
  4. Sections without headings or icons that define sections. For example: A web page has chunks of content run into each other with a “flat design”. Many users with cognitive disabilities will find it challenging or impossible to work out which chunks belong together. Thus, all the benefits of chunking content are lost.
  5. Groups and page sections that are not logical.

4.3.4 Make it easy to find the most important actions and information on the page (Pattern)

4.3.4.1 User Need

I need to reach important information and the controls I need without scrolling or carrying out other actions. They are not hidden or off screen.

Related User Story: Findable.

4.3.4.2 What to Do

Make key content visually stand out. Key content should be visible to users without needing to scroll the page or hover over content. This includes:

  • critical tasks and the controls needed to complete them,
  • interactions for critical features (e.g. login forms, send buttons), and
  • important information (e.g. health warnings or information that can affect safety).
4.3.4.3 How it Helps

Slow readers, people with impaired executive function, impaired memory, and other cognitive and learning disabilities may not be able to find the information and features on a page. For example, content that requires a lot of reading or the use of the scroll bar or pointer hovers may be hard to find. Other users cannot find content that requires paging through different screens

Users who are unfamiliar with the page (or common design patterns) may rely on prominent visual styling aids to find important information. A clear heading structure can also help with this by reducing what needs to be read.

For example, an elementary school publishes a weekly newsletter with stories, activities, and important announcements. One important announcement is that school will end early one day. The newsletter has less important information before the early school dismissal, and does not have a warning symbol next to the important information. A parent who reads slowly may need to stop before the important information and does not find out that the school is ending early one day. The parent is not home for the child on time.

In another example, a user is writing a comment, but the send button is not visible when the focus is on the text area. As a result, she cannot see how to send her feedback. The company will then not receive any feedback from groups who unable to find the feedback button.

4.3.4.4 More Details

The amount of page visible before scrolling is dependent on a wide range of factors such as physical device size and resolution. Where possible, use site statistics to understand what technology users are using. Keep this in mind when designing the page.

Consider the most constrained user experience first (e.g., a 240px wide mobile phone) and then design upwards from there. This will account for the widest range of scenarios. Adopting responsive development practices can improve the flexibility of the page for more devices and situations.

4.3.4.5 Getting Started

Make it easy to find the most important things on the page. Identify key content and its placement early in the design process.

Space at the top of the document is most likely to be visible to users without scrolling. Place key content at the top of the page to give the best experience to the widest range of users.

4.3.4.6 Examples

Use:

  1. Important controls and features that are visible without the need to scroll the page.
  2. Important controls, such as a submit button, that stand out from less important links and buttons.
  3. Critical information (such as information about health and safety) that is highlighted and visible without scrolling.
  4. Critical information that visually stands out from other less important information on the page.

Avoid:

  1. Important information, controls, or features that the user cannot find straight away. For example: Warnings about user safety that are not visually distinct and above the fold.

4.3.5 Break Media into Chunks (Pattern)

4.3.5.1 User Need

I need to easily navigate to what I want, take breaks and easily jump back a step if I do not follow or get distracted.

Related User Story: Media.

4.3.5.2 What to Do

Provide a logical organization and structure that is easy to navigate.

Divide long pieces of media into segments that are:

  • logical,
  • short,
  • labeled,
  • easy to identify, and
  • easy to reach or jump to.
4.3.5.3 How it Helps

Using a clear, logical structure, with headings allows users to orient and navigate through the content easily even if they get distracted or lose focus. This is particularly important for people with an attention impairment.

Providing short logical segments help users find and focus on a specific topic. If the user loses concentration they can find their place in the material and start again from the last point that they remember. This is especially important for educational content or instructions.

Chunking media also allows for each segment to be given a unique URI. It can then be easily referenced and shared.

For example:

  • Some videos can be naturally organized into chapters or segments.
  • A podcast can be split into segments rather than a single one-hour recording.
4.3.5.4 More Details
  • Six minutes or less: Media should typically be divided into segments that are 6 minutes or less in duration.
  • Navigable: Provide navigation to each media segment, and a unique, descriptive label.
  • Logical order: Present the links to media segments in a logical order.
  • Exception: Media that has no logical breaking points, do not need to be subdivided.
Note that if a transcript is available, it should be easy to find and navigate.
4.3.5.5 Examples

Use:

  1. Media that is divided into short logical segments. Each section is labeled and easy to get to. For example: A 30-minute video is divided into 5 sections, each with a descriptive link to play from that point onwards.

Avoid:

  1. Media that is not divided into segments. For example: A 30-minute video contains no subdivisions or descriptions of sections. A user has to play it from the beginning or guess starting locations within the video.
  2. Media sections that are not labeled.
  3. Media sections that are not linked to in the summary or table of contents.

4.3.6 Provide Search (Pattern)

4.3.6.1 User Need

I need to be able to find features and content easily.

Related User Story: Searchable.

4.3.6.2 What to Do

Provide a friendly search capability. Ideally search should include:

  • autocomplete,
  • grouping of results when appropriate with headings for each group,
  • ability to easily find previous searches, and
  • spell-checking.
4.3.6.3 How it Helps

Having a search capability allows users to find the content they need even if they cannot use the site menus. A user can learn how to use search and reuse that skill on many sites.

Menu systems and most site navigation require the user to understand the menu categories. Users with impaired executive function may be unable to identify the correct categories.

In some cases, users know the correct category via memory, rather than logic. For example, most users remember that the print function is often found under the file menu. Users with impaired memory may not be able to find these menu items based on recall.

Users with impaired short-term memory, age related forgetfulness, or who are easily distracted may also find navigating a site and going to many pages to look for content difficult. If it takes too long they may lose focus and forget what they are looking for.

Search is most useful when it corrects misspellings, finds appropriate or related content, and provides suggested auto-corrected versions of the search terms.

If there are many results from related topics, it helps if search results are presented under the appropriate heading and categories. This helps the user find the search results they are looking for.

4.3.6.4 More Details

Search is less important on small sites where every page is no more than two clicks away from the main page.

4.3.6.5 Examples

Use:

  1. Search with spell check or suggested terms.

Avoid:

  1. Search that presents many results that are not grouped or ordered by their relationship to the original request.

4.4 Objective 3: Use Clear and Understandable Content

Some users have impaired language skills. More of these users understand content which uses easy to understand language. For example, someone with a language impairment may be able to understand simple sentences and common words. However, complex language with uncommon words may be inaccessible to them.

Help users understand the message and purpose of the page by using:

  • easy to understand words,
  • short sentences,
  • simple tense,
  • short blocks of text,
  • unambiguous content,
  • clear images, and
  • easy to understand videos.

A good visual layout and small chunks of text makes content easier to understand. Use whitespace and good separation of foreground from background to help comprehension. Also, avoid relying on numerical or mathematical skills.

4.4.1 Use Clear Words (Pattern)

4.4.1.1 User Need

I need to understand the language used, including vocabulary, syntax, tense, and other aspects of language.

Related User Story: Clear Language.

4.4.1.2 What to Do
  • Use common and clear words in all content. Look at the most common 1500 words or phrases. These are the terms that people with severe language impairments are most likely to know.
  • Remove unnecessary or vague words (such as: “and so forth”).
  • Remove or explain uncommon acronyms, abbreviations, and jargon.
  • Do not invent new words or give words new meanings in your application. Do not expect people to learn new meanings for words just to use your content. If you must create new terms, make sure the user has access to an explanation within one click or event.
4.4.1.3 How it Helps

This benefits many people such as those with language impairments, processing difficulties, or a memory impairment. Using uncommon words can make text and media difficult to understand.

People with language impairments often have a reduced vocabulary. Learning new terms is a very slow, difficult process. For other groups, such as people living with dementia, learning new terms is not realistic or possible. Using uncommon words, that they do not already know, will make the content incomprehensible (unable to be understood) and unusable.

For example, someone with mild dementia is trying to turn on an ICT heating and air conditioning unit. The menu item for selecting heat or air conditioning is labeled “mode”. The user cannot use the whole unit because of this one term. This type of design has caused emergencies such as hypothermia.

Using common words and terms, with their most common meanings will help avoid these problems.

See our developer resource page for pages of common words and related resources.

4.4.1.4 More Details

When using uncommon words, provide an explanation by:

  • adding a simple language term in brackets next to it,
  • providing a pop up definition, or
  • using supported markup (see easylang). Note that easylang is being introduced into the new personalization specifications [personalization-semantics-help-1.0]. At the time of publication more support is needed.
4.4.1.5 Getting Started

Start using clear words in headings, labels, navigational elements, instructions, and error messages. This will increase the usability without a large time commitment.

4.4.1.6 Examples

Use:

  1. Common, clear, and easy to understand words and definitions of terms. For example:

    Your landlord must follow the law.

    • Your landlord can only use your security deposit (promise money), for certain things, such as unpaid rent (rent that you owe) and to fix things that you damage.
    • Your landlord must return your security deposit (promise money) to you by a clear date. This is usually 30 days after you leave the apartment.
  1. Abbreviations that are explained the first time they are used, unless the abbreviation is more common than the full term. Abbreviations are in an abbreviation tag with a title after the first use.
  2. Acronyms that are not in common use, are explained the first time they are used, and are in an acronym tag with a title after that.
  3. Jargon that is avoided or explained.

Avoid:

  1. Uncommon words without explanations. For example:

    A Landlord’s Right to Deduct. When a tenant moves into a rental property, he or she will pay the landlord a security deposit. Depending on the jurisdiction, this deposit will be returned to the tenant within a specific time period at the cessation of the lease term, as long as the tenant follows all the terms and tenants of the lease agreement or contract. Select links below to read the laws that pertain to your situation.

  1. Abbreviations, acronyms, and jargon that the user may not know and are not explained.

4.4.2 Use a Simple Tense and Voice (Pattern)

4.4.2.1 User Need

I need to understand the language used, including vocabulary, syntax, tense, and other aspects of language.

Related User Story: Clear Language.

4.4.2.2 What to Do

Use the tense and the voice that is easiest to understand. In English, this is usually the present tense and active voice. Speak directly to the user, and use the simplest form of verbs and sentence structure.

Use local plain language guidance to find the tense and the voice that is easiest to understand in different languages.

4.4.2.3 How it Helps

Using simple tense and voice benefits many people such as people with language impairments, dyslexia, or a memory impairment. For example, more people will understand “press the on button” (present tense and active voice) than “the on button should be pressed.” (passive voice).

Active voice makes it clear who is supposed to take action. For example, “It must be done.” is passive voice ad does not say who must act. “You must do it.” is active voice and clearly states who has the action.

Putting the aim of the sentence at the beginning can also make English sentences easier to follow. Local language experts may have additional linguistic advice that helps make content easy to understand.

4.4.2.4 More Details
  • Use other voices or tenses when they will be easier to understand or friendlier.
  • In languages where present tense and active voice do not exist or are not the clearest option, use the tense and the voice that are easiest to understand.
  • If you are writing about past or future events, do not use the present tense. It will be confusing.
4.4.2.5 Examples

Use:

  1. Simple tense and language. For example: “Your stocks went up this month.”

Avoid:

  1. Complex language and tense. For example: “Over the last month, we saw your stocks increasing.”

4.4.3 Avoid Double Negatives or Nested Clauses (Pattern)

4.4.3.1 User Need

I need to understand the language used, including vocabulary, syntax, tense, and other aspects of language.

Related User Story: Clear Language.

4.4.3.2 What to Do

Use a simple sentence structure.

This includes:

  • do not use a double negative to express a positive, and
  • do not use clauses inside clauses.
4.4.3.3 How it Helps

Simple sentence structure benefits many people, including those with language impairments, dyslexia, or a memory impairment. Both double negatives and nested clauses can be confusing.

For example, more people will understand “You must get the agency’s approval before we can answer your claim”, rather than “No approval of any claims can be achieved without the agency’s approval.”

Simple language allows more people to understand. For example, a person with early stage dementia can manage their own affairs when the language is clear and understandable.

4.4.3.4 Examples

Use:

  1. Short text without double negatives. For example: “Write clearly”.

Avoid:

  1. Double negatives that can be replaced by a positive. For example:
    • Do not write unclearly.
    • Time is not unlimited.
  1. Long sentences with lots of commas and conjunctions. For example:
    • Usually, clauses will be separated by two commas, one before and one after or the word “or”, or the word “and”, so you could replace the sentence with a list of options or even more than one paragraph.

4.4.4 Use Literal Language (Pattern)

4.4.4.1 User Need

I need to understand the meaning of the text. I do not want unexplained, implied or ambiguous information because I may misunderstand jokes and metaphors.

Related User Story: Clear Language.

4.4.4.2 What to Do

Use literal and concrete language. When possible, use concrete terms and examples that refer to objects or events that you can see, hear or touch.

Do not use metaphors and similes unless you include an explanation.

4.4.4.3 How it Helps

Many people do not understand non-literal content. For example, an autistic person may not understand jokes and similes. Sometimes instructions have jokes and similes to make the content friendlier. However, this confuses the user who now cannot do her job as needed.

You can explain any non-literal language by:

  • adding a simple language term in brackets next to any non-literal text such as metaphors and similes,
  • providing a pop up definition, or
  • using supported markup (such as personalization semantics [personalization-semantics-help-1.0]).

In non-text media, explain non-literal content as part of the media or include it in a separate file or track. See best practices.

4.4.4.4 More Details

Make sure the meaning remains clear when you replace non-literal text with literal text. Check this when providing literal text in a popup or other alternative.

4.4.4.5 Getting Started

Start by putting clear literal text on headings, labels, navigational elements, instructions, error messages, and any content that may affect the user’s rights or wellbeing. This will increase the usability in critical places without changing your writing style.

4.4.4.6 Example

Use:

  1. Literal text and concrete language. For example:
    • If you are experiencing anxiety disorders before starting take a deep breath, tell yourself you can do it and get started. Anxiety can include nervousness, fear, dizziness, or shortness of breath.

Avoid:

  1. Non-literal text. For example:
    • If you are experiencing cold feet before starting, take a deep breath and jump in.

4.4.5 Keep Text Succinct (Pattern)

4.4.5.1 User Need

I need to understand the language used, including vocabulary, syntax, tense, and other aspects of language.

Related User Story: Clear Language.

4.4.5.2 What to Do

Use short blocks of text

This includes:

  • Keep paragraphs short. Have only one topic in each paragraph.
  • Try to have the aim of the paragraph or chunk at the beginning.
  • Use short sentences. Have only one point per sentence.
  • Use bulleted or numbered lists.
  • Use short descriptive headings.
4.4.5.3 How it Helps

Chunking text content makes it easier to read and understand. This helps people with learning or cognitive disabilities related to processing speed or language. People with a memory impairment or anyone who is easily distracted will also benefit. Chunking is also helpful to anyone who is multitasking. Try to put the aim or purpose at the beginning of each chunk or paragraph.

For example, a graduate student with AD(H)D may need to teach themselves a new software skill. The software documentation is broken up into short paragraphs and lists by topic. The student finds the documentation easy to read and understand.

4.4.5.4 More Details
  • What is a short paragraph? In English, if you have a paragraph of more than 50 words, try breaking it up into two paragraphs.
  • How can I avoid writing a sentence with more than one point? Sentences that have more than one point usually have more than one linking word such as “and” or “but”.
  • Can a long sentence ever be clearer than two short sentences? Double-check if a long sentence is clearer than two short sentences. Do usability testing to see if people with cognitive and learning disabilities find the long sentence easier to understand.
  • When should I use lists? Lists are great when you have three or more things in a row. Think about using an unordered list (with bullet points) for items, requirements, and exceptions. A series of three or more steps is easier to follow as a numbered list.
4.4.5.5 Examples

Use:

  1. Short chunks of text. For example:
    • Calgary will have a lot of snow and hail this weekend. Try not to drive. If you must drive:
      • Use the rules for driving in winter to keep safe.
      • Before you leave, check what roads are safe at the Traveler’s Information web site.

Avoid:

  1. Long chunks of text. For example:
    • DOTD Issues Winter Weather Travel Advisory for Calgary. With the possibility of snow and rain in the forecast throughout the holiday weekend, the Department of Transportation and Development (DOTD) announced that department staff is prepared to deal with winter weather. Maintenance forces will be on standby to apply sand and salt over any affected bridges and roadways, to remove fallen trees from the roadway, and to close any roads as needed. Interim Secretary Jane Doe urges motorists to take the threat of winter weather seriously. “In the event of adverse weather conditions, the department will strive to maintain access to highways and interstates; however, we encourage the motoring public to avoid traveling during snow and ice, if at all possible,” said Doe.

4.4.6 Use Clear, Unambiguous Formatting and Punctuation (Pattern)

4.4.6.1 User Need

I need words to include accents, characters, and diacritics that are necessary to phonetically read the words.

Related User Story: Clear Language.

4.4.6.2 What to Do

Use punctuation and format for text, numbers, and symbols that reduce ambiguity and improve readability and comprehension.

4.4.6.3 How it Helps

For some readers, decoding words, numbers, and symbols does not happen automatically and can be demanding on working memory and executive functions. If they find content too demanding they are at risk of losing its meaning.

Some users may use assistive technology or personalization tools to help understand content such as text-to-speech that reads aloud the content. However, sometimes the punctuation or format makes it more likely that the screen reader will read it incorrectly. For example, Roman numerals may be read as text.

A user with a learning disability may be unable to manipulate letters, numbers, and words to correct mistakes that occur because of formatting or punctuation errors. They also need to focus on understanding the meaning of the content in order to use it.

For example, a user with a communication disability may listen to content using text-to-speech. If the content is phrased correctly, they can understand it. Sometimes they hear content read incorrectly or skipped, particularly numbers and symbols, and they cannot understand it. If text, numbers or symbols are in an unfamiliar layout, the user may become confused.

In contrast, a blind person listening to the content, is likely to be able to figure out the correct meaning even when words are not pronounced correctly. However, the word manipulations necessary to work out the correct meaning are not achievable by someone with a communications or language impairment.

4.4.6.4 More Details

Use language tags. Language tags are the key means to achieve the goal of unambiguous text formatting. See HTML [HTML] language tags and BCP 47 Language Codes.

Use punctuation correctly for the language you are writing in, as it will affect how the stress and intonation (known as prosody) patterns from the text are heard, when converted into speech. For example, in English, commas and semicolons will result in a short pause in the speech, whereas a hyphen - will generally be ignored. Question marks, exclamation marks, and speech marks can result in changes in intonation, such as a rise in the pitch of the voice.

Avoid the use of Roman Numerals and unfamiliar symbols in text were possible. These can confuse readers and are likely to be read incorrectly by text-to-speech tools. If these symbols are necessary then ensure they are marked up correctly, using techniques such as MathML and abbreviation expansions to provide additional support. Roman Numerals should be presented in upper case if used in isolation as they are likely to be read as individual letters.

Long numbers may be read as single digits or phrased as a single number. This is a particular problem for phone numbers or zip codes. While it is difficult to control exactly how these numbers are read aloud, content creators can help by:

  • Displaying the content of the number and using HTML semantics to ensure users and assistive technologies are aware of the number’s purpose. In addition, the following recommendations can assist with improving text-to-speech rendering:
  • For phone numbers, use the correct layout for the locality of the phone number and ensure users can select the whole phone number (including area code), so that text-to-speech voices can recognize the format and phrase it correctly.
  • For Zip / Postal codes, include state or address information close to the number so that speech voices can expand known abbreviations (such as state names) and listeners can perceive the context.
  • When writing long numbers, consider what separators will be familiar to your readers and how it will be read aloud. In general, English speaking countries will use commas between thousands and a period as the decimal separator whereas German and other European countries do the opposite. For example, 1,245 would represent one thousand two hundred and forty-five in English, but one point two four five in German. Text-to-speech output will assume the separators are being used in the format of the language of its voice. If this does not match the content, then listeners can become easily confused. While replacing thousand separators with a space has become a common convention to avoid confusion, it leads to difficulties with text-to-speech with long numbers being read out in a disjointed fashion. For example, 120 034 943 can be read as one hundred and twenty, zero three four, nine hundred and forty-three.
4.4.6.5 Examples

Use:

  1. Dates that can be read and understood in any culture.

    Consider how you write dates, because once again the text-to-speech will use the format associated with the language of the voice. A date such as 04/03/2019 will be read as “April 3rd 2019” by a US English voice and “4th of March 2019” by a British English voice. Writing out the month in words can avoid confusion.

Avoid:

  1. Dates and numbers that are not clear or read differently based on culture.

4.4.7 Include Symbols and Letters Necessary to Decipher the Words (Pattern)

4.4.7.1 User Need

I need words to include accents, characters, and diacritics that are necessary to phonetically read the words. This is often needed for speech synthesis and phonetic readers in languages like Arabic and Hebrew.

Related User Story: Clear Language.

4.4.7.2 What to Do

Include vowels, letters, or diacritic marks that users need to decipher words correctly. This is often needed in languages like Arabic and Hebrew.

4.4.7.3 How it Helps

Some languages, such as Hebrew and Arabic, have optional vowels and diacritic marks. Without these marks, most words with the same characters have between two (Hebrew) and seven (Arabic) different ways of being pronounced with different meanings. Most readers can read the word based on the context, and use their visual memory to guess the correct pronunciation. People with impaired visual memory, slow readers, and text-to-speech may often guess the incorrect term or pronunciation.

For example, a user with a language disability is trying to sound out a word. They guess three different pronunciations until they find one that makes sense. Unfortunately, many people with language impairments cannot work out the meaning as words out of context may only provide an idea rather than a specific meaning. Text-to-speech often requires these characters to speak the correct word.

Note that not all diacritic marks are necessary to pronounce the word correctly. Only letters and diacritic marks that are necessary for the unambiguous pronunciation need to be included.

4.4.7.4 More Details

Words can be deciphered and pronounced to have the correct meaning.

4.4.7.5 Getting Started

In Hebrew add additional Yud (י) and Vav (ו) that enables correct pronunciation.

4.4.7.6 Examples

Use:

  1. Additional letters or diatric marks that enable correct pronunciation. For example:
    • He says: אֹמַר /אומר (Hebrew)
    • He wrote: كَتَب (Arabic)
    • Books: كُتُبْ (Arabic)
    • It was written: كُتِبَ (Arabic)

Avoid:

  1. Words without needed letters or diatric marks so the user must guess the pronunciation based on memory and context. For example:
    • אמר (Hebrew)
    • كتب (Arabic)

4.4.8 Provide Summary of Long Documents and Media (Pattern)

4.4.8.1 User Need

I need an easy to understand, short summary for long pieces of content or an option for an Easy to Understand version.

Related User Story: Clear Language.

4.4.8.2 What to Do

Provide a brief summary for a long document and media.

Emphasize any important keywords to help people understand the purpose and content of the document, and determine if it might contain information they need.

Summaries should use common words, short sentences, and be written in an easy to understand style and tense.

4.4.8.3 How it Helps

Providing an easy to understand summary helps many people to quickly decide if the content is relevant to them and their current goal. A high level outline in a few sentences or bullet points is most effective. Abstracts and executive summaries are usually much longer and more detailed as they are designed to summarize the entire document.

For media, summaries help users with short attention span find the exact file they need and jump to correct content. All media files should have a summary description.

4.4.8.4 More Details

Provide a text summary that can be understood by people with lower secondary education level reading ability.

In pieces of content with less than 300 words, headings can act as a summary.

Summaries of each segment should include the main points from the content. Users should be able to use the summary to uniquely identify the content and know what it will contain.

4.4.8.5 Examples

Use:

  1. Short summaries with bullet points that clearly state the main points.

Avoid:

  1. Long texts, documents, or media without summaries.
  2. Unclear summaries. For example:
    • In multimedia, the segments are summarized as Chapter 1, part 1. Chapter 1, part 2, etc.

4.4.9 Separate Each Instruction (Pattern)

4.4.9.1 User Need

I need short boxes or chunks of content or sections

Related User Story: Support.

4.4.9.2 What to Do

In instructions, separate each step. State each step clearly. This includes:

  • including all steps, even those you think are “obvious”,
  • using numbers and lists can also help,
  • providing complex instructions in an if/then table, which can be easier to follow, or
  • using friendly graphics can help make instructions less scary.
4.4.9.3 How it Helps

Step-by-step instructions benefit many people such as people with language impairments, processing difficulties, or a memory impairment.

For example, a person with an impaired working memory cannot hold onto many pieces of information at the same time. They are more likely to make mistakes if they need to remember what they are doing, divide the steps, and track what they have done. When instructions are clearly separated and laid out, they can follow them without making mistakes.

4.4.9.4 Examples

Use:

  1. Bullet points to separate each step.
  2. An if/then table to separate steps based on conditions. For example:
    If Then
    If you want to work in programing:
    • Make a resume.
    • Get some sample code that you wrote.
    • Send them to programing@example.com.
    If you want to work in design:
    • Make a resume.
    • Get some sample pages that you designed.
    • Send them to design@example.com.

Avoid:

  1. More than one step in the same block of text without separation. For example:
    • If you want to work in programing, write to programing@example.com with a resume and sample code that you wrote. If you want to work in design, write to design@example.com with a resume and sample pages.

4.4.10 Use White Spacing (Pattern)

4.4.10.1 User Need

I need a good use of white space, so that the chunks are clear and the page does not get overwhelming.

Related User Story: Visual Presentation.

4.4.10.2 What to Do

Put white space around objects and text, including boxes, paragraph headings, and content, so that each section is clearly separated.

4.4.10.3 How it Helps

White space (also called negative space or the background color) reduces clutter and provides definition to content. This gives the viewer a clear overview of a web page. It is used by designers to enhance text and the position of objects on a page.

Using white space aids navigation through a page and helps people read it. It can help the user find important elements on a page. For those with cognitive and learning disabilities, white space has been shown to ease reading difficulties and improve understanding of content.

Make sure users can also adjust the amount of white space around objects and text via a web extension or user setting. This supports the ability to identify important elements in the content of a web page.

4.4.10.4 More Details

Use clear spacing between letters, words, sentences lines, paragraphs, and blocks of text.

Allow for the ability to easily adjust white space around objects and text, including boxes, paragraph headings, and content, to a degree that suits the user and does not disrupt the overall integrity of a web page. Do not add so much white space that important content cannot be seen above the scroll.

Note that “white space” is a term that means the background color. It does not always need to be always white!

4.4.10.5 Examples

Use:

  1. White space around separate sections of the content.

Avoid:

  1. Dense pages.

4.4.11 Ensure Foreground Content is not Obscured by Background (Pattern)

4.4.11.1 User Need

I need to easily perceive the content, for example:

  • Text is clear because the background is plain.
  • Media does not have distracting background noise.

Related User Story: Visual Presentation.

4.4.11.2 What to Do

Do not overlay words on busy backgrounds. Provide an option to remove background noise behind auditory content or ensure background sounds do not interfere with the main auditory content.

For text:

  • Use solid backgrounds for blocks of text.
  • Use thick outlines with solid fills for text that is overlaid on background that has designs running through it.
  • Use strong color contrast.

For auditory content:

  • Avoid fast changing background content behind foreground auditory content (such as background conversations or unnecessary traffic noise).
  • Provide an option to remove background noise behind auditory content.
4.4.11.3 How it Helps

Reading a sentence phrase by phrase conveys more meaning than reading individual words. Phrases are also easier to comprehend. The more words an individual can process in one glance, the faster they can read, the easier they can understand what’s written, and the more they stay interested. Most people can take in a whole line of text, or more at once. Fixating on many words at a time is necessary for comprehension for many people. A slow reader may read a sentence slowly using 6 to 9 eye fixations, sometimes taking in only a single word (or part of a word) at a time. Adding backgrounds reduces the number of words readers can fixate on. Removing backgrounds helps users comprehend more words at the same time.

Also, automatic word recognition is often used for reading comprehension. For example, approximately 200 words exist in the English language that do not fit traditional letter sound patterns. These words must be memorized and automatically recognized. If a user can’t recognize these words, the text is harder to understand. Backgrounds can increase the amount of time it takes users to recognize words.

Similarly, background noise in an audio track can make it harder to process and understand the main content.

4.4.11.4 Examples

Use:

  1. Easy to recognize words and content that can be easily distinguished from the background.

Avoid:

  1. Backgrounds that might make it difficult to read text, such as “Backgrounds behind text that make it difficult to recognize words and process text.”

4.4.12 Explain Implied Content (Pattern)

4.4.12.1 User Need

I need to understand the meaning of the text. I do not want unexplained, implied, or ambiguous information because I may misunderstand jokes and metaphors.

Related User Story: Visual Presentation.

4.4.12.2 What to Do

Provide definitions or explanations for implied or ambiguous information such:

  • body gestures,
  • emotions,
  • jokes,
  • sarcasm,
  • metaphors and simile, and
  • facial expressions.

These definitions and explanations should be provided in text close to the implied content or in the markup (see best practices).

4.4.12.3 How it Helps

Implied content can be difficult for some users because the meaning is not clear. This includes abstract content, sarcasm, or metaphors. The meaning is not clear and requires the user to have additional knowledge to understand.

When using body gestures, emotional communication, and facial expressions as the only way to communicate something, it is important to include this in another way to ensure all users understand. One way this can be done is through supplementary text.

For example, an image is used in a social media post to communicate a person’s true feelings. Some individuals may not be able to understand the emotion being demonstrated by the image. They miss the point the author is trying to make without more context.

Similarly, a research study asked autistic people to watch a movie that had a lot of implied content. They were watching the actors’ mouths, but information such as sarcasm is communicated by their facial expressions. When asked what happened in the movie, some missed the implied communication and the point of the dialogue.

4.4.12.4 More Details

This includes:

  • graphics used alone to identify that something is important, or should be remembered,
  • sarcasm in text, and
  • animations used to add importance or communicate something contrary to the literal meaning of the paired text.

Note that standard emojis often come with an explanation or alternative text.

4.4.12.5 Examples

Use:

  1. Supplementary text such as (sarcasm) when writing sarcastic comments in emails and social media posts to help readers understand the intent of the communication.
  2. Personalization semantics (once it is mature) to add non-literal text alternatives. See [personalization-semantics-help-1.0].

Avoid:

  1. Unexplained metaphors and similes. For example: “You are my sunshine.” rather than saying “You make me happy.”

4.4.13 Provide Alternatives for Numerical Concepts (Pattern)

4.4.13.1 User Need

I need words rather than numbers and numerical concepts.

Related User Story: Math Concepts.

Provide alternatives for numbers and numerical concepts.

4.4.13.2 What to Do

Provide alternatives for numbers and numerical concepts.

4.4.13.3 How it Helps

Not all people can understand numbers and numerical concepts.

For example, some people have dyscalculia, a learning disability specifically-related to mathematics. People with dyscalculia have significant problems with numbers and mathematical concepts, but often excel in other intellectual areas.

For example, a user with dyscalculia may have difficulty processing temperature data when presented only in a numeric format. However, if non-numeric alternatives are provided (cold, warm, hot etc.) then they are able to understand the content.

Numeracy issues can occur due to a range of disabilities, the most severe being the inability to read or understand numbers. Other people have challenges with any calculations such as relative sizes or times.

For example, a user may understand the concept of 90cms as a length but find it hard to cope with the fact that 0.9m and 900mm are the same length.

In another example, a train schedule has a list of relative times that the train leaves on the hour. The user cannot calculate when the next train leaves from their location.

4.4.13.4 More Details

Where an understanding of mathematics is not a primary requirement for using this content use one of the following:

  • Reinforce numbers with non-numerical concepts, e.g., very cold, cold, cool, mild, warm, hot, very hot.
  • Once it is mature you can also use personalization semantics to add non-numerical concepts. See [personalization-semantics-help-1.0].

Note that other users may find math easier to understand than long text.

Where some math skills are essential for the content:

  • Move towards digital math that can be extended (not numbers in images).
  • Enable highlighting of sections as they are being discussed.
  • Link sections of numbers to extra help that can be read together.
  • Enable replacing math sections with words or summaries for users who prefer this.
4.4.13.5 Examples

Use:

  1. Extra support for numerical content such as:
    • sizes
    • quantity
    • distance
    • time
    • date
    • temperature
    • positive/negative
    • calculations
    • sequencing
    • percentages.

    For the above, there is a description or representation of what the number means as a concept.

Avoid:

  1. Numerical content without extra support

4.5 Objective 4: Help Users Avoid Mistakes and Know How to Correct Them

Users should be able to avoid mistakes and correct them easily if mistakes occur.

It is difficult for many users to complete forms, especially people with cognitive and learning disabilities. A good design makes errors less likely.

Users with cognitive and learning disabilities are more likely to make mistakes. This can include entering information incorrectly or accidently touching the wrong control. Help the user notice form errors and make it easy to correct them. Always let users go back and recover if they accidentally touch a control.

Completing forms and similar tasks is often overwhelming for people with cognitive and learning disabilities. Many users with cognitive and learning disabilities cannot remember numbers, such as zip or post codes or their social security number. Many users even need to check their phone numbers. This makes entering information slow, and they may need to leave their desks or take breaks. Help them by providing a design that reduces mistakes. Give them the time they need without annoying timeouts and data loss.

4.5.1 Ensure Controls and Content Do Not Move Unexpectedly (Pattern)

4.5.1.1 User Need

I need to know where things are. Controls and content do not move unexpectedly as I am using them.

Related User Story: Assistance and Support.

4.5.1.2 What to Do

Make sure controls and content remain in place and do not move, unless the user initiates the movement.

A user may initiate a movement by triggering an action or by altering a property of the device, such as window size.

This can usually be achieved by:

  • ensuring controls and content do not move about as the page loads or refreshes,
  • displaying a clear “loading” indicator if content moves or changes during a page load,
  • not updating or moving content, such as an item’s position in a list, unless the user causes it.
4.5.1.3 How it Helps

If a control moves, users with slow hand-eye coordination or impaired cognitive processing speed may hit the wrong control. This causes unwanted actions and errors. The user may experience disorientation, confusion or even incorrect understanding of the content.

For example, a user moves to press a button on a video. The user accidentally nudges the device. The orientation changes to landscape and the control moves. Because the user has slow eye tracking or hand-eye coordination, they end up pressing a link to a new video.

Shifting controls and content can also cause cognitive overload and increase mental fatigue. For example, as a user with Traumatic Brain Injury reads content, the content refreshes and an additional article appears above the current content. The article the user is reading moves down. The user becomes disoriented and the application becomes very hard to use or understand.

4.5.1.4 More Details

Controls moving unexpectedly includes:

  • links in a list shifting positions,
  • orientation changes, and
  • slow loading of a page that the user thinks is complete.
4.5.1.5 Examples

Use:

  1. Controls and content that do not move about as the page loads or refreshes.
  2. A loading icon, that is clearly visible while the page is loading. After the content is finished loading and there is no further movement, the icon is removed.
  3. Controls and content that only move when the user initiates a change.

Avoid:

  1. Controls and content that move without the user’s request. For example: The user is about to select a phone number to call. As the user is about to touch the phone number, it shifts down. The user presses the wrong phone number and calls the wrong person.
  2. Links in a list shifting positions.
  3. Orientation changes that cannot be easily turned off.
  4. Slow loading pages that the user thinks are complete.

4.5.2 Let Users Go Back (Pattern)

4.5.2.1 User Need

I need predictable back or undo features so that I know exactly where I was previously, before I made a mistake.

Related User Story: Undo.

4.5.2.2 What to Do

Always let the user return to a previous point.

The standard back button is the best way to do this as it is familiar to the user. Many users will try the back button first.

The user should never lose their work if they press back.

4.5.2.3 How it Helps

Allowing users to return to a previous point helps prevent mistakes and makes it easy to correct mistakes when they happen.

Examples of mistakes include:

  • touching a control by accident,
  • opening a new link by accident, and
  • closing a window the user intended to keep open.

If a person easily makes mistakes or makes them often, it is important that they can go back and make changes without having their work or previous choices deleted.

For example, a user is watching a video. They try to increase the volume but touch a different link instead. A new video now loads. The user can press the back button and return to the video they were watching before. They now know they can try and increase the volume and if they make a mistake, they can easily go back and try again.

In another example, the back button did not work as expected, but took them somewhere else (such as the home page). When they try to change the volume or add a comment they often lose the video they were watching and cannot find the way to get back to it. The user now feels they cannot use any of the web site’s features in case they lose their main content again. They do not expand the screen, change the volume, or leave comments.

In forms, each time the user has to re-enter data presents a new chance for mistakes to occur. Entering and re-entering data can be stressful and tiring for some people with cognitive and learning disabilities. This increases the likelihood of mistakes and may make it impossible to submit correct data and complete the intended task.

For those with anxiety, memory challenges, and difficulty following directions, the ability to go back and review information they have entered is very important. For example, for some people the task of following directions and reviewing their answers works best as two separate tasks. Being able to enter information with their focus being on following the directions, and later going back to review their answers, helps them be more effective.

4.5.2.4 Getting Started

When the user has an opportunity to go back and review the data they entered, even if submitted by mistake. The back button always works as expected.

4.5.2.5 More Details

Options for supporting users going back include:

  • Going back steps in a user journey via a clearly labeled action.
  • Using clickable breadcrumbs with clickable previous steps and no loss of data.
  • Using back and undo features without unwanted data loss.
  • Once it is mature you can also use personalization semantics to log the steps and return to a step in the process. See [personalization-semantics-1.0].
  • Reopening a closed window or option.
4.5.2.6 Examples

Use:

  1. Designs that make it easy to go back. For example:
    • The user is watching a video. They touch a control accidentally. Pressing back can take them back to the video at the same position.
    • A user is completing an online form when applying for a job. The user accidentally hits the home icon and navigates away from the form. The back button takes them back to where they were without any loss of data.
    • The user is also able to go back through all the screens to be sure they did not misunderstand a section or skip an answer. The user can edit any data they mistyped.

Avoid:

  1. Designs that make it hard to go back. For example:
    • The user is watching a video. They touch a control accidentally and go to a new video. Pressing back makes the new video smaller and does not take them back to the original video.
    • Completing an online form when applying for a job. The user goes back to a screen to check if they have forgotten to answer a question. When they use the back button all data previously entered has been cleared/deleted.

4.5.3 Notify Users of Fees and Charges at the Start of a Task (Pattern)

4.5.3.1 User Need

I need support to manage the task, such as letting me know what information I will need (credit card, full address, etc.) before I start.

Related User Story: Assistance and Support.

4.5.3.2 What to Do

Tell the user about all charges at the start of a transaction including typical values. Any conditions and terms should also be available at the start of the transaction in easy language.

4.5.3.3 How it Helps

Users with cognitive and learning disabilities who have trouble with memory, attention to detail, or reading comprehension may not be aware of charges unless they are explicitly noted at the start of a transaction task. Terms and conditions can be under a link, but charges must be clearly displayed and available in easy to understand language.

Clearly identifying charges at the start of a sale benefits all users. Those with cognitive and learning disabilities will particularly benefit because some groups are less likely to have inferred or guessed the charges would be included. They may not know to look in other places in the user flow, such as on the homepage, or on a designated rates page.

People with impaired executive function or memory need to have all the consequences presented in an orderly form to be able to make an informed decision. When charges are not clear, the consent of the transaction is unclear.

It also can take much longer for users with disabilities to go through the process of making a purchase. If a person has spent hours making an online purchase, it is much more difficult and upsetting to find out that they cannot afford it. They will often blame themselves for not understanding the price and may experience a loss of confidence. They may stop trusting themselves with online, day-to-day activities.

For example, a person who has challenges with executive function may be trying to order a plane ticket, and not realize that there are extra fees not quoted in the original price, such as taxes, international fees, baggage fees, etc. They may spend hours booking a holiday only to find that they cannot afford it. Alternatively, sometimes they end up purchasing something they cannot afford. Also, even if they have completed this process in the past, they may not be not able to use their experience to anticipate the final price. The result is the user loses confidence in their ability to independently purchase a holiday online. They may have a debt they are unable to pay, may not attempt again, or only with the help of a hired professional (e.g. travel agent or assistant).

4.5.3.4 Examples

Use:

  1. Clearly stated charges. Users are aware of all charges and can make an informed decision when they decide to purchase an item and put it in a shopping cart.
  2. Clearly stated of ranges of possible charges. For items with shipping charges that vary, list the range of shipping charges and the issues that change the rate, along with a link to where more details can be found. For example, weight and speed of shipping may impact your shipping fees which can be between $4 and $400 depending on location.
  3. There are no surprise conditions.

Avoid:

  1. Final transactions that include new charges or hidden fees, that result in higher-than-expected total charges.
  2. Final transactions that include conditions of purchase that are not clear to users from the beginning of the task.
  3. Transactions that contain charges or conditions that the user did not know about until they had invested a lot of effort into the sale.
  4. Completed transactions that surprise the user with the total cost.

4.5.4 Design Forms to Prevent Mistakes (Pattern)

4.5.4.1 User Need

I need an interface that helps me avoid mistakes.

Related User Story: Assistance and Support.

4.5.4.2 What to Do

Choose a form design that reduces the chance that the user will make a mistake. This includes:

  • Requiring the user to enter as little information as possible.
  • Clearly indicating required fields.
  • In a text field, accepting as many formats as possible. For example, accepting different formats of phone numbers.
  • Dividing long numbers into chunks (supporting autocomplete across fields).
  • Using an interface where only valid input can be selected.
  • Using autocomplete and personalization of form controls.
  • Accepting voice prompts when supported by the operating system.
  • Automatically correcting input errors when possible and reliable.
  • Providing the user with known suggestions and corrections.
4.5.4.3 How it Helps

After making many errors, people with cognitive and learning disabilities and users with age-related forgetfulness often abandon their tasks and believe they cannot complete them. Error messages may be confusing. Correcting errors is often difficult and frustrating for users and increases cognitive fatigue. Many users need to stop when they get successive errors.

For example, while registering for an online banking account a form requires the input of the user’s birthdate. The required input format is xx/xx/xxxx with a leading zero for single digits. If a single input field with no input correction is presented, a user with a cognitive disability may enter 1/3/1996 triggering an error notification. It may not be clear to the user that the required format is 01/03/1996 (even if the format is shown below the input field or in the error notification).

A well-designed form makes it easier to fill in the information and prevents the user from making mistakes by automatically correcting or suggesting the correct date format.

Minimizing user generated errors by automatically correcting them will also minimize error notifications. Error notifications may be tiring and distracting, taking focus away from tasks and task completion.

4.5.4.4 More Details
  • Clearly mark required content.
  • Only correct errors if the correction is reliable. Otherwise, if suggestions for corrections are known, give the suggestions to the user.
    • For example, “Did you mean the first of February (01/02) or the second of January (02/01)?”
  • Calendars and dates.
    • Calendars should default to the first relevant day. Work calendars should default to the first working day of a user’s locale.
    • Calendar-based booking systems must prevent the user from booking the return date before the departure date.
  • Temperature.
    • Use the default temperature format of the user’s location.
4.5.4.5 Examples

Use:

Designs that make mistakes less likely. For example:

  • Correcting errors of the post code being written in the text field with the city or state information.
  • Preventing the user from selecting inappropriate dates and providing a simple explanation if the user attempts to do so.

Avoid:

Designs that make mistakes more likely. For example:

  • The booking form provides two calendars without clear labels and instructions. The form allows the user to select dates without warning as to whether they are possible e.g. flight out on June 1st - flight return May 30th.
  • The system allows the user to select inappropriate dates without warning. The calendar merely grays out inappropriate dates which may not be noticed. No warnings are provided.

4.5.5 Make it Easy to Undo Form Errors (Pattern)

4.5.5.1 User Need

I need to check my work and go back without losing the work I have just done.

Related User Story: Undo.

4.5.5.2 What to Do

Always allow the user to check their work and correct any mistakes. Once the user has fixed their mistake it should be easy to get back to the place they were at without redoing additional steps.

For financial transactions and important information, allow the user to easily cancel the transactions. Provide clear information and simple instructions for important information such as the amount of time the user has to cancel a transaction.

4.5.5.3 How it Helps

People with cognitive and learning disabilities make many more mistakes filling out forms than the general population. When mistakes cannot be easily corrected they cannot complete the task.

The ability to undo errors helps people with cognitive and learning disabilities safely use forms and reduces the consequences that result from a mistake.

For example, a user with a memory impairment may not remember that they have already added an item to their shopping cart and may add the item a second time. They may confuse the dates when booking a trip or make other mistakes.

It is essential that people with cognitive and learning disabilities have the opportunity to check their work and fix their mistakes easily.

For people with cognitive and learning disabilities, mistakes being theoretically reversible is not enough. Often the process of reversing a transaction is too complex for them to manage without help. They may not have access to that help meaning they have to live with all the mistakes they have made. In addition, if the process of correcting mistakes is too difficult, users may stop, either losing the transaction or buying unwanted items.

The effect of this happening multiple times is devastating. As a result, many users with disabilities may stop using the Internet for many tasks.

Allowing the user to change the number of items in the shopping cart at any time can significantly reduce mistakes.

A summary of the order, including product quantities and other costs before the final submission, gives the user the chance to identify any errors and make changes to the order. In this example given, a summary of the purchase helps the user see the error in quantity as well as a higher than expected order total.

In some cases, a user may realize that a mistake has been made after the final submission of data. Provide simple language instructions on how to cancel transactions and help the user understand the amount of time needed to cancel a transaction. This makes them less susceptible to scams.

For example, a user with Attention-Deficit/Hyperactivity Disorder purchasing a travel ticket on a web site may struggle with details and may have an impaired attention span. The successful completion of the order relies on the information provided at multiple steps in the process. An error such as an incorrect street number or zip code in the billing address will result in the order not going though. If a summary is not provided before submitting the final order, the user may not understand the reason for the declined payment and give up on the order. The user may also stop if there is not a clear and achievable way to make a correction.

4.5.5.4 More Details

This typically includes:

  • Change: It is simple for the user to review all the data and correct mistakes, including mistakes that might not be automatically identified. The user can change information via clearly labeled actions and get back to the place they were at, in one clearly labeled action without unwanted loss of data. (Some data may need to be entered if it is dependent on the item that was changed.)
  • Confirmed: A summary is provided before submitting important information and the user is told when they are about to submit the final information.
  • Time frames and instruction for canceling transactions are clear and easy to follow.
4.5.5.5 Getting Started

Start with forms where a mistake can have serious consequences such as financial loss or vulnerability.

4.5.5.6 Examples

Use:

  • A summary provided before submitting important information. It allows the user to correct information and return to the summary with a single click.
  • Clickable breadcrumbs that allow the user to see the previous steps, go back, and change them.

Avoid:

  • A summary provided before submitting important information, but the user cannot make corrections without losing other data entered.

4.5.6 Use Clear Visible Labels (Pattern)

4.5.6.1 User Need

I need clear labels, step-by-step instructions, and clear error messages.

Related User Story: Assistance and Support.

4.5.6.2 What to Do

Use clear labels. Labels should:

4.5.6.3 How it Helps

When labels are missing or unclear, users often do not know that the feature is available or what the control is. Although many users can guess what a control is for users with cognitive and learning disabilities with impaired memory or executive function are less likely to be able to remember the design pattern or work out what it is. A clear label that uses familiar terms and is located next to the control, helps people with cognitive and learning disabilities.

Similarly, if a label is not next to a control it is confusing for some users. When a label cannot be next to a control, there should be clear visual indicators that visibly and unambiguously associate the label with the control. This will need user testing with users who have learning and cognitive and learning disabilities to ensure it is usable.

For example, a user living with early stage dementia is using an application. Some controls do not have visual labels. A caregiver shows them what the control is for and they can use the application. The next day they try to use it again, but cannot remember what the control is for. This application is not usable for them.

In another example, the label disappears when the focus is removed. The user cannot remember what the control is and does not know how to make it reappear.

Labels need to be visible, readable by assistive technology, and be nearby the labeled content.

4.5.6.4 More Details

Many people with cognitive and learning disabilities use web extensions and simple text-to-speech. These assistive technologies often do not read WAI-ARIA [wai-aria-1.2] or titles. Until that changes, or an extension displays them, labels should not rely on these attributes for people with cognitive and learning disabilities.

4.5.6.5 Examples

Use:

  1. Visible labels that use simple common words and are next to the control. For example:
    • first name ____________________

Avoid:

  1. Hidden labels or labels that use uncommon words that are not easy to understand. It is unclear what action is needed. For example:
    • given name ___________________

4.5.7 Use Clear Step-by-step Instructions (Pattern)

4.5.7.1 User Need

I need clear labels, step-by-step instructions and clear error messages, so I know exactly what to do.

Related User Story: Assistance and Support.

4.5.7.2 What to Do

Write clear instructions that are:

  • located before, or next to, the field or activity,
  • broken down by steps (ensure that steps are not omitted)
  • clear, concise, and accessible, and
  • available with examples or illustrations that make it easy to understand what to do.
4.5.7.3 How it Helps

Clear instructions help prevent user errors. This reduces frustration and enhances users’ autonomy and independence because they can avoid asking for help. This helps many people with cognitive and learning disabilities as well as people from different cultures, emerging markets, and new users who may not be familiar with web forms or may miss cultural context.

For example, a person with age-related forgetfulness is trying to complete a form. They put the whole address and zip or postal code in one line (as one would do when writing a letter). They are given an error message. After a few error messages, they are exhausted and cannot complete the form.

4.5.7.4 More Details

Provide instructions at the start of the process, not simply in an error message.

Provide instructions needed to enable the user to complete the task. When multiple formats are accepted or errors are automatically corrected, less instructions are needed for the user to complete the task.

Note that instructions can be hidden behind a familiar icon.

4.5.7.5 Getting Started

In a system with common errors, tackle the most impactful errors first and add guidance as needed.

4.5.7.6 Examples

Use:

  1. Clear and easy to understand instructions. For example:
    • Provide an image of a passport with the number highlighted to indicate the number that the user should enter.
    • Explicitly say which day of the week is the start (e.g., Sunday or Monday) in calendar controls.

Avoid:

  1. No clear instructions for complex tasks. For example:
    • Request a passport number, but do not indicate which of several numbers on the passport is needed.
    • A site does not clarify the first day of the week and assumes the work week starts on Monday. A user from a different culture assumes the work week begins on Sunday, and makes a mistake.

4.5.8 Accept different input formats (Pattern)

4.5.8.1 User Need

I need inputs to accept different formats and not mark them as mistakes.

Related User Story: Assistance and Support.

4.5.8.2 What to Do

Accept all format variations in text inputs for values such as currency, time zone, locale, address, or credit card number.

4.5.8.3 How it Helps

Forgiving form entry processes help the user fill out forms, without an overwhelming amount of errors. They can avoid asking for help when errors cause them problems. This reduces frustration while enhancing the user’s autonomy and independence.

This benefits anybody with a learning and cognitive disability or age related forgetfulness. It will also help anyone who is used to a different format.

For example, a user with age related forgetfulness enters their phone number with hyphens inserted. They receive an error message, because the system does not accept that format. They wonder if they have forgotten their phone number or made a different mistake. They stop trying to use the form.

4.5.8.4 Examples

Use:

  1. Platform facilities for flexible input types and validation.
  2. Research and support for different formats that might be entered, including international variations.
  3. Minimal required fields.
  4. Flexible input fields that accept different formats. For example, an input field that accepts:
    • various currency symbols,
    • a credit card number with or without spaces,
    • telephone numbers as written in many regions, including country code, region code, and number using optional brackets, and
    • international characters such as those with accents.

Avoid:

  1. Restricting entries to arbitrary lengths.
  2. Insisting on specific separator characters if they are not required and can be ignored.
  3. Input fields that do not accept the format that the user may use. For example:
    • Forcing users to use a specific currency value that they may not be their currency.
    • A credit number field that requires no spaces even though cards have numbers printed with spaces.
    • Telephone number field will not accept + codes or brackets.

4.5.9 Avoid Data Loss and “Timeouts” (Pattern)

4.5.9.1 User Need

I need time to complete my work. I do not want a session to timeout while I try to find the information needed, such as my postal/zip code or social security number.

Related User Story: Assistance and Support.

4.5.9.2 What to do

Avoid timeouts and let the user save their work as they go.

When this is not possible, inform the user when they initiate the process:

  • the amount of time available to complete the process,
  • if the user will lose entered data if a timeout occurs.
4.5.9.3 How it Helps

Timed events can present significant barriers for users with cognitive and learning disabilities. These users may require more time to read content or to perform functions, such as completing an online form. They may need to read help or look at notes.

Users with cognitive and learning disabilities may need additional time to look up the information required to complete a transaction. They may need a break, without losing their place in the process, and without losing data that has already been entered.

For example, while making a purchase on an e-commerce web site, a user does not remember required information. This may be a date, a phone number, or a zip code that may seem easy to remember for users without a cognitive or learning disability. They need to look up this information, which takes them time away from the screen. Then they need to copy it carefully into the form.

In another example, a user is completing an online process for reserving a hotel room and purchasing a plane ticket. They become overwhelmed with the amount of instruction and data input required to complete the process. The user cannot complete the process in one sitting, and takes a break.

Users’ cognitive skills may diminish as they get tired. They then must stop the task for that day. When users know that their data won’t be lost, they can recover from mental fatigue and return to successfully complete the task.

It is important to note that many people need time to read the “timeout” notice. Often, the session ends before the user has finished reading about how to extend the time. If the user is looking up information, they will not see the timeout notice.

4.5.9.4 More Details

When a web site must timeout because sensitive information (such as credit card information) is entered or displayed, the web site should ask for the sensitive information at the last stage.

The web site should also warn the user that once they give the credit card information they should complete the process quickly as the session can timeout.

4.5.9.5 Examples

Use:

  1. Unlimited time, when possible.
  2. Timeouts that users with learning and cognitive disabilities find it easy to avoid. For example: At the start of the task the user is told that they have a day to complete the task. They have an option to set it to longer.
  3. When the timeout is needed:
    1. Timeout warnings at the start of the task. For example: In an auction, there is a time limit on the amount of time a user has to submit a bid. At the start of the task, the user is warned about the time limit, and how long they have until the time ends.
    2. When possible and safe, the user’s work is not lost. For example: A web site with sensitive information uses a client-side time limit to help protect users who may step away from their computers. When the user logs in again all the work is still in place. The user is warned ahead of time how long they have for inactive sessions and is told that their data will not be lost.

Avoid:

  1. System timeouts that are not necessary for security.
  2. System timeouts without warning the user at the start of the process.
  3. System timeouts where the user loses their work, without it being a security or privacy risk.

4.5.10 Provide Feedback (Pattern)

4.5.10.1 User Need

I need rapid feedback or visual cues to indicate an event was successfully triggered. For example, I need to know when an email has been sent, otherwise it looks as if it has just disappeared.

Related User Story: Assistance and Support.

4.5.10.2 What to Do

For each step in a process let the user know of its status and if it was successfully completed.

4.5.10.3 How it Helps
Making the result of each user action clear helps people with a variety of cognitive and learning disabilities. This includes:
  • understand that their actions were processed (e.g., the click did something),
  • prevent uncertainty or doubt regarding the outcome, and
  • remember what they just did.

For example, a user with age-related forgetfulness, may have difficulty remembering how the interface worked. So when they press the send button they may not feel confident that the form was submitted. Feedback, such as a thank you message, will tell them submission occurred and make them feel confident in the process.

During a multi-step task this feedback (user-action feedback) can also assist people with attention or short-term cognitive and learning disabilities to remember what they are doing. For example, a user with early dementia may get distracted and then forget exactly where they were in the task. This user-action feedback helps re-orient them. It also helps them avoid leaving a task by reminding them that they are in a process, and where in the process they currently are.

Provide easily-recognizable success or failure feedback with every user action. When possible, the feedback should use consistent and familiar design patterns. For example:

  • After a step in a multi-step task is completed, breadcrumbs display a tick, or a checkmark next to that step’s name; and, if applicable, the title or the name of the next step is readily apparent.
  • After a button is clicked, it should look depressed. (Note that if it is a toggle button, the state should also be programmatically determinable).
  • After a form is submitted or an email message is sent, feedback communicating what just happened is provided, such as “Your application was submitted, thank you” or “Your email message was sent”.
4.5.10.4 More Details

The success or failure of every user initiated action is clearly indicated to the user by visual, programmatically-determinable, rapid feedback in the primary modalities of the content. Audio feedback is supported.

4.5.10.5 Examples

Use:

  1. Visual state feedback. Use CSS and WAI-ARIA [wai-aria-1.2] states such as aria-pressed and aria-selected, to gives a visual change that shows the change in state. For example: Buttons and tabs with a visually clear state when selected.
  2. Messages that let the user know if a task is completed. For example:
    • Confirmation messages when an email message is successfully sent, or a form is successfully submitted.
    • Visible and programmatically-determinable information to show that a new password is set.

Avoid:

  1. State changes without visual feedback.
  2. Task succeeds or fails without feedback.

4.5.11 Help the user stay safe (Pattern)

4.5.11.1 User Need

I need to know I am safe and secure when using a web site, especially if providing information or communicating with others.

Related User Story: Assistance and Support.

4.5.11.2 What to Do

Keep the user safe. This includes:

  • Understand risks for people with learning and cognitive disabilities when providing personal information or communicating with others.
  • Checking how safety and security techniques work with a wide range of customized profiles including aging users and users with learning and cognitive disabilities.
  • Using known techniques to keep sensitive user information safe.
  • Helping all users understand any relevant known risks. Explain any known risks in easy to understand and friendly language.
  • This helps them make an informed decision and stay in control.
4.5.11.3 How it Helps

Users need to know they are safe and secure when using a web site, especially when providing information or communicating with others.

Users with impaired executive function are less likely to identify risks correctly so clearly identifying potential risks helps the user stay safe and in control. Add helpful tips for staying safe while using your content and provide help in case of problems.

To help identify risks, we suggest holding research and focus groups with people with cognitive and learning disabilities and to work with people with cognitive and learning disabilities to solve potential and existing problems. Groups should have people with learning and cognitive disabilities in mind when working on security and risk mitigation.

For example, many people who cannot copy and paste passwords or use two-step authorization codes ask a caregiver to help them. As caregivers are often just temporary employees, this leaves the user exposed. Making passwords longer or requiring users change them regularly increases these unsafe practices and can actually make the application less secure. This type of design error is common when people with cognitive and learning disabilities are left out of the user research and analysis.

4.5.11.4 Examples

Use:

  1. Alternative login options that have been tested with people who have learning or cognitive disabilities that are approved security techniques, in your jurisdiction, for sensitive data.
  2. Talking to a wide range of people with learning and cognitive disabilities, to understand the risks and how they may relate to personal information.
  3. COGA persona and use case in the research, development and requirements phases.
  4. Industry best practices for storing and securing user information.
  5. Consent forms in easy to understand language that have been tested with people with learning and cognitive disabilities to ensure they understand the risks.
  6. Warnings to users each time personal information may be given, in easy to understand language.

Avoid:

  1. Users sharing information without understanding all the risks.
  2. Hidden and confusing information about risks.
  3. Users giving consent one time, and forgetting about the risks they are currently facing.
  4. Consent forms that users may not understand.

4.5.12 Use Familiar Metrics and Units (Pattern)

4.5.12.1 User Need

I need interfaces to use metrics I know, and that are common in my location (such as feet or meters) otherwise I get confused. I do not always know what metric they are talking about or notice that the number looks wrong.

Related User Story: Assistance and Support.

4.5.12.2 What to Do

Provide metrics in units that users will be familiar with.

4.5.12.3 How it Helps

Most people are familiar with a single set of units that are commonly used for metrics in their location or culture. When the metrics are in other units they need to perform a conversion in order to understand them. Even tools such as a calculator can be hard to manage. Provide an option to change units and default the units to the users’ location. Common examples are the units used for distance, weight, area, currency, and temperature.

For example, a user may know the temperature in Centigrade. When it is given in Fahrenheit, they think it is going to become very warm.

4.5.12.4 More Details

Sometimes metrics are commonly declared in a specific unit even when localized alternatives are available. For example, TV or monitor sizes are usually given in inches even when centimeters are the common unit. However, even, in these cases, providing alternatives are still useful as users may not be familiar with the metrics given.

4.5.12.5 Getting Started

Provide a mechanism to select a different set of metrics that are more meaningful to the user, or provide common alternatives in the text

4.5.12.6 Examples

Use:

  1. Metrics in different units that different users understand. For example:
    • The Eiffel Tower is 1,063 feet (324 meters) tall, including the antenna at the top.

Avoid:

  1. Only one unit for metrics. For example:
    • The Eiffel Tower is 1,063 feet tall.

4.6 Objective 5: Help Users Focus

Distractions can prevent users with cognitive and learning disabilities from completing their tasks.

Once users become distracted, they may find it difficult to remember what they were doing. Then they can no longer complete their task. This is especially problematic for users with both impaired attention and impaired memory, such as users with dementia.

Avoid using any content or elements that distract users or interrupt them. Also, consider removing content the user will find unnecessary. Provide clear headings and breadcrumbs to help users reorient and refocus if they lose focus.

Also, help users maintain focus on their task by telling them what information they may need to prepare at the beginning of the task, so that they can collect all required information before starting.

4.6.1 Limit Interruptions (Pattern)

4.6.1.1 User Need

I need tasks to not have distractions.

Related User Story: Distractions.

4.6.1.2 What to Do

Avoid interruptions. This includes:

  • Providing an easy way to control interruptions, reminders, and changes in content unless they are started by the user or involve an emergency.
  • Allowing the user to control and limit types of content which could cause them distraction or an undesirable reaction.

This content includes: Social media, violent content, advertisements, distracting backgrounds and images, moving content, soft and loud noises, or triggers.

4.6.1.3 How it Helps

Interruptions stop people with memory or attention impairments from completing their task. This can include individuals with Dementia, those that have had a stroke or brain injury, and those taking medications with side effects impacting memory or attention. Certain types of interruptions or a certain number may cause them to stop, even if the task is very important. Interruptions can include sounds, content that visually appears or changes (such as advertisements on a page). Interruptions can be as simple as text notifications about the presence of new changes while working in a shared online document.

A site will work best for those with memory or attention challenges if they have:

  • a quiet and simple environment,
  • no interruptions at all,
  • an easy to use pause option so interruptions and moving content can be viewed later, or
  • a setting where users can select which types of interruptions they can manage and when.

Many news web sites have a lot of interruptions that can cause challenges for people needing to read important information, such as school closures due to bad weather. They may encounter breaking news text, advertisements, and pop-up windows. For those with difficulty focusing and sifting through the school names, or have two or three they need to check, these distractions may make the task impossible. By letting the user pause these distractions, and ideally temporarily remove them from the page, they will better be able to complete the task.

Some people are sensitive to noise and can easily become overwhelmed by too many stimuli.

Sometimes, noises and different types of content may adversely affect mental health. For example, noises, distractions, or distressing content may make the user more anxious or possibly trigger post-traumatic stress disorder (PTSD). There has also been research to suggest that too many interruptions and use of social media may aggravate depression and difficulty focusing. Allowing users to control this content could help them be more productive online.

Where standard techniques exist to remove or control distractions, they should be used.

For example, a person with traumatic brain injury is filling out their taxes online. The social media application pings them with notifications. They try to turn notifications off and then they try to turn off the application, but it is too complex. They are unable to submit their taxes without help.

4.6.1.4 Examples

Use:

  1. Tasks without interruptions.
  2. An easy way to control interruptions that may be needed. For example:
    • An application lets the user decide how they want to be notified about reminders and emails. Users can choose visual reminders, sounds, or none. They can flag users as essential contacts who can interrupt in most cases. These settings are easy to find from every screen. For some users, not having any notifications enables them to focus on a task and then go to their emails or calendar when the task is completed.

Avoid:

  1. Distracting content that is hard to turn off, or cannot be turned off. For example:
    • There are advertisements on a magazine article page that constantly change, interrupting a reader’s focus.
  2. Content that interrupts the user from completing their task. For example:
    • A pop up suggesting the user subscribers to the site. The pop up must be closed for the user to continue.

4.6.2 Make Short Critical Paths (Pattern)

4.6.2.1 User Need

I need to be able to find features and content easily.

Related User Story: Distractions.

4.6.2.2 What to Do

Streamline processes and workflows so that they include only the minimally necessary steps. Separate out optional steps that are supplemental but not required. Do not require the user to go through optional steps.

4.6.2.3 How it Helps

Streamlining processes and workflows reduces distractions, mistakes, and mental fatigue. Using short critical paths increases the chance that users with cognitive and learning disabilities can successfully and accurately complete a process or task and navigate a workflow.

For example, a user with early stage dementia is trying to buy a new phone. Before they can pay, steps are added offering them headphones and other items. They become overwhelmed and confused. They leave the site without buying the phone.

4.6.2.4 Examples

Use:

  1. Processes that only require necessary steps.
    • For example: The steps included in the online process to buy movie tickets are:
      • select a movie,
      • select the date and time,
      • select seats,
      • pay,
      • print or save tickets.

      The movie theater allows the user to view descriptions about the movie and ratings, buy snacks ahead of time, and donate to a charity. These actions, or steps, are not required in order for the user to complete the task of purchasing a movie ticket. Instead of requiring the user make these selections as part of the purchasing process, the user is given these options before the process is started and after it is complete.

  2. Short navigation to key features. For example, for the most used function in an app:
    • open the app,
    • run the most used function.

Avoid:

  1. Adding unnecessary steps. For example, the steps included in the online process to buy movie tickets are:
    • select a movie,
    • select the date and time,
    • select seats,
    • purchase snacks ahead of time or opt out,
    • make a charitable donation or opt out,
    • create an account,
    • pay,
    • print tickets.

The movie theater forces users to decide on snacks and make a charitable donation before paying for their tickets. While an opt out option is available, it is somewhat hidden on the screen, particularly on mobile devices, and users often stop when they cannot figure out how to pay.

  1. Long navigation for the most used features. For example, for the most used function in an app:
    • go to the applications introduction page, press continue,
    • go to the applications main page,
    • go to a sub page,
    • select an option,
    • select another option,
    • run the most used function.

4.6.3 Avoid Too Much Content (Pattern)

4.6.3.1 User Need

I need to find it easy to identify the content that I need, and do not need. Information I need to know and important information stands out, or is the first thing I read and does not get lost in the noise of less important information.

Related User Story: Findable.

4.6.3.2 What to Do

Keep the interface simple. Provide users with five or less main choices on each screen and remove unnecessary content. This can be provided via a simplified version, as an alternative that is generated in real time from the same code base as the main content.

Extra links that do not relate to the main purpose of the page should be limited to the footer section. Extra choices can also be hidden under a “more” link or other clear and descriptive titles.

4.6.3.3 How it Helps

Busy pages, too much text, too many images and too much other content can cause cognitive overload, anxiety and loss of focus. Keeping content down to a small number of important points reduces the clutter, calms the user, and allows for better understanding while aiding memory. For example, it can help slow readers or those with a short attention span, who may leave the page if it appears complex.

Simplified content and a consistent simple design helps reduce cognitive overload and decreases stress and mental fatigue. For example, a person with early stage dementia goes to their doctor’s application. There are five choices on the screen: appointments, ask your doctor a question, test results, approvals and more. Each option has an icon, clear text, and is separated by whitespace. In two clicks they have asked their doctor their question. They can easily select what they need without asking for help. More options are also available if they swipe left. However, they are unlikely to do so.

4.6.3.4 More Details

Avoiding long paragraphs, lots of choices, and non-meaningful imagery ensures those with cognitive and learning disabilities can concentrate on the important points being made.

Keeping to a few short bullet points and limiting to one or two images related to the main subject areas of a web site or service allows the user to choose whether to explore the site further.

The intent of this pattern is not to clutter the page with unnecessary information but to provide important cues and instructions that will benefit people with cognitive and learning disabilities. Too much information or instruction can be just as much of a hindrance as too little. The goal is to make certain that enough information is provided for the user to accomplish the task without undue confusion or navigation.

4.6.3.5 Examples

Use:

  1. A simple interface. The main feature is much bigger than anything else. For example:
    • A search engine has its name and a large simple search box. All other content is smaller, lower down, and the user does not notice it unless looking for additional features.

Avoid:

  1. Pages with unnecessary content. For example:
    • Too much text, long menus, and images set around long paragraphs of dense text. The message is lost in an overload of information.

4.6.4 Provide Information So a User Can Complete and Prepare for a Task (Pattern)

4.6.4.1 User Need

I need to know how to start a task, and what is involved.

Related User Story: Distractions.

4.6.4.2 What to Do

Emphasize the start of important tasks.

Before a user performs a task consisting of multiple steps, ensure they have an estimate of the amount of effort required to complete the task. This should include:

  • the time it might take,
  • details of any resources needed to perform the task, and
  • overview of the process and next step.

Once the user starts the task, ensure the user clearly understands when the task is still “in-process” and when it has been completed.

4.6.4.3 How it Helps

Some users find distractions difficult especially when the distractions cause them to switch focus mid-task and subsequently return to where they left off. For example, a web site may have a large arrow pointing the way to the “book here” link. The arrow emphasizes the start of the booking task, and will help users know when they have started the task.

Often people need to manage their times of concentration so they can focus without interruptions. Prior advice on the time a task takes, its complexity, or working memory load enables them to better prepare and complete it. The list of required resources before starting the task, along with the number steps left until completion of the task, will help users avoid failures.

4.6.4.4 Getting Started

Provide a generous estimate of time required and a list of all required resources at the start of a multi-step task or form. Break the task into steps.

4.6.4.5 Examples

Use:

  1. Visual cues when a user starts a task.
  2. An overview of the process including the time it might take, and any resources needed. For example:
    • Before the user begins to book an airline ticket, a message is presented, “The average time for booking an airline ticket is 15-30 minutes. You will need your travel dates, the number of travelers, and each travelers’ passport to complete this process.”

Avoid:

  1. Missing out important details about what the user may need. For example:
    • Another airline does not notify the user that they need their passport. The process times out when the user is trying to find their passport number. The user needs to start over or abandon the booking.

4.7 Objective 6: Ensure Processes Do Not Rely on Memory

Memory barriers stop many users from using products or accessing help or content.

People with any impairment that affects memory or language can find it difficult or impossible to overcome memory barriers.

For example, many users have an impaired short-term memory. On average people can remember 7 letters or items at the same time. A person with an impaired working memory may be able to remember one to four pieces of information at the same time (depending on the extent of the impairment). If they need to remember other tasks, such as track what they have done, they are likely to make mistakes.

Avoid barriers such as:

  • navigating voice menus that involve remembering a specific number or term,
  • remembering numbers while processing words on a voice menu,
  • transcribing text, or
  • remembering passwords.

Allow users access to content, services or help, without using processes that rely on memory. Make sure there is an easier option for people who need it.

4.7.1 Provide a Login that Does Not Rely on Memory or Other Cognitive Skills (Pattern)

4.7.1.1 User Need

I need to be able to use a site without remembering or transcribing passwords and usernames.

Related User Story: Accessible Authentication.

4.7.1.2 What to Do

Users can login, register, and reset credentials, without having more cognitive abilities then they need to use a simple web page. They do not have to:

  • memorize character strings,
  • perform calculations,
  • copy content,
  • answer puzzles,
  • reliably reproduce gestures, or
  • recognize characters presented on screen, and then enter them into an input field.
4.7.1.3 How it Helps

People with memory impairments often forget their passwords and are not able to login. Their solutions often are only sometimes helpful and have security risks:

  • They may have to look at or listen to text several times to copy or type it into a form field.
  • They may reuse a single password or use a simple-to-remember password, which they can remember.
  • If they need to change their password or use a complicated password they may store passwords insecurely, such as written on pieces of paper which other people can see.

They may also struggle with other steps during login, such as:

  • entering characters in the correct order,
  • entering characters correctly with a limited number of tries (resulting in being locked out),
  • finding a PIN,
  • working out puzzles or distorted letters,
  • copy characters correctly from another device.

Users can stop after getting frustrated with time-limited procedures or presentations of digital security tokens. Or they can be locked out of vital services because of their disability.

Without this design requirement, many people cannot use an application or content at all. See Security and Privacy Technologies issue paper for the full description of this issue, and how it stops people from using web services that are often critical. For example, many people cannot make doctors’ appointments, etc., by themselves. This may be partly responsible for the reduced life expectancy of people with learning and cognitive disabilities.

4.7.1.4 More Details

There are many ways to meet this design pattern:

  • Use Web Authentication: An API for accessing Public Key Credentials [webauthn-2] to support inclusive alternatives that do not rely on typical cognitive abilities. For example, hardware authentication devices, smartcard or FIDO.
  • Provide automatic user authentication based upon the use of a trusted device (to which the user has already logged in with their own identity). The user does not have to transcribe characters, but may have to press a link to identify they have the device.
  • Allow a biometrics option.
  • Use a system the user is already logged into via third-party authentication services (e.g., OAuth etc.).

Methods of meeting requirements for alternative user authentication would include:

  • Clicking a link sent to an email address or a phone number. (Note that this is easy to implement and may be useful for minimal security, such as allowing comments on a blog.)
  • Logging in by using information present in users’ personal documentation, such as the total number of a current account balance, with explanation on how to find this information.
4.7.1.5 Examples

Use:

  1. Web Authentication: An API for accessing Public Key Credentials [webauthn-2].
  2. Single Sign-on (SSO) that allow users to access many sites with a single login (federated login).
  3. Two step authentication with Bluetooth links (no copying).
  4. Quick Response Codes (QR Code).

Avoid:

  1. Using two-step authentication that requires copying.
  2. Using a password and not allowing pasting into the field.

4.7.2 Allow the User a Simple, Single Step, Login (Pattern)

I need the login process to be simple, and not multi-step.

Related User Story: Accessible Authentication.

4.7.2.1 What to Do

Provide a simple, single-step alternative for logins.

4.7.2.2 How it Helps

A simple login allows people with impaired executive function or impaired memory to use applications. This is especially important for users who become confused or overwhelmed with multi-step processes. For example, a user with traumatic brain injury wishes to use a site for online banking. They may have put their finger on a fingerprint scanner to authenticate who they are. Other examples include some third party logins.

4.7.2.3 Examples

Use:

  1. Easy third party logins as an option.
  2. The web authentication protocol [webauthn-2] with a single step method that matches your security needs.

Avoid:

  1. All login methods involving multiple steps.

4.7.3 Provide a Login Alternative with Less Words (Pattern)

4.7.3.1 User Need

I need a login process I can use that does not rely on a lot of words (as someone with a severe language impairment).

Related User Story: Accessible Authentication.

4.7.3.2 What to Do

Provide at least one login alternative that does not require reading or writing a lot of words

4.7.3.3 How it Helps

This pattern allows people with language and communication disabilities to login without being overwhelmed by blocks of text.

For example, someone with a severe language impairment using an AAC device wants to send a message to their doctor. They can press the login with the icon they know and send a message without having to read text.

4.7.3.4 Examples

Use:

  1. Third party logins which have well known icons.
  2. The web authentication protocol [webauthn-2] along with an easy login option.

Avoid:

  1. Logins that requires answering security questions.
  2. Logins without a simple, word free, login option, or alternative.

4.7.4 Let Users Avoid Navigating Voice Menus (Pattern)

4.7.4.1 User Need

I need to get human help, without going through a complex menu system.

Related User Story: Voice Menus.

4.7.4.2 What to Do

Let people easily reach a human who can help. Do not require navigating menu systems to reach a human.

Design helpful voice menus by:

  • Providing a known word or reserved digit (such as “0” or “help”) that can be used at any time to skip the voice menu and go directly to a person.
  • Avoiding unnecessary steps or options.
  • Avoiding unnecessary or distracting information such as promotional information.
  • Using words normally used by people with a wide range of cognitive and learning disabilities.
  • Waiting for a slow speaker to respond.
  • Allowing for a quiet speaker, repetition, and stutters.
  • Supporting forgetfulness and memory impairments.
  • Allow for easy error recovery.
  • Following usability best practices.
4.7.4.3 How it Helps

Many people cannot use voice menu systems. This often stops people from completing critical tasks by themselves. Often this can include making doctors’ appointments, getting health insurance, reaching social services, getting their water turned back on, etc.

If people cannot manage voice menus by themselves, they have to ask someone else to help them. This means the service is not accessible to them. Sometimes tasks are not done. For example, they may delay making a doctor’s appointment or other critical task as not to bother their helper. People often do not get the help they need or get it too late. (This may be partly responsible for the lower life expectancy of people with learning and cognitive disabilities.)

Why can’t people use complex menus?

  • A good short-term and working memory (several seconds) is essential so that the user can remember the number or the term for the menu. Without these functions the user is likely to select the wrong number.
  • Many users have an impaired working memory. For example, if you can remember 7 letters or items in your head at the same time they may be able to remember one or two. This makes them less likely to manage a menu system correctly.
  • For example, a phone menu system (voice markup system) may have an option: “Press 3 for internal services”. To use this option the user must remember a digit 3 while figuring out if they need an internal service. Many people cannot do this. It also requires them to press the correct digit.
  • When a lot of irrelevant information is given before the correct option, the user may have cognitive overload and stop. This is especially true if they did not understand all the earlier options and information.
  • They may not understand the terms used. Having focused on the menu, they may forget why they are calling.
  • Alternative routes, such as web menus, may be provided but are also complex. They are therefore not helpful.

The 0 digit, the word “help” or other culturally appropriate term, should be reserved for reaching a person. Consistently set the first option for each menu to: “to wait for a person who can help you press 0”. This can help everyone reach the support they need.

Test any system with a wide range of users with different learning and cognitive disabilities. Involving a wide range of users has made many voice systems accessible to the extent that they become an aid people with cognitive and learning disabilities.

4.7.4.4 More Details

Follow best practices in general voice user interfaces (VUIs) design. Standard best practices in voice user interfaces apply to users with cognitive disabilities, and should be followed. These practices are improving as more designs focus on conversational interfaces. Some examples of generally accepted best practices in voice user interfaces design:

  • Pauses are important between phrases in order to allow processing time of language and options.
  • Options in text should be given before the digit to select, or the instruction to select that option. This will mean that the user does not need to remember the digit or instruction whilst processing the term. For example: The prompt “press 1 for the secretary,” requires the user to remember the digit 1 while interpreting the term “secretary”. A better prompt is “for the secretary (pause): press 1” or “ for the secretary (pause) or for more help (pause): press 1”.
  • Error recovery should be simple, and take the user to a human operator if the error persists. Error responses should not end the call or send the user to a more complex menu.
  • Advertisements and other extraneous information should not be read as it can confuse the user and can make it harder to retain attention.
  • Terms used should be as simple and jargon-free as possible.
  • Use Tapered prompts. Best practices in voice user interfaces design include providing several different prompts for each point in the interaction. The different prompts are used based on the user’s behavior. For example, if the user takes a long time to respond to a prompt, a simpler or more explanatory version of the prompt can be used instead of the default. They should be used to increase the level of prompt detail when the user does not respond as expected.

User settings

User-specific settings can be used to customize the voice user interfaces (such as menus, and options). Keep in mind that if it is difficult to set user preferences, they won’t be used. Setting preferences by natural language is the most natural (”slow down!”), but is not currently very common.

  • Extra time should be a user setting for both the speed of speech and ability for the user to define if they need a slower speech or more input time etc. Timed text should be adjustable (as with all accessible media).
  • The user should be able to extend or disable timeouts as a system default on their device.
  • Error recovery should be simple, and take you to a human operator. Error responses should not throw the user off the line or send them to a more complex menu. Preferably they should use a reserved digit for support and human help.
  • Advertisement and other information should not be read as it can confuse the user and can make it harder to retain attention.
  • Terms used should be as simple as possible.
  • Examples and advice should be given on how to build a prompt that reduces the cognitive load
    • Example 1: Reducing cognitive load: The prompt “press 1 for the secretary,” requires the user to remember the digit 1 while interpreting the term secretary. It is less good then the prompt “for the secretary (pause): press 1” or “ for the secretary (pause) or for more help (pause): press 1”.
    • Example 2: Setting a default for a human operator as the number 0.

Considerations for Speech Recognition

  • For speech recognition based systems, standards for voice commands for many languages exists and should be used where possible, such as the ETSI standard ETSI 202 076. Keep in mind that expecting people to learn more than a few commands places a cognitive burden on the user.
  • Natural language understanding systems allow users to state their requests in their own words. This can be useful for users who have difficulty remembering menu options, or who have difficulty mapping the offered menu options to their goals. However, natural language interfaces can be difficult to use for users who have difficulty producing speech or language. Directed dialog (menu-based) fallback or transfer to an agent should be provided. Such fallbacks should be easy to use and conform to this document.

Follow requirements of legislation.

For example, the U.S. Telecommunications Act Section 255 Accessibility Guidelines [Section255] paragraph 1193.41 Input, control, and mechanical functions, clauses (g), (h), and (i) apply to cognitive disabilities and require that equipment should be operable without time-dependent controls, the ability to speak, and should be operable by persons with limited cognitive skills.

See Voice Menu Systems issue paper for a full discussion.

4.7.4.5 Getting Started

Ensure this pattern is included in important systems that affect health, finance, communication, water, and government services.

4.7.4.6 Examples

Use:

  • User interaction dialogs in which the first option takes you directly to a human. For example: “To reach for a person who can help you, press 0 or say help”.
  • Error recovery from each point, allowing the user to fix errors easily.
  • The user can easily go back or repeat the list at any point.
  • A user-interaction dialog, such as the standard “0” from any point, where there is easy access to a human operator who can help users achieve their goals.
  • Speech is clear, with pauses.
  • Common words are used.
  • State the option before giving them the key to press or term to use.
  • Advisory technique: Cueing users to record something that may be useful at a later point, and give them time to do so.

Avoid:

  • Long menu systems that make it hard to find a person.
  • Unclear error recovery.
  • Complex language and uncommon terms.
  • Unnecessary content, such as promotions.
  • Fast speech, or expecting fast inputs from the user.
  • Systems that were not tested with a wide range of users with different cognitive and learning disabilities.

4.7.5 Do Not Rely on Users Calculations or Memorizing Information (Pattern)

4.7.5.1 User Need

I need navigation and processes that do not rely on memory.

Related User Story: Previous Steps.

4.7.5.2 What to Do

Create a process that does not require:

  • remembering digits to select for a short time,
  • performing calculations,
  • copying,
  • clear speech or fast responses,
  • memorizing characters, strings, or pin numbers,
  • using executive function to work out the category of the service they need,
  • recalling information over multiple steps. When going through multiple steps, each step in a process must contain the information needed to allow a user to proceed. They must not rely on memory from prior steps.

Instructions and labels should be located before a call to action or activation mechanism. When appropriate, provide a summary of information from previous steps, and a mechanism for traversing the process.

4.7.5.3 How it Helps

Often content has barriers which prevent users with cognitive and learning disabilities from completing a step or process, and as a result, prevents them from achieving whatever they wished to achieve.

To increase security when making a purchase, sometimes puzzles or calculations are required. For example: To finalize a purchase, a user is asked to enter the result of multiplying positions 1 and 2 of a number. This type of statement cannot be understood by some people with cognitive and learning disabilities. Both security and cognitive accessibility should be guaranteed.

Many users have an impaired working memory. They cannot remember many details at the same time. However, systems, such as dialog menus, rely on all users using working memory to make choices. They expect the user to remember several choices and to select one choice, whether by speaking or through a key press. The user needs to hold multiple pieces of transitory information in the mind.

Users with an impaired executive function may need more time to complete a task. But there can also be problems if the system response is too slow. For example, some people may need longer to compare similar options such as “billing”, “accounts”, and “sales” and decide which is the service they need. Using clear language will also help.

4.7.5.4 More Details

Good practice that reduces the reliance on memory skills include:

  • Each step in a process should contain the information necessary to allow a user to proceed. They must not rely on memory from prior steps.
  • Providing a simple way to go back without having to start at the beginning.
  • Inform users of where they are in the process, for example, through a step indicator.
  • If users make a mistake or error, provide help to fix it rather than restarting the process.
  • When useful, provide a summary of information from previous steps, and an easy mechanism for traversing the process is available.

For voice interfaces:

  • Pause between each option.
  • Waiting for a slow speaker to respond.
  • Listen for a quiet or hesitant speaker.
  • Allow simple, one word responses
  • State the option before the number to command to be selected.
  • Support forgetfulness and memory impairments.

Note that this is essential for critical systems such as health, finance, communication, water, and government services.

4.7.5.5 Examples

Use:

Processes that do not rely on memory. For example:

  • Using user interaction dialogs in which the first option “to wait for a person who can help you press 0 or say help”.
  • Using a user-interaction dialog, such as the standard “help” from any point, where there is easy access to a human operator who can help users achieve their goals.
  • Good error recovery so that the user knows how to go back from any point.
  • Advisory technique: Cue users to write something that may be useful at a later point, and give them time to do so.

Avoid:

  1. Processes that rely on memory. For example:
    • Requiring the user remember a code or a category from a previous step.
    • Long menu systems that make it hard to find a person.
    • Systems that require use of specific words that the user has to remember.

4.8 Objective 7: Provide Help and Support

Support different ways of understanding content. Provide extra help and support such as:

  • graphics,
  • summaries of long documents,
  • icons with headings and links, and
  • alternatives for numbers.

Explain choices to help the user successfully complete their tasks.

Make it easy for users get help when they run into difficulties and give feedback. If users have difficulty sending feedback, they cannot tell you if they are unable to use the content. You will not know when they are experiencing problems.

Some applications depend on user data, such as smart cities. Data from users who cannot use the system can be missing from data driven systems. The problem is worse when they cannot even give feedback about their problems. They become invisible and their needs are not met.

4.8.1 Provide Human Help (Pattern)

4.8.1.1 User Need

I need to know how to get human help and can manage the process easily.

Related User Story: Help.

4.8.1.2 What to Do

Many people rely on human help. When possible, there is human help available, and it is easy to use. This includes:

  • Easy to find on each page and at each step of a process.
  • Easy to use via the mechanism the user prefers.
  • Requires as few steps as possible, such as:
    • a form with two fields,
    • an email address, or
    • a phone number that goes directly to a human.

Access to human help should never require the user to manage complex menu systems such as a voice menu with many different options.

Organizations mechanisms should be in place to ensure support staff effectively help people with learning and cognitive disabilities and provide a good experience.

4.8.1.3 How it Helps

When a user gets stuck or confused for any reason, getting help from a human is usually the most effective solution. In reality many sites provide this option only to users who can navigate complex systems.

Examples of complex system include a process where a user needs to follow many links to get to the human contact information. It could also be a phone number requiring the user to answer many questions before connecting with a person. With a complex system, the people who need it most will not have access to the human help option. They may the user may have cognitive overload and stop trying to complete the process. They may also leave with a negative attitude towards the service or supplier.

For example, a user with an intellectual disability wants to use a coupon. They cannot find the instructions for applying the coupon to their online purchase, and they cannot find the phone number for support. They effectively cannot use the coupon.

4.8.1.4 Examples

Use:

  1. A phone number, ideally with a feature to automatically call via an interoperable Voice user interfaces (VUIs) specification.
  2. A number that goes directly to a human or an available standard to get human help for example, using the 0 digit on voice menu systems.
  3. An email link using the “mailto” protocol [mailto] with prefilled “to” and “subject” fields. Note that this will not work on all platforms or mail clients.
  4. An option for live chat or video call help. Note: It must be fully accessible and easy to close new windows that open as part of live help functionality. Ensure live chats do not distract users from their task.

Avoid:

  1. Long contact forms the user must fully complete to get human help.
  2. Multi-step menus to reach help.
  3. Including the contact information on a single page that is only linked to from a few pages on the site.
  4. Forcing users to go through multiple steps to get to human help.

4.8.2 Provide Alternative Content for Complex Information and Tasks (Pattern)

4.8.2.1 User Need

I need contextually-relevant graphs and pictures to supplement text.

Related User Story: Help.

4.8.2.2 What to Do

Provide content that helps users understand complex information.

This should include redundant information for different user groups such as:

  • summaries of long documents and step-by-step information in easy to understand language,
  • explanation of choices and any disadvantages,
  • tables and charts,
  • symbols that are familiar to the user,
  • well-structured video content,
  • pictures and informational graphics, and
  • alternatives for numeric content.

Where there is alternative or supplemental content:

  • Provide an easy, single action mechanism for the user to be able to find and select the content format or version that is easiest for them to understand.
  • Dedicated help and alternative content should be clearly differentiated from primary content.
  • Make the relationship between the alternative content and the primary content clear.
4.8.2.3 How it Helps

The use of complex information, long documents, and complex data formats can present significant barriers to users with cognitive accessibility needs. Users should be able to understand the information and successfully complete described tasks without requiring further external assistance as much as possible.

Sometimes the content’s subject matter is complex. In this case, it is likely to need careful explanation, organization, and presentation so as many users as possible are able to understand without any mistakes, confusion, or need of assistance.

The way information is presented, such as a graph, diagram, or table, may make it more complex for some users. Here, a supporting description and guided interpretation will highlight the key features the user needs to understand.

Different people find different types of information easier to understand. This is particularly true for people with cognitive and learning disabilities. For example, some people have an impairment that affects numbers but not language, and other people have a language impairment but may intuitively understand numbers. Help may be provided in various forms, to support different users, for example:

  • Text “asides” providing explanation and help for diagrams.
  • A supporting chart or graph to illuminate text content.
  • Video clips that show the tasks being completed in steps.
  • A supplemental table, that is not complex.
  • Popup on hover explanations of keywords, possibly linked to a glossary.
  • A flow chart of steps in a process.
4.8.2.4 More Details

Recommended techniques for content relating to numbers and complex information (use whichever apply).

  • Charts or graphics are provided where they aid the comprehension of complex information.
  • Tables are provided where they aid the comprehension of information.
  • Where an understanding of mathematics is not a primary requirement for using this content, use one of the following:
    • Reinforce numbers with non-numerical concepts, e.g., Very Cold, Cold, Cool, Mild, Warm, Hot, Very Hot.
    • Once it is mature you can also use personalization semantics to add non-numerical concepts. See [personalization-semantics-1.0].
  • For content with sections use one of the following:
    • Enable semantics to add symbols to sections.
    • Add icons as an addition to headings, key short sentences and phrases to aid understanding.
    • However, as some people have difficulty remembering icons, use text with the icons.
      • Use clear icons or symbols that can easily be seen and expanded.
      • Use images understood by different users.
      • In left to right languages place the image to the left of the text.
  • Recommended techniques for content with more than 300 words
    • Provide an Easy to Understand summary using common terms and short blocks of text. For pieces of content with less than 300 words the heading may act as a summary.
    • Semantic headings are used to break the information down into a more manageable size and provide structure to the information being presented. This particularly benefits users of Assistive Technology.
    • The content owner identifies at least two keywords that aid comprehension for the user and these keywords are programmatically determinable and emphasized in the preferred modality of the user.
4.8.2.5 Getting Started

Provide explanatory content for complex information that is important for successful completion of a task including tasks in the real world.

4.8.2.6 Examples

Use:

  1. The techniques in the “more details” section above for long documents, documents with multiple sections, complex information, and numeric information. For example:
    • The explanation of a medical procedure and success rate statistics is amplified through the use of an additional text aside, a diagram, and a graph.
    • The multi-step process for applying for a visa is made easier to use by adding a flow chart of all the steps that are always visible. Each step in the flowchart has links to extra help and the current step is clearly highlighted.

Avoid:

  1. Long documents without a good structure and summary.
  2. Complex information and numeric information without extra support. For example:
    • A long text and data table of sales figures is shown without any explanation of the key features that relate to the content.

4.8.3 Clearly State the Results and Disadvantages of Actions, Options, and Selections (Pattern)

4.8.3.1 User Need

I need support and explanations for any choices. The advantages or disadvantages are clear to me and I understand the effects of the choice I might make.

Related User Story: Cognitive Stress.

4.8.3.2 What to Do

When presenting users with actions and selections, clearly explain the benefits, risks and consequences of each option. This includes any:

  • changes from what the user asked for,
  • disadvantages from the standard product or offering,
  • features that may be a risk to users wellbeing or finances.
4.8.3.3 How it Helps

Clearly stating benefits and consequences of each action and selection option helps individuals avoid mistakes. This is particularly important when the results cannot be easily corrected, lead to safety risks, or may never be known.

For example, a user of a travel site is booking a trip to Geneva. They see an option at a good time, but this ticket is to a different city. They assume the options given are to the location they asked for. They check the dates and times, but, because they can only read by spelling out words, they do not notice the changed destination. They are taken to a different location than their hotel, and the vulnerable user arrives at night in an unfamiliar city without accommodation.

In another example, a user sees a laptop for sale at a good price. They do not see the refurbished word in the long description. The laptop is not actually a good price.

4.8.3.4 Getting Started

Whenever you ask the user to make a selection or take an action, consider whether there are any implied or hidden results that the user should be aware of. Clearly indicate those results within the user interface and confirm the user is aware of them.

4.8.3.5 Examples

Use:

  1. Clear lists of what is included and what is not included. For example:
    • When choosing an airline ticket. Next to each option, there is a clear list of what is included.
  2. Warnings about any changes or risks. For example:
    • When choosing an airline ticket, if a ticket option is to a different destination or there is another unusual action or change that could be unwanted or have risks, the user is asked to confirm the change.

Avoid:

  1. Details that are not clear when the user selects an option.
    • For example: Meal options from an online menu have fun names. The meal contents, side items, allergy information and ability to customize each option is not visible until two steps later in the process. A customer must go several screens down on each item in order to make a decision.
  2. Changing items from the original request without warning the user.
  3. Risks to the user without warnings.

4.8.4 Provide Help for Forms and Non-standard Controls (Pattern)

4.8.4.1 User Need

I need explanations for unusual controls in a form I find easy to use (such as a video or text).

Related User Story: Task Management.

4.8.4.2 What to Do

Provide help for any complex forms, particularly when there are multiple steps, unusual interactions, non-standard controls, and required fields that do not support autocomplete. Give examples that make it easy to understand what to do.

4.8.4.3 How it Helps

Users often find forms and related tasks to be the most complex experience with web sites. They can easily become confused, unsure, or even completely lost. Providing extra help can make the difference between being able to successfully complete a task and giving up. This is especially true if any part of the form is complex or requires nonstandard interactions.

Many standard form controls provide support automatically. For example, many fields can be automatically filled in with information using autocomplete or personalization semantics [personalization-semantics-content-1.0]. Then the user will not make mistakes filling it out.

When you require additional fields and nonstandard controls many users will have difficulty using them. Many users with disabilities will get the information incorrect or be unable to work out how to complete the task. Often this results in the task being completely abandoned. In other cases, the user asks a caregiver for help to complete the form or work the control. In either case, they have not been able to complete the task because of their disability.

The standard [HTML] forms and controls have been carefully specified for maximum usability and accessibility. They are usually understood by users, especially if they are familiar with web interactions. However, users are likely to experience difficulties if the standard form behavior has been altered or completely new controls are provided. Assuming the new behaviors have been carefully designed and user tested, users may still require help in order to successfully use them.

4.8.4.4 More Details

Examples of forms and controls that are likely to require additional help:

  • Password fields that require certain character types of characters to be entered.
  • Surveys with complex interactions, for example, where buttons only appear depending on previous answers.
  • Date entry where there could be some ambiguity about the required format.
  • Custom controls like date pickers where some dates may be grayed out.
4.8.4.5 Examples

Use:

  1. Standard controls
  2. Non-standard controls and form fields with instructions or help. For example:
    • An accessible help button next to a nonstandard control.
    • A standard mechanism for context sensitive help. This can include using personalization semantics for context sensitive help.
    • Clear and unambiguous instructions that are easy to find.

Avoid:

  1. Non-standard controls and unusual form fields that do not have instructions or help. For example:
    • A form has a complex mechanism for enabling and disabling sections as you scroll or tab between them, but no help is provided.

4.8.5 Make It Easy to Find Help and Give Feedback (Pattern)

4.8.5.1 User Need

I need to get help and give feedback easily from every place where I get stuck.

Related User Story: Help.

4.8.5.2 What to Do

Make it easy for the user to ask for help or report issues at any point in a process. This includes:

  • Easy to Use: Feedback information and forms are simple and clear. (User testing with different user groups is highly recommended.)
  • Easy to Find: Available from any place where the user may get stuck.
  • Using a preferred communication method such as a form, email, chat, or phone support.

The option to provide feedback should never require the user to manage complex menu systems such as Interactive Voice Response (IVR) with many different options.

4.8.5.3 How it Helps

Providing an easy way for users to give feedback will help people be able to share problems, ask for help, make suggestions, and give positive comments. If users cannot give feedback easily, problems will continue to exist without the site owner being aware of the problems. It is essential to allow users to provide feedback from any point in the process so that people do not get lost when trying to explain why they are stuck. Ideas for improvements and positive feedback will also be missed.

For example, a user with a cognitive and learning disability struggles to use an ecommerce site. They have an idea about how to make it much easier to use. They spend an hour trying to give the feedback and then they stop trying. The site continues to lose customers.

4.8.5.4 More Details

Make sure the feedback option is:

  • simple to use,
  • available in all stages of the process,
  • a process that responds helpfully to any feedback submitted,
  • easy to complete and does not make the user provide unnecessary information, and
  • not reliant on complex menu systems.

Providing multiple methods for gathering feedback is recommended. For example, on a web site, consider providing all 4 options for feedback including live chat, a phone number, a web form, and a feedback email address.

Note that chat bots may not be appropriate for this particular type of feedback other than to start the feedback process. These can be extremely frustrating if you cannot easily get to the area you are trying to reach.

4.8.5.5 Examples

Use:

  1. Simple feedback mechanisms that are available on each screen. For example:
    • A banking web site had a major accessibility problem that blocked some customers from paying their bills online. A feedback form was on the page where the customer got stuck. A customer was able to report the problem and a help desk employee reached out to help them complete their bill payment successfully. That help desk employee also reported the accessibility problem to the software team.
  1. Multiple feedback mechanisms such as:
    • Web Chat or Web Call - An option to provide feedback using live chat or a video call. Note: The live chat or video call feature must be fully accessible. Web chat should not be a distraction and easy to close. Check usability with user testing.
    • Phone - A feedback phone number, ideally with a feature to automatically call via Voice user interfaces (VUIs) . Make sure there are no complex voice menus.
    • Web Form - A simple site contact form with no more than 3 required fields.
    • Email - An email link using the “mailto [mailto]” protocol with prefilled “to” and “subject” fields. Note that this will not work on all platforms or all mail clients.
    • Interactive Voice Response (IVR) - Provide an automatic option at the end of an IVR to give feedback by pressing a specific digit on the phone.

Avoid:

  1. Complex feedback mechanisms.
  2. A single way to give feedback that not everyone can use.

4.8.6 Provide Help with Directions (Pattern)

4.8.6.1 User Need

I need help understanding and using directions and navigation.

Related User Story: Help.

4.8.6.2 What to Do

Content is provided that helps users understand and use directions or navigational systems. This can include:

  • Providing landmarks that are easily recognized.
  • Providing cardinal directions (general or global) that can be related to a static object such as north of the tower.
  • Helping people avoid changes that confuse them, such as a change of orientation or routing.
  • Facilitating reorientation when leaving the route.
  • Supporting different ways people are aware of distances.
  • Allowing personalization of terms such as directions and measurements.
4.8.6.3 How it Helps

People with cognitive and learning disabilities experience different levels of difficulty with wayfinding directions or wayfinding applications. The help needed to address wayfinding issues can be different for indoor navigation, where there are more stimuli, and outdoors, where there can be more demands on memory. The help needed also varies with the individual.

Wayfinding requires many cognitive functions. Designs should accommodate a wide range of cognitive and learning disabilities including those supported by other design patterns. For example:

  • memory,
  • executive function,
  • spatial orientation,
  • visual/spatial attention, perception, and processing,
  • spatial disorientation anxiety,
  • language processing,
  • intellectual,
  • attention.

Some users may need more detailed help, such as step-by-step directions. Many users need to preview a route before following it. Then landmarks can help with recognition and orientation as well as reducing anxiety. Alternative relative directional terms and cardinal directions matching a user’s preferences are most effective. For example, the application could refer to “the driver’s side” or “the East Wing”. Helping people imagine relative and absolute distances can help, for example, “you’ve travelled half way”.

Due to the wide variation in personal requirements, personalization mechanisms can be very useful. For example, the units used for distances. Platforms or other technologies often provide personalization options for relative and cardinal directions and terms which can be used. For example, the platform locale settings.

Changes can be very confusing. A user may be prepared to change the route to save hours of traffic, but this will involve them pulling into a gas station to learn the new route. They may not want to change routes to avoid a small amount of traffic. Help the user to find the option that works for them.

For example, a person with traumatic brain injury is using a Global Positioning System (GPS). They review the route before leaving, and look at pictures of the turns. These preparations will enable them to follow the route. While driving, the route changes to avoid three minutes of traffic. They are no longer able to follow it and become lost.

4.8.6.4 Examples

Use:

  1. A second way to indicate left and right that is always available or a way to personalize the indication.
  2. Directions that use landmarks. For example, images of local landmarks are provided or can be added to help with orientation during wayfinding.
  3. Options that are available to avoid unwanted changes.
  4. Extra support that is available.

Avoid:

  1. Consistent reference to points of the compass including less well known ones (e.g. N by NE).
  2. Instructions that always assume that the person is at the expected location. They do not have an easy way to recover.
  3. Content that changes automatically in ways that the user does not want or control.

4.8.7 Provide Reminders (Pattern)

4.8.7.1 User Need

I need reminders integrated into my calendar, otherwise I will forget appointments and when I am meant to do things. Sometimes I need reminders to revisit a web site to complete the next task.

Related User Story: Support.

4.8.7.2 What to Do

Make it easy for the user to set a reminder for date and time sensitive events. Use standard application programming interfaces (APIs) when possible.

Reminders must be set only at the user’s request and the user must be able to personalize the remainder method.

4.8.7.3 How it Helps

People with cognitive and learning disabilities often have challenges managing events and time. (In fact, being unable to correctly manage events and time without support is a diagnostic criterion for some groups of disabilities.) This results in missing meetings, not submitting a request by a certain date or a form within a specified time period and missed opportunities. For example:

  • When the user copies information into a calendar they often copy the day or time incorrectly.
  • The user is challenged processing and retaining time based information.
  • The user may find it hard to sequence time-bound events.
  • The user’s skills decrease when tired to such an extent that they have to stop a task. They may wish to reschedule the task.

Using calendar APIs (or task manager) that allow the user to automatically add events and deadlines to their own calendar can help.

For example, a user with a cognitive and learning disability sets a doctor’s appointment online. Often they copy the details incorrectly into their calendar. However, in this case, the web site gives them an option to add the appointment to the calendar and sets a reminder an hour before. The user now comes to the correct place at the correct time with the correct papers.

The benefit to users with cognitive accessibility needs is that they can independently manage appointments, deadlines, and schedules. The ability to set reminders can reduce the cognitive load associated when processing time bound tasks. Time dependent activities may be monitored and tracked by the user to ensure that they are completed in a timely manner.

Always give the option to set a reminder at the end of the task so that the user does not get interrupted.

It is essential not to add unwanted reminders, as this makes the user’s calendar too full. This can even prevent them from being able to use their calendar at all. The user is the best person to know how many reminders, and which type, will best meet their needs.

4.8.7.4 More Details

Where a standard mechanism exists for the platform or technologies, it must be used. See:

Date and time sensitive events are any event that has to be completed by a certain time. The time constraints on such an event may be defined by a calendar date and time or by the total elapsed time.

Variables that could be considered include:

  • Time - at a logical time.
  • Location - prompted when at an appropriate location.
  • Context - on computer vs. mobile, on specific a site, etc.
4.8.7.5 Examples

Use:

  1. Options for the user to add the event to their calendar and set a reminder. For example:
    • A health care site allows you to set a local medical appointment. Once the appointment is set the user is given the option to add it to their calendar (automatically) with a reminder three hours before. They are also given the option to add or edit the reminder.

Avoid:

  1. Events that are added to the user’s calendar that the user does not want to attend.
  2. The user cannot automatically add the events and appointments they just set to their calendar. For example:
    • A health care site allows you to set a local medical appointment. The user is not given the option to automatically add it to their calendar or set a reminder.

4.9 Objective 8: Support Adaptation and Personalization

Many users need products that support adaptation and personalization. Users should be able to use add-ons and extensions as assistive technology. This includes spell checkers, passwords support, support for text-to-speech, and synchronized highlighting of the phrase being read.

Personalization can allow the user to select preferred, familiar options from a set of alternatives.

Support personalization and simplification when you can. Do not disable add-ons and extensions.

4.9.1 Let Users Control When the Content Moves or Changes (Pattern)

4.9.1.1 User Need

I need to know where things are. Controls and content do not move unexpectedly as I am using them.

Related User Story: Adapt.

4.9.1.2 What to Do

Ensure that changes of context, functionality, settings, route, and orientation are initiated only by user request or an easily available mechanism is available to turn off such changes. Also provide an easily available mechanism to go to previous context, functionality, settings, route, and orientation.

4.9.1.3 How it Helps

Any content, settings, or functionality which changes unexpectedly, without user initiation can result in significant problems for users with cognitive and learning disabilities. Unexpected changes in any of these areas can result in loss of focus, anxiety, or confusion in understanding or using a user interface (such as menus, buttons, and design components). Examples include, but are not limited to:

  • The automatic launching of new windows or pop-ups.
  • Submission of forms through mechanisms other than a button that is clearly labeled (using simple language to submit the form).
  • The opening of new content or a feature.
  • Unexpected changes when selecting an option.
  • Rerouting automatically by a Global Positioning System (GPS).
  • Changing the direction of a map in a GPS.

For example, a user may not have a sense of direction or know their left and right. Before using a GPS, they may study the route so that they know approximately what they are doing and can augment the directions of the GPS with their own context, using the GPS for cues. The GPS automatically reroutes them because of a small traffic delay. They become completely lost and disoriented and can no longer use the application.

In another example, a user is watching a video and wants to press “like”. As they are about to press the button, the controls shift and they load a different video instead of pressing “like”. They are now less likely to press “like” because they do not want to lose their content. As a result, their preferences are not taken into account.

Letting users control when content changes gives users with cognitive and learning disabilities more control over how web sites and applications behave. This gives them the opportunity to make choices that enable them to use the content and complete the task.

4.9.1.4 More Details

Exception: The changes are part of an activity where it is essential (e.g. a game).

Route: This is the directions and flow such as a GPS route.

Orientation: perspective or view such as map direction.

Easily available (or easily available mode or setting), is when one or more of the following is true:

  • It can be set one time with as a wide a scope as possible (such as using the standards of the Operating System (OS), From [ISO 9241-112] or [GPII] when available).
  • It has the option to save or to change the setting for the scope of the set of web pages.
  • It is reachable from each screen where it may be needed, and the path and the control conforms to all of this document.
4.9.1.5 Examples

Use:

  1. User control when content changes. For example:
    • The user can set to change the route if more than a specific amount of time is saved. They can add more information such as how many extra turns are acceptable for saving 5 minutes. When the GPS finds a new route that saves time, the GPS tells the user about the change including how many extra turns were added and how much time will be saved. The GPS asks the user if they want to change the route or if the GPS changed it, the user can go back to the original route in one touch or command.

Avoid:

  1. Content that changes without the user having control.

4.9.2 Enable APIs and Extensions (Pattern)

4.9.2.1 User Need

I need to use additional support features from widgets or extensions.

Related User Story: Extensions and APIs.

4.9.2.2 What to Do

APIs and extensions work with your content.

4.9.2.3 How it Helps

People with cognitive and learning disabilities are often using add-ons or extensions as assistive technology. For example:

  • reading of the long form of acronyms,
  • support for text-to-speech with synchronized highlighting of the phrase being read,
  • content simplification,
  • creating mind maps out of the heading structure,
  • support for retaining content that has already been entered,
  • password management,
  • spell checking,
  • changing the symbols or the interface,
  • changing numbers from digits to words and words to digits,
  • adding white space between lines, sentences, phrases, and chunks,
  • alternative ways to input the content such as speech recognition,
  • adding pictures.

However, sometimes a web site stops extensions and APIs from working. The result is that these users cannot use this web site.

If these add-ons and APIs are not supported, the author should provide support for all the functions of the add-ons used as assistive technology.

For example, a user with traumatic brain injury has executive function and memory impairments impacting their ability to remember details such as:

  • the icons or symbols on a Web of Things (WoT) interface,
  • their username and password,
  • what an acronym stands for,
  • a phone number, or
  • the meaning of uncommon words.

Supporting the use of an add-on that simplifies content and gives support (such as the long form of acronyms, and a popup dictionary) enables them to understand most content.

Supporting password management tools enables users to successfully login and avoid being locked out of secure sites.

Storing non-sensitive information and auto complete helps them fill out a form. This suggests common information, like a person’s phone number or address. It also helps them avoid making mistakes. It eliminates the need for accurately recalling this information from memory or having to copy and paste it, which is a task that often prevents them from successfully using a form.

When overwhelmed by textual content, they have an extension that inserts symbols that they are familiar with that helps them find the content they need.

Too many options may add to the complexity of interacting with IoT devices. Additional options should be easy to ignore and not require a lot of reading to understand that they are additional, as well as how to skip them.

Sometimes the Internet of Things (IoT) interfaces may confuse the user, such as a default “reading” on a meter being set to “2” and not “1.” The user would then need to reset it to “1.”

It is important in any proposed solution to make operational tasks, such as interacting with the IoT, as transparent as possible so that users can focus their attention on the functional aspects, such as relating to content.

4.9.2.4 More Details

People with cognitive and learning disabilities often use add-ons as assistive technology. It is essential that add-ons and similar tools work as expected, except when:

  1. A security or safety requirement requires that these APIs need to be disabled. In this case they should be disabled only for the relevant field(s).
  2. The add-on breaks the main function of the site, such as evaluation and testing applications.

When add-ons are automatically disabled by the code, the burden of supporting the extra functionality of the add-ons falls to the author.

4.9.2.5 Getting Started

Content can be used with APIs and extensions that support those with cognitive and learning disabilities.

Testing verified through the use of some of the APIs appropriate for the content. For example:

  • Testing with spell checker and password storage apps or extensions.
  • Test with an extension that adds to menu items (the right click options for desktops).
  • Test with a toolbar that enables simplification or personalization and is designed for people with cognitive and learning disabilities.
4.9.2.6 Examples

Use:

  1. Support for browser extensions and features, and personalization tool bars. Users are able to apply their settings from a personalization toolbar to improve the usability for them of the page.
  2. Extension that adds options to the right click work as expected.
  3. The page can be formatted and simplified from the user’s preferences in the operating system or user agent.

Avoid:

  1. Designs and code that stop browser extensions, settings and features, and personalization tool bars from working. For example:
    • Password storage applications do not work.
    • Distraction removing extensions do not work.
    • Spell checker extensions do not add options to the right click menu, or do not underline mistakes made by the user.
    • The correct symbols cannot be added by a simplification toolbar.
    • The page cannot be formatted or extra white space added.
    • The user cannot use their preferred font.

4.9.3 Support Simplification (Pattern)

4.9.3.1 User Need

I need less content without extra options and features as I cannot function at all when there is too much cognitive overload.

Related User Story: Adapt.

4.9.3.2 What to Do

Support simplification of your content. Often this includes allowing the user to:

  • Remove or hide features that most users do not use or that are not essential.
  • Get less text or more simple text.
  • Select the content format or version that is easiest for them to understand, or
  • Find the extra features when wanted.
4.9.3.3 How it Helps

A user who has difficulty reading or using web content can be easily overwhelmed with too much information on a web page. They need to simplify the page to include the critical information that they need and not spend all their energy reading and understanding other content and features. This is also true for users who are easily distracted.

For example, an email program has lots of features and formatting options when drafting an email. This makes it too complex for a lot of people. With personalization the user can have a simple option with only send and cancel options. There is a “to” and subject line but no cc or bcc options. In this setting there is a clear heading (write an email) and they have icons that the user understands.

4.9.3.4 More Details

Note that:

  • Typically, a simple application has 3 to 6 functions.
  • Make sure it is easy to get back to the full featured version.
  • You can meet this design pattern by:
    • supporting simplified versions from the browser,
    • using of data-simplification on regions and controls,
    • using other attributes in personalization semantics (see [personalization-semantics-1.0]),
    • adding a simplification toolbar, or
    • providing an alternative version.
4.9.3.5 Getting Started

Add data-simplification="critical" on content that is in any critical user testing paths.

4.9.3.6 Examples

Use:

  1. A simplified “reading” view that is available and easy to close.
  2. Applications that have 3 large features. Other features are in the footer or under a “more” option.
  3. A simplified version of the application is available.

Avoid:

  1. Simplified modes have unnecessary extra content or are not supported.
  2. Applications with lots of features and cannot be simplified. For example:
    • A busy email program has many control bars and features such as tagging, group tagging, start a new thread, etc. There is no easy way to simplify the page.

4.9.4 Support a Personalized and Familiar Interface (Pattern)

4.9.4.1 User Need

I need (a version of) a familiar interface, that I recognize and know what will happen.

Related User Story: Adapt.

4.9.4.2 What to Do

Provide users with a way to personalize their interface to make it familiar.

This can be done by:

  1. Allowing user preferences on presentation such as font style, font size, line heights, margins, and contrast. (Note: The default version should still be readable and use clear fonts.)
  2. Allowing a rollback to a previous interface that the user is familiar with and knows how to use.
  3. Adding semantics on controls, links, and symbols that allow the user to control the experience. For example:

Ensure the user knows the personalization options and can easily configure them. Clear instructions can help.

4.9.4.3 How it Helps

Personalization changes the interface to meet the needs of the user.

Having familiar terms and symbols is key to many users being able to use the web. However, what is familiar for one user may be unfamiliar to another requiring them to learn new symbols. Adding semantics allows symbols and support to be added by an extension or browser that is familiar to the individual user.

A stronger example is people using AAC. These users usually only learn one symbol set. They cannot easily communicate with other people using AAC in a written format or may struggle to understand different symbols used in different applications. When using personalization, such as [personalization-semantics-1.0] the user agents can load the symbols that are understandable by the individual user. The user can also access the Web and other applications.

Other support includes autocomplete and extensions that help the user fill out forms and understand the content. Many users with memory or executive function impairments cannot fill in forms without asking someone to help copy over information or check their work. Autocomplete allows many more users to manage forms by themselves.

4.9.4.4 Getting Started
  • Use the HTML autocomplete tags on all common fields.
  • Add a toolbar that adds personalized images.
  • Add the semantics that can work with a toolbar for personalized images.
4.9.4.5 Examples

Use:

  1. [HTML5] autocomplete tags on all common fields.
  2. True text to support browser preferences for styles.
  3. A toolbar that adds personalized images.
  4. Semantics that can work with a toolbar for personalized images or [personalization-semantics-1.0].

Avoid:

  1. Forms that do not support [HTML5] autocomplete.
  2. Default fonts that are not clear or readable such as a cartoon font or gothic.
  3. Pages that cannot easily be personalized.