This publication has been funded in part with Federal funds from the U.S. Department of Health and Human Services, National Institute on Disability Independent Living and Rehabilitation Research (NIDILRR) under contract HHSP23301500054. The content of this publication does not necessarily reflect the views or official policies of the U.S. Department of Health and Human Services, nor does mention of trade names, commercial products, or organizations imply endorsement by the U.S. Government.
67 |95 | This publication has been funded in part with Federal funds from the U.S. 96 | Department of Health and Human Services, National Institute on Disability 97 | Independent Living and Rehabilitation Research (NIDILRR) under contract 98 | HHSP23301500054. The content of this publication does not necessarily 99 | reflect the views or official policies of the U.S. Department of Health 100 | and Human Services, nor does mention of trade names, commercial products, 101 | or organizations imply endorsement by the U.S. Government. Some of the 102 | work on this project has also received funding from the European Union's 103 | Horizon 2020 research and innovation programme under grant agreement 104 | No.780529 and 643399. 105 |
106 |30 | 31 | Full details of how these are used can be found `wai-wcag-supplemental` repo. But in brief the sections are 32 | 33 | - title 34 | - summary - objectives only - copied from the Summary section of content-usable 35 | - ref - ref taken from the filename prefix, eg 01p01 36 | - github - repo and file details 37 | - sidebar - links to appear in the sidebar - eg user stories and personas 38 | -------------------------------------------------------------------------------- /design-guide/about.md: -------------------------------------------------------------------------------- 1 | # Introduction 2 | 3 |4 | title: About Design Guide 5 | permalink: ${{ FILENAME }} 6 | github: ${{ GITHUB_INFO }} 7 |8 | 9 | This guide provides assistance making web sites and applications friendly for 10 | people with cognitive and learning disabilities. The patterns in this 11 | guide provide practical guidance to improve the accessibility of designs and 12 | the design process. 13 | 14 | The objectives and patterns presented here provide 15 | 16 | supplemental guidance 17 | beyond the requirements of The Web Content Accessibility Guidelines WCAG 18 | [[WCAG22]]. They are intended to address barriers that could not be included 19 | in the normative WCAG [[WCAG22]] specification and may not otherwise be 20 | addressed. 21 | 22 | This guide is divided into design objectives. An outline of these objectives 23 | can also be found in the summary section. Simply understanding the objectives 24 | and related user stories may help designers make content more accessible to 25 | some users with cognitive and learning disabilities. 26 | 27 | Each objective contains a number of practical patterns (repeated designs for 28 | controls and other elements) that describe what to do to address user needs. 29 | Implementing these patterns is essential for some people with 30 | cognitive and learning disabilities to be able to use content 31 | independently. 32 | -------------------------------------------------------------------------------- /design-guide/o1-understandable.html: -------------------------------------------------------------------------------- 1 |Objective 1: Help Users Understand What Things are and How to Use Them
2 |3 | title: Help Users Understand What Things are and How to Use Them 4 | summary: Use icons, symbols, terms, and design patterns that are already familiar 5 | to users so that they do not have to learn new ones. People with 6 | cognitive and learning disabilities often need common behavior and 7 | design patterns. For example, use the standard convention for hyperlinks 8 | (underlined and blue for unvisited; purple for visited). 9 | ref: ${{ FILENAME_REF }} 10 | github: ${{ GITHUB_INFO }} 11 | sidebar: 12 | sections: 13 | - name: User Stories 14 | items: "Clear Purpose, Clear Operation, Symbols" 15 |16 | 17 |18 | Users with cognitive and learning disabilities may have trouble with 19 | orientation and learning. This can mean people get disoriented in a site. 20 |
21 |22 | Learning new things and remembering new information is especially difficult 23 | for people with cognitive and learning disabilities. They can also 24 | struggle or be unable to learn new design patterns. Make controls, icons and 25 | elements simple and conventional to help. 26 |
27 |28 | Make it clear to users what things are and how to use them. This includes 29 | clearly indicating the purpose of: 30 |
31 |
39 | Use headers, labels, and other signposts to help users know the purpose of the 40 | page, region, or control. 41 |
42 |Help users understand how to use controls and elements on each page.
43 |44 | Use familiar design patterns, terms, and icons to help users who struggle to 45 | remember new designs. Ensure the look, location, and interaction of controls 46 | and other elements are familiar and consistent across the site. 47 |
48 |49 | Show a clear relationship between controls and the content they effect to help 50 | users understand the effect of possible actions and reduce potential 51 | confusion. 52 |
53 | -------------------------------------------------------------------------------- /design-guide/o1p01-clear-purpose.html: -------------------------------------------------------------------------------- 1 |
3 | title: Make the Purpose of Your Page Clear
4 | ref: ${{ FILENAME_REF }}
5 | github: ${{ GITHUB_INFO }}
6 | sidebar:
7 | sections:
8 | - name: User Story
9 | items: "Clear Purpose"
10 | - name: Personas
11 | items: "Gopal, Kwame, Maria, Yuki"
12 |
13 |
14 | 17 |19 |I need to know the context and purpose of the page.
18 |
20 | Related User Story: 21 | Clear Purpose. 24 |
25 |Help the user know the purpose of the content. Use:
29 |40 | This helps many people, including those with impaired memory and attention 41 | as well as anyone who is easily distracted due to 42 | age-related forgetfulness and AD(H)D. 43 |
44 |45 | For example, someone with mild dementia is using online shopping. They get 46 | distracted and then when they look at the screen again they have forgotten 47 | what they were doing. A clear heading at the top of each page shows clearly 48 | what the page is about and what they are doing. 49 |
50 |51 | In another example, a user with AD(H)D is looking for information in 52 | a video. They can tell by the video title that this video has the 53 | information they need. 54 |
55 |56 | For this pattern to be useful, each page must have a clear purpose. It works best when each page covers 57 | a single unifying topic. (See pattern 58 | 4.3.2 Make the Site Hierarchy Easy to Understand and Navigate for more details.) 59 |
60 |Headings clarify the purpose of this specific page.
64 |65 | When possible, provide information to help users understand how they got to 66 | the page. For example: clearly indicating breadcrumbs on main navigation, 67 | highlighting currently selected tab, etc. 68 |
69 |73 | Use: 74 |
75 |80 | Avoid: 81 |
82 |
3 | title: Use a Consistent Visual Design
4 | ref: ${{ FILENAME_REF }}
5 | github: ${{ GITHUB_INFO }}
6 | sidebar:
7 | sections:
8 | - name: User Story
9 | items: "Clear Operation"
10 | - name: Personas
11 | items: "Alison, Amy, George, Gopal, Sam, Tal"
12 |
13 |
14 | 17 |22 |18 | I need to understand my options and the tasks I can perform and I can 19 | identify the controls I can interact with in order to complete actions. 20 |
21 |
23 | Related User Story: 24 | Clear Operation. 29 |
30 |Use a consistent visual design across groups of pages.
34 |38 | Many users take a long time to learn new designs and recognize elements. 39 | Once learned, the elements should be used throughout the site. 40 |
41 |42 | For example, an older user with age-related forgetfulness takes a 43 | long time to learn new designs. When they come to a site, the first page 44 | takes time to understand, but then they know what to do on the next page. If 45 | the next page is different from the first and also difficult to learn, they 46 | become tired and make more mistakes. As they move to a third difficult page 47 | the cognitive load becomes too much and they cannot complete the task. 48 |
49 |This includes:
53 |84 | Plan the design for your information before adding content. Think about the 85 | colors, font choices, and areas where text and images will appear. 86 |
87 |Use:
91 |Avoid:
115 | 116 |
3 | title: Make Each Step Clear
4 | ref: ${{ FILENAME_REF }}
5 | github: ${{ GITHUB_INFO }}
6 | sidebar:
7 | sections:
8 | - name: User Story
9 | items: "Clear Purpose"
10 | - name: Personas
11 | items: "Gopal, Kwame, Maria, Yuki"
12 |
13 |
14 | 17 |22 |18 | I need to recognize where I am in the architecture of the web site, 19 | application, or multi-step process, even after I get distracted. 20 |
21 |
23 | Related User Story: 24 | Clear Purpose. 27 |
28 |32 | Provide breadcrumbs, a “how I got here” button, or heading to help the user 33 | orientate themselves inside a site or task. 34 |
35 |In a multi-step process, this includes showing:
36 |46 | This pattern helps a user who loses focus, forget what they are doing or 47 | gets distracted reorient themselves to their current activity. Clearly 48 | indicating the current location and progress helps the user continue after 49 | they lose focus without reading a great deal of content or restarting. 50 |
51 |52 | Providing information about the steps that need to complete a task helps 53 | users determine if they can successfully finish the task. This is especially 54 | important for users who often find processes difficult to complete. 55 |
56 |Examples include:
57 |Use:
78 |Avoid:
95 | 96 |
3 | title: Use Icons that Help the User
4 | ref: ${{ FILENAME_REF }}
5 | github: ${{ GITHUB_INFO }}
6 | sidebar:
7 | sections:
8 | - name: User Story
9 | items: "Symbols"
10 | - name: Personas
11 | items: "George, Gopal"
12 |
13 |
14 | 17 |22 |18 | I need to know what features and content are on this page or if I should 19 | move on. 20 |
21 |
23 | Related User Story: 24 | Use Symbols. 29 |
30 |34 | Add familiar icons, images, and symbols to important content such as 35 | controls and section headings. Each icon or symbol should convey a single 36 | meaning and be next to the content it relates to. 37 |
38 |42 | People who have language comprehension, learning, or reading difficulties 43 | may rely on symbols to understand content and navigate to content they need. 44 | Symbols also help people who struggle with language and attention to 45 | navigate content, including media. 46 |
47 |48 | For example, a person with aphasia, has the intellectual ability to 49 | understand concepts, but struggles with language. They may be dependent on 50 | the use of symbols to browse pages for information. 51 |
52 |53 | It can also help the elderly population who can find cluttered pages with 54 | dense text hard to read on a screen. Clear symbols, icons, and images that 55 | act as signposts to the text content can be very helpful. 56 |
57 |Use common icons that the user is likely to understand.
83 | 84 |85 | Provide common icons next to key texts, headings, media sections, “contact 86 | us” buttons, and “help” buttons. 87 |
88 |Use:
92 |Avoid:
102 | 103 |
3 | title: Make it easy to go directly to the home page
4 | ref: ${{ FILENAME_REF }}
5 | github: ${{ GITHUB_INFO }}
6 | sidebar:
7 | sections:
8 | - name: User Story
9 | items: "Placeholder"
10 | - name: Personas
11 | items: "Placeholder"
12 |
13 | This pattern is new, editorial review is needed.
14 |17 |21 |18 | I need it to be easy to go to the home page when I get lost or disoriented. 19 |
20 |
22 | Related User Story: 23 | Placeholder. 25 |
26 |"Placeholder" needs to be replaced by real content in the section Related User Story [and also in corresponding 27 | Code/Include].
28 |32 | Make it easy to go directly to the home page of a site, subsite or app. 33 | To help users find the links to home page(s) on each screen, use: 34 |
35 |42 | Note the home page is sometimes referred to as the main screen (in an app) or 43 | landing page of a set of screens or Web pages. 44 |
45 |46 | This guidance also applies to home pages for subsites and sections of the site. 47 | For example, each department of a university may have its own home page. 48 | In such a case, make it easy to go to the homepage of both the site and the subsite that the user is currently on. 49 |
50 |54 | People who have cognitive and learning disabilities often get lost and disoriented when using apps and websites. 55 | This is often aggravated by stress, mental health and/or cognitive overload. 56 | Providing an easily identifiable starting point helps users know that they 57 | can always restart if they become disoriented or lost. 58 |
59 |60 | Making links to home page(s) more visible and recognizable provides a more efficient 61 | way for people with cognitive disabilities to reorient themselves 62 | and complete their intended tasks. 63 |
64 |65 | For example, a user with a cognitive and learning disabilities navigates a wrong path during a search attempt 66 | or gets lost while exploring a website. If a home page link and logo are easily identifiable, 67 | the user can directly go to the home page. It assures them that they can restart anytime if lost. 68 | They don't need to press the back button multiple times. This helps them restart their browsing task quickly. 69 | It prevents the negative impact on their efficiency that may be caused by reading 70 | every page on the way back to the home page. 71 |
72 |Use:
76 |Avoid:
91 |
3 | title: Help Users Find What They Need
4 | summary: Make navigating the system easy. Use a clear and easy-to-follow layout
5 | with visual cues, such as icons. Clear headings, boundaries, and regions
6 | also helps people understand the page design.
7 | ref: ${{ FILENAME_REF }}
8 | github: ${{ GITHUB_INFO }}
9 | sidebar:
10 | sections:
11 | - name: User Stories
12 | items: "Findable, Searchable, Clear Navigation, Media"
13 |
14 |
15 | 16 | Users with cognitive and learning disabilities may have trouble finding 17 | the content they need. They may also struggle to orient themselves inside the 18 | content or task. Users should be able to quickly and easily locate what they 19 | are looking for. Use a clear and easy layout to help users navigate the system 20 | easily. For example: 21 |
22 |
6 | title: Make it Easy to Find the Most Important Tasks and Features
7 | ref: ${{ FILENAME_REF }}
8 | github: ${{ GITHUB_INFO }}
9 | sidebar:
10 | sections:
11 | - name: User Story
12 | items: "Findable"
13 | - name: Personas
14 | items: "Alison, Amy, Kwami, Maria, Tal, Yuki"
15 |
16 |
17 | 20 |27 |21 | I need to find it easy to identify the content that I need, and do not 22 | need. Information I need to know and important information stands out, or 23 | is the first thing I read and does not get lost in the noise of less 24 | important information. 25 |
26 |
28 | Related User Story: 29 | Findable. 31 |
32 |36 | Make important tasks and features on the site stand out and easy to find. 37 |
38 |This includes:
39 |61 | People with impaired executive function, impaired memory, and other 62 | cognitive and learning disabilities may have difficulty determining 63 | what they can do on a site. By calling out important tasks and features, 64 | people can more quickly determine whether the site will meet their needs. 65 |
66 | 67 |68 | For example, a user goes to a web site to buy tickets. He sees many reviews 69 | and other information but cannot see how to buy the tickets. The user leaves 70 | the site. 71 |
72 |76 | Make important features and tasks both visually and programmatically 77 | prominent. See The Web Content Accessibility Guidelines WCAG [[WCAG22]]. 78 |
79 |Start by thinking about what are the key tasks for the user.
83 |Include:
84 |89 | Usage data can normally identify the most common tasks. Focus groups and 90 | surveys are also useful for identifying what users want. 91 |
92 |Use:
97 |Avoid:
107 |
3 | title: Break Media into Chunks
4 | ref: ${{ FILENAME_REF }}
5 | github: ${{ GITHUB_INFO }}
6 | sidebar:
7 | sections:
8 | - name: User Story
9 | items: "Media"
10 | - name: Personas
11 | items: "Yuki"
12 |
13 |
14 | 17 |22 |18 | I need to easily navigate to what I want, take breaks and easily jump back 19 | a step if I do not follow or get distracted. 20 |
21 |
23 | Related User Story: 24 | Media. 25 |
26 |Provide a logical organization and structure that is easy to navigate.
30 |Divide long pieces of media into segments that are:
31 |42 | Using a clear, logical structure, with headings allows users to orient and 43 | navigate through the content easily even if they get distracted or lose 44 | focus. This is particularly important for people with an attention 45 | impairment. 46 |
47 |48 | Providing short logical segments help users find and focus on a specific 49 | topic. If the user loses concentration they can find their place in the 50 | material and start again from the last point that they remember. This is 51 | especially important for educational content or instructions. 52 |
53 |54 | Chunking media also allows for each segment to be given a unique URI. It can 55 | then be easily referenced and shared. 56 |
57 |For example:
58 |Use:
92 |Avoid:
100 | 101 |
3 | title: Use Clear and Understandable Content
4 | summary: This includes easy words, short sentences and blocks of text, clear
5 | images, and easy to understand video.
6 | ref: ${{ FILENAME_REF }}
7 | github: ${{ GITHUB_INFO }}
8 | sidebar:
9 | sections:
10 | - name: User Stories
11 | items: "Clear Language, Visual Presentation, Math Concepts"
12 |
13 |
14 | 15 | Some users have impaired language skills. More of these users understand 16 | content which uses easy to understand language. For example, someone 17 | with a language impairment may be able to understand simple sentences and 18 | common words. However, complex language with uncommon words may be 19 | inaccessible to them. 20 |
21 |Help users understand the message and purpose of the page by using:
22 |32 | A good visual layout and small chunks of text makes content easier to 33 | understand. Use whitespace and good separation of foreground from background 34 | to help comprehension. Also, avoid relying on numerical or mathematical 35 | skills. 36 |
37 | -------------------------------------------------------------------------------- /design-guide/o3p02-simple-tense.html: -------------------------------------------------------------------------------- 1 |
3 | title: Use a Simple Tense and Voice
4 | ref: ${{ FILENAME_REF }}
5 | github: ${{ GITHUB_INFO }}
6 | ssidebar:
7 | sections:
8 | - name: User Story
9 | items: "Clear Language"
10 | - name: Personas
11 | items: "George, Kwame, Sam, Yuki"
12 |
13 |
14 | 17 |22 |18 | I need to understand the language used, including vocabulary, syntax, 19 | tense, and other aspects of language. 20 |
21 |
23 | Related User Story: 24 | Clear Language. 29 |
30 |34 | Use the tense and the voice that is easiest to understand. In English, this 35 | is usually the present tense and active voice. Speak directly to the user, 36 | and use the simplest form of verbs and sentence structure. 37 |
38 |39 | Use local plain language guidance to find the tense and the voice 40 | that is easiest to understand in different languages. 41 |
42 |46 | Using simple tense and voice benefits many people such as people with 47 | language impairments, dyslexia, or a memory impairment. For example, more 48 | people will understand “press the on button” (present tense and active 49 | voice) than “the on button should be pressed.” (passive voice). 50 |
51 |52 | Active voice makes it clear who is supposed to take action. For example, “It 53 | must be done.” is passive voice ad does not say who must act. “You must do 54 | it.” is active voice and clearly states who has the action. 55 |
56 |57 | Putting the aim of the sentence at the beginning can also make English 58 | sentences easier to follow. Local language experts may have additional 59 | linguistic advice that helps make content easy to understand. 60 |
61 |Use:
83 |Avoid:
89 |
3 | title: Avoid Double Negatives or Nested Clauses
4 | ref: ${{ FILENAME_REF }}
5 | github: ${{ GITHUB_INFO }}
6 | sidebar:
7 | sections:
8 | - name: User Story
9 | items: "Clear Language"
10 | - name: Personas
11 | items: "George, Kwame, Sam, Yuki"
12 |
13 |
14 | 17 |22 |18 | I need to understand the language used, including vocabulary, syntax, 19 | tense, and other aspects of language. 20 |
21 |
23 | Related User Story: 24 | Clear Language. 29 |
30 |Use a simple sentence structure.
34 |This includes:
35 |43 | Simple sentence structure benefits many people, including those with 44 | language impairments, dyslexia, or a memory impairment. Both double 45 | negatives and nested clauses can be confusing. 46 |
47 |48 | For example, more people will understand “You must get the agency’s approval 49 | before we can answer your claim”, rather than “No approval of any claims can 50 | be achieved without the agency’s approval.” 51 |
52 |53 | Simple language allows more people to understand. For example, a person with 54 | early stage dementia can manage their own affairs when the language 55 | is clear and understandable. 56 |
57 |Use:
61 |Avoid:
65 | 66 |
3 | title: Use Literal Language
4 | ref: ${{ FILENAME_REF }}
5 | github: ${{ GITHUB_INFO }}
6 | sidebar:
7 | sections:
8 | - name: User Story
9 | items: "Clear Language"
10 | - name: Personas
11 | items: "George, Kwame, Sam, Yuki"
12 |
13 |
14 | 17 |23 |18 | I need to understand the meaning of the text. I do not want unexplained, 19 | implied or ambiguous information because I may misunderstand jokes and 20 | metaphors. 21 |
22 |
24 | Related User Story: 25 | Clear Language. 30 |
31 |35 | Use literal and concrete language. When possible, use concrete terms and 36 | examples that refer to objects or events that you can see, hear or touch. 37 |
38 |Do not use metaphors and similes unless you include an explanation.
39 |43 | Many people do not understand non-literal content. For example, an 44 | autistic person may not understand jokes and similes. Sometimes 45 | instructions have jokes and similes to make the content friendlier. However, 46 | this confuses the user who now cannot do her job as needed. 47 |
48 |You can explain any non-literal language by:
49 |61 | In non-text media, explain non-literal content as part of the media or 62 | include it in a separate file or track. See best practices. 63 |
64 |68 | Make sure the meaning remains clear when you replace non-literal text with 69 | literal text. Check this when providing literal text in a popup or other 70 | alternative. 71 |
72 |76 | Start by putting clear literal text on headings, labels, navigational 77 | elements, instructions, error messages, and any content that may affect the 78 | user’s rights or wellbeing. This will increase the usability in critical 79 | places without changing your writing style. 80 |
81 |Use:
85 |Avoid:
98 |
3 | title: Include Symbols and Letters Necessary to Decipher the Words
4 | ref: ${{ FILENAME_REF }}
5 | github: ${{ GITHUB_INFO }}
6 | sidebar:
7 | sections:
8 | - name: User Story
9 | items: "Clear Language"
10 | - name: Personas
11 | items: "George, Kwame, Sam, Yuki"
12 |
13 |
14 | 17 |23 |18 | I need words to include accents, characters, and diacritics that are 19 | necessary to phonetically read the words. This is often needed for speech 20 | synthesis and phonetic readers in languages like Arabic and Hebrew. 21 |
22 |
24 | Related User Story: 25 | Clear Language. 30 |
31 |35 | Include vowels, letters, or diacritic marks that users need to decipher 36 | words correctly. This is often needed in languages like Arabic and Hebrew. 37 |
38 |42 | Some languages, such as Hebrew and Arabic, have optional vowels and 43 | diacritic marks. Without these marks, most words with the same characters 44 | have between two (Hebrew) and seven (Arabic) different ways of being 45 | pronounced with different meanings. Most readers can read the word based on 46 | the context, and use their visual memory to guess the correct pronunciation. 47 | People with impaired visual memory, slow readers, and text-to-speech may 48 | often guess the incorrect term or pronunciation. 49 |
50 | 51 |52 | For example, a user with a language disability is trying to sound out a 53 | word. They guess three different pronunciations until they find one that 54 | makes sense. Unfortunately, many people with language impairments cannot 55 | work out the meaning as words out of context may only provide an idea rather 56 | than a specific meaning. Text-to-speech often requires these characters to 57 | speak the correct word. 58 |
59 | 60 |61 | Note that not all diacritic marks are necessary to pronounce the word 62 | correctly. Only letters and diacritic marks that are necessary for the 63 | unambiguous pronunciation need to be included. 64 |
65 |Words can be deciphered and pronounced to have the correct meaning.
69 |73 | In Hebrew add additional Yud (י) and Vav (ו) that enables correct 74 | pronunciation. 75 |
76 |80 | Use: 81 |
82 |Avoid:
99 |
3 | title: Provide Summary of Long Documents and Media
4 | ref: ${{ FILENAME_REF }}
5 | github: ${{ GITHUB_INFO }}
6 | sidebar:
7 | sections:
8 | - name: User Story
9 | items: "Clear Language"
10 | - name: Personas
11 | items: "George, Kwame, Sam, Yuki"
12 |
13 |
14 | 17 |22 |18 | I need an easy to understand, short summary for long pieces of content or 19 | an option for an Easy to Understand version. 20 |
21 |
23 | Related User Story: 24 | Clear Language. 29 |
30 |Provide a brief summary for a long document and media.
34 |35 | Emphasize any important keywords to help people understand the purpose and 36 | content of the document, and determine if it might contain information they 37 | need. 38 |
39 |40 | Summaries should use common words, short sentences, and be written in an 41 | easy to understand style and tense. 42 |
43 |47 | Providing an easy to understand summary helps many people to quickly decide 48 | if the content is relevant to them and their current goal. A high level 49 | outline in a few sentences or bullet points is most effective. Abstracts and 50 | executive summaries are usually much longer and more detailed as they are 51 | designed to summarize the entire document. 52 |
53 |54 | For media, summaries help users with short attention span find the exact 55 | file they need and jump to correct content. All media files should have a 56 | summary description. 57 |
58 |62 | Provide a text summary that can be understood by people with lower secondary 63 | education level reading ability. 64 |
65 |66 | In pieces of content with less than 300 words, headings can act as a 67 | summary. 68 |
69 |70 | Summaries of each segment should include the main points from the content. 71 | Users should be able to use the summary to uniquely identify the content and 72 | know what it will contain. 73 |
74 |Use:
78 |Avoid:
84 |
3 | title: Separate Each Instruction
4 | ref: ${{ FILENAME_REF }}
5 | github: ${{ GITHUB_INFO }}
6 | sidebar:
7 | sections:
8 | - name: User Story
9 | items: "Support"
10 | - name: Personas
11 | items: "George, Kwame, Sam"
12 |
13 |
14 | 17 |19 |I need short boxes or chunks of content or sections
18 |
20 | Related User Story: 21 | Support. 22 |
23 |27 | In instructions, separate each step. State each step clearly. This includes: 28 |
29 |42 | Step-by-step instructions benefit many people such as people with language 43 | impairments, processing difficulties, or a memory impairment. 44 |
45 |46 | For example, a person with an impaired working memory cannot hold onto many 47 | pieces of information at the same time. They are more likely to make 48 | mistakes if they need to remember what they are doing, divide the steps, and 49 | track what they have done. When instructions are clearly separated and laid 50 | out, they can follow them without making mistakes. 51 |
52 |Use:
56 || If | 66 |Then | 67 |
|---|---|
| 70 | If you want to work in programing: 71 | | 72 |
73 |
|
79 |
| 82 | If you want to work in design: 83 | | 84 |
85 |
|
91 |
Avoid:
97 |
3 | title: Use White Spacing
4 | ref: ${{ FILENAME_REF }}
5 | github: ${{ GITHUB_INFO }}
6 | sidebar:
7 | sections:
8 | - name: User Story
9 | items: "Visual Presentation"
10 | - name: Personas
11 | items: "Amy, George, Gopal, Kwame, Sam, Tal, Yuki"
12 |
13 |
14 | 17 |22 |18 | I need a good use of white space, so that the chunks are clear and the 19 | page does not get overwhelming. 20 |
21 |
23 | Related User Story: 24 | Visual Presentation. 29 |
30 |34 | Put white space around objects and text, including boxes, paragraph 35 | headings, and content, so that each section is clearly separated. 36 |
37 |41 | White space (also called negative space or the background color) reduces 42 | clutter and provides definition to content. This gives the viewer a clear 43 | overview of a web page. It is used by designers to enhance text and the 44 | position of objects on a page. 45 |
46 |47 | Using white space aids navigation through a page and helps people read it. 48 | It can help the user find important elements on a page. For those with 49 | cognitive and learning disabilities, white space has been shown to 50 | ease reading difficulties and improve understanding of content. 51 |
52 |53 | Make sure users can also adjust the amount of white space around objects and 54 | text via a web extension or user setting. This supports the ability to 55 | identify important elements in the content of a web page. 56 |
57 |61 | Use clear spacing between letters, words, sentences lines, paragraphs, and 62 | blocks of text. 63 |
64 |65 | Allow for the ability to easily adjust white space around objects and text, 66 | including boxes, paragraph headings, and content, to a degree that suits the 67 | user and does not disrupt the overall integrity of a web page. Do not add so 68 | much white space that important content cannot be seen above the scroll. 69 |
70 |71 | Note that “white space” is a term that means the background color. It does 72 | not always need to be always white! 73 |
74 |Use:
78 |Avoid:
82 |
3 | title: Ensure Foreground Content is not Obscured by Background
4 | ref: ${{ FILENAME_REF }}
5 | github: ${{ GITHUB_INFO }}
6 | sidebar:
7 | sections:
8 | - name: User Story
9 | items: "Visual Presentation"
10 | - name: Personas
11 | items: "Amy, George, Gopal, Kwame, Sam, Tal, Yuki"
12 |
13 |
14 | I need to easily perceive the content, for example:
17 |22 | Related User Story: 23 | Visual Presentation. 28 |
29 |33 | Do not overlay words on busy backgrounds. Provide an option to remove 34 | background noise behind auditory content or ensure background sounds do not 35 | interfere with the main auditory content. 36 |
37 |For text:
38 |For auditory content:
48 |61 | Reading a sentence phrase by phrase conveys more meaning than reading 62 | individual words. Phrases are also easier to comprehend. The more words an 63 | individual can process in one glance, the faster they can read, the easier 64 | they can understand what’s written, and the more they stay interested. Most 65 | people can take in a whole line of text, or more at once. Fixating on many 66 | words at a time is necessary for comprehension for many people. A slow 67 | reader may read a sentence slowly using 6 to 9 eye fixations, sometimes 68 | taking in only a single word (or part of a word) at a time. Adding 69 | backgrounds reduces the number of words readers can fixate on. Removing 70 | backgrounds helps users comprehend more words at the same time. 71 |
72 | 73 |74 | Also, automatic word recognition is often used for reading comprehension. 75 | For example, approximately 200 words exist in the English language that do 76 | not fit traditional letter sound patterns. These words must be memorized and 77 | automatically recognized. If a user can’t recognize these words, the text is 78 | harder to understand. Backgrounds can increase the amount of time it takes 79 | users to recognize words. 80 |
81 |82 | Similarly, background noise in an audio track can make it harder to process 83 | and understand the main content. 84 |
85 |Use:
89 |Avoid:
96 | 97 |
3 | title: Explain Implied Content
4 | ref: ${{ FILENAME_REF }}
5 | github: ${{ GITHUB_INFO }}
6 | sidebar:
7 | sections:
8 | - name: User Story
9 | items: "Visual Presentation"
10 | - name: Personas
11 | items: "Amy, George, Gopal, Kwame, Sam, Tal, Yuki"
12 |
13 |
14 | 17 |23 |18 | I need to understand the meaning of the text. I do not want unexplained, 19 | implied, or ambiguous information because I may misunderstand jokes and 20 | metaphors. 21 |
22 |
24 | Related User Story: 25 | Visual Presentation. 30 |
31 |35 | Provide definitions or explanations for implied or ambiguous information 36 | such: 37 |
38 |49 | These definitions and explanations should be provided in text close to the 50 | implied content or in the markup (see best practices). 51 |
52 |56 | Implied content can be difficult for some users because the meaning is not 57 | clear. This includes abstract content, sarcasm, or metaphors. The meaning is 58 | not clear and requires the user to have additional knowledge to understand. 59 |
60 | 61 |62 | When using body gestures, emotional communication, and facial expressions as 63 | the only way to communicate something, it is important to include this in 64 | another way to ensure all users understand. One way this can be done is 65 | through supplementary text. 66 |
67 |68 | For example, an image is used in a social media post to communicate a 69 | person’s true feelings. Some individuals may not be able to understand the 70 | emotion being demonstrated by the image. They miss the point the author is 71 | trying to make without more context. 72 |
73 |74 | Similarly, a research study asked autistic people to watch a movie 75 | that had a lot of implied content. They were watching the actors’ mouths, 76 | but information such as sarcasm is communicated by their facial expressions. 77 | When asked what happened in the movie, some missed the implied communication 78 | and the point of the dialogue. 79 |
80 |This includes:
84 |96 | Note that standard emojis often come with an explanation or alternative 97 | text. 98 |
99 |Use:
103 |Avoid:
115 |
3 | title: Provide Alternatives for Numerical Concepts
4 | ref: ${{ FILENAME_REF }}
5 | github: ${{ GITHUB_INFO }}
6 | sidebar:
7 | sections:
8 | - name: User Story
9 | items: "Maths Concepts"
10 | - name: Personas
11 | items: "Alison, Gopal, Jonathan"
12 |
13 |
14 | 17 |19 |I need words rather than numbers and numerical concepts.
18 |
20 | Related User Story: 21 | Math Concepts. 24 |
25 |Provide alternatives for numbers and numerical concepts.
26 |Provide alternatives for numbers and numerical concepts.
30 |Not all people can understand numbers and numerical concepts.
35 |36 | For example, some people have dyscalculia, a learning disability 37 | specifically-related to mathematics. People with dyscalculia have 38 | significant problems with numbers and mathematical concepts, but often excel 39 | in other intellectual areas. 40 |
41 |42 | For example, a user with dyscalculia may have difficulty processing 43 | temperature data when presented only in a numeric format. However, if 44 | non-numeric alternatives are provided (cold, warm, hot etc.) then they are 45 | able to understand the content. 46 |
47 |48 | Numeracy issues can occur due to a range of disabilities, the most severe 49 | being the inability to read or understand numbers. Other people have 50 | challenges with any calculations such as relative sizes or times. 51 |
52 |53 | For example, a user may understand the concept of 90cms as a length but find 54 | it hard to cope with the fact that 0.9m and 900mm are the same length. 55 |
56 |57 | In another example, a train schedule has a list of relative times that the 58 | train leaves on the hour. The user cannot calculate when the next train 59 | leaves from their location. 60 |
61 |65 | Where an understanding of mathematics is not a primary requirement for using 66 | this content use one of the following: 67 |
68 |79 | Note that other users may find math easier to understand than long text. 80 |
81 |Where some math skills are essential for the content:
82 |Use:
97 |115 | For the above, there is a description or representation of what the 116 | number means as a concept. 117 |
118 |Avoid:
121 |
3 | title: Help Users Avoid Mistakes and Know How to Correct Them
4 | summary: A good design makes errors less likely. Ask the user only for what you
5 | need! When errors occur, make it easy for the user to correct them.
6 | ref: ${{ FILENAME_REF }}
7 | github: ${{ GITHUB_INFO }}
8 | sidebar:
9 | sections:
10 | - name: User Stories
11 | items: "Assistance and Support, Undo"
12 |
13 |
14 | 15 | Users should be able to avoid mistakes and correct them easily if mistakes 16 | occur. 17 |
18 |19 | It is difficult for many users to complete forms, especially people with 20 | cognitive and learning disabilities. A good design makes errors less 21 | likely. 22 |
23 |24 | Users with cognitive and learning disabilities are more likely to make 25 | mistakes. This can include entering information incorrectly or accidently 26 | touching the wrong control. Help the user notice form errors and make it easy 27 | to correct them. Always let users go back and recover if they accidentally 28 | touch a control. 29 |
30 |31 | Completing forms and similar tasks is often overwhelming for people with 32 | cognitive and learning disabilities. Many users with 33 | cognitive and learning disabilities cannot remember numbers, such as 34 | zip or post codes or their social security number. Many users even need to 35 | check their phone numbers. This makes entering information slow, and they may 36 | need to leave their desks or take breaks. Help them by providing a design that 37 | reduces mistakes. Give them the time they need without annoying timeouts and 38 | data loss. 39 |
40 | -------------------------------------------------------------------------------- /design-guide/o4p01-unexpected-movement.html: -------------------------------------------------------------------------------- 1 |
3 | title: Ensure Controls and Content Do Not Move Unexpectedly
4 | ref: ${{ FILENAME_REF }}
5 | github: ${{ GITHUB_INFO }}
6 | sidebar:
7 | sections:
8 | - name: User Story
9 | items: "Assistant and Support"
10 | - name: Personas
11 | items: "Alison, George, Gopal, Jonathan, Kwame, Maria, Sam, Tal, Yuki"
12 |
13 |
14 | 17 |22 |18 | I need to know where things are. Controls and content do not move 19 | unexpectedly as I am using them. 20 |
21 |
23 | Related User Story: 24 | Assistance and Support. 29 |
30 |34 | Make sure controls and content remain in place and do not move, unless the 35 | user initiates the movement. 36 |
37 |38 | A user may initiate a movement by triggering an action or by altering a 39 | property of the device, such as window size. 40 |
41 |This can usually be achieved by:
42 |60 | If a control moves, users with slow hand-eye coordination or impaired 61 | cognitive processing speed may hit the wrong control. This causes unwanted 62 | actions and errors. The user may experience disorientation, confusion or 63 | even incorrect understanding of the content. 64 |
65 |66 | For example, a user moves to press a button on a video. The user 67 | accidentally nudges the device. The orientation changes to landscape and the 68 | control moves. Because the user has slow eye tracking or hand-eye 69 | coordination, they end up pressing a link to a new video. 70 |
71 |72 | Shifting controls and content can also cause cognitive overload and increase 73 | mental fatigue. For example, as a user with Traumatic 74 | Brain Injury reads content, the content refreshes and an additional 75 | article appears above the current content. The article the user is reading 76 | moves down. The user becomes disoriented and the application becomes very 77 | hard to use or understand. 78 |
79 |Controls moving unexpectedly includes:
83 |Use:
92 |Avoid:
107 |
3 | title: Use Clear Visible Labels
4 | ref: ${{ FILENAME_REF }}
5 | github: ${{ GITHUB_INFO }}
6 | sidebar:
7 | sections:
8 | - name: User Story
9 | items: "Assistant and Support"
10 | - name: Personas
11 | items: "Alison, George, Gopal, Jonathan, Kwame, Maria, Sam, Tal, Yuki"
12 |
13 |
14 | 17 |21 |18 | I need clear labels, step-by-step instructions, and clear error messages. 19 |
20 |
22 | Related User Story: 23 | Assistance and Support. 28 |
29 |Use clear labels. Labels should:
33 |45 | When labels are missing or unclear, users often do not know that the feature 46 | is available or what the control is. Although many users can guess what a 47 | control is for users with cognitive and learning disabilities with 48 | impaired memory or executive function are less likely to be able to 49 | remember the design pattern or work out what it is. A clear label that uses 50 | familiar terms and is located next to the control, helps people with 51 | cognitive and learning disabilities. 52 |
53 |54 | Similarly, if a label is not next to a control it is confusing for some 55 | users. When a label cannot be next to a control, there should be clear 56 | visual indicators that visibly and unambiguously associate the label with 57 | the control. This will need user testing with users who have learning and 58 | cognitive and learning disabilities to ensure it is usable. 59 |
60 |61 | For example, a user living with early stage dementia is using an 62 | application. Some controls do not have visual labels. A caregiver shows them 63 | what the control is for and they can use the application. The next day they 64 | try to use it again, but cannot remember what the control is for. This 65 | application is not usable for them. 66 |
67 |68 | In another example, the label disappears when the focus is removed. The user 69 | cannot remember what the control is and does not know how to make it 70 | reappear. 71 |
72 |73 | Labels need to be visible, readable by assistive technology, and be nearby 74 | the labeled content. 75 |
76 |80 | Many people with cognitive and learning disabilities use web 81 | extensions and simple text-to-speech. These assistive technologies often do 82 | not read WAI-ARIA [[wai-aria-1.2]] or titles. Until that changes, or an 83 | extension displays them, labels should not rely on these attributes for 84 | people with cognitive and learning disabilities. 85 |
86 |Use:
90 |Avoid:
100 |
3 | title: Use Clear Step-by-step Instructions
4 | ref: ${{ FILENAME_REF }}
5 | github: ${{ GITHUB_INFO }}
6 | sidebar:
7 | sections:
8 | - name: User Story
9 | items: "Assistant and Support"
10 | - name: Personas
11 | items: "Alison, George, Gopal, Jonathan, Kwame, Maria, Sam, Tal, Yuki"
12 |
13 |
14 | 17 |22 |18 | I need clear labels, step-by-step instructions and clear error messages, 19 | so I know exactly what to do. 20 |
21 |
23 | Related User Story: 24 | Assistance and Support. 29 |
30 |Write clear instructions that are:
34 |47 | Clear instructions help prevent user errors. This reduces frustration and 48 | enhances users’ autonomy and independence because they can avoid asking for 49 | help. This helps many people with 50 | cognitive and learning disabilities as well as people from different 51 | cultures, emerging markets, and new users who may not be familiar with web 52 | forms or may miss cultural context. 53 |
54 |55 | For example, a person with age-related forgetfulness is trying to 56 | complete a form. They put the whole address and zip or postal code in one 57 | line (as one would do when writing a letter). They are given an error 58 | message. After a few error messages, they are exhausted and cannot complete 59 | the form. 60 |
61 |65 | Provide instructions at the start of the process, not simply in an error 66 | message. 67 |
68 |69 | Provide instructions needed to enable the user to complete the task. When 70 | multiple formats are accepted or errors are automatically corrected, less 71 | instructions are needed for the user to complete the task. 72 |
73 |Note that instructions can be hidden behind a familiar icon.
74 |78 | In a system with common errors, tackle the most impactful errors first and 79 | add guidance as needed. 80 |
81 |Use:
85 |Avoid:
102 |
3 | title: Accept different input formats
4 | ref: ${{ FILENAME_REF }}
5 | github: ${{ GITHUB_INFO }}
6 | sidebar:
7 | sections:
8 | - name: User Story
9 | items: "Assistant and Support"
10 | - name: Personas
11 | items: "Alison, George, Gopal, Jonathan, Kwame, Maria, Sam, Tal, Yuki"
12 |
13 |
14 | 17 |21 |18 | I need inputs to accept different formats and not mark them as mistakes. 19 |
20 |
22 | Related User Story: 23 | Assistance and Support. 28 |
29 |33 | Accept all format variations in text inputs for values such as currency, 34 | time zone, locale, address, or credit card number. 35 |
36 |40 | Forgiving form entry processes help the user fill out forms, without an 41 | overwhelming amount of errors. They can avoid asking for help when errors 42 | cause them problems. This reduces frustration while enhancing the user’s 43 | autonomy and independence. 44 |
45 | 46 |47 | This benefits anybody with a learning and cognitive disability or 48 | age related forgetfulness. It will also help anyone who is used to a 49 | different format. 50 |
51 |52 | For example, a user with age related forgetfulness enters their phone 53 | number with hyphens inserted. They receive an error message, because the 54 | system does not accept that format. They wonder if they have forgotten their 55 | phone number or made a different mistake. They stop trying to use the form. 56 |
57 |Use:
61 |Avoid:
83 |
3 | title: Use Familiar Metrics and Units
4 | ref: ${{ FILENAME_REF }}
5 | github: ${{ GITHUB_INFO }}
6 | sidebar:
7 | sections:
8 | - name: User Story
9 | items: "Assistant and Support"
10 | - name: Personas
11 | items: "Alison, George, Gopal, Jonathan, Kwame, Maria, Sam, Tal, Yuki"
12 |
13 |
14 | 16 |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.
17 |Provide metrics in units that users will be familiar with.
19 | 20 |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.
22 |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.
23 | 24 |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.
26 | 27 |Provide a mechanism to select a different set of metrics that are more meaningful to the user, or provide common alternatives in the text
29 | 30 |Use:
32 |Avoid:
40 |
3 | title: Help Users Focus
4 | summary: Avoid distracting the user from their tasks. If the user does get
5 | distracted, headings and breadcrumbs can help orientate the user and help
6 | the user restore the context when it is lost. Providing linked breadcrumbs
7 | can help the user undo mistakes.
8 | ref: ${{ FILENAME_REF }}
9 | github: ${{ GITHUB_INFO }}
10 | idebar:
11 | sections:
12 | - name: User Stories
13 | items: "Distractions"
14 |
15 |
16 | 17 | Distractions can prevent users with 18 | cognitive and learning disabilities from completing their tasks. 19 |
20 |21 | Once users become distracted, they may find it difficult to remember what they 22 | were doing. Then they can no longer complete their task. This is especially 23 | problematic for users with both impaired attention and impaired memory, such 24 | as users with dementia. 25 |
26 |27 | Avoid using any content or elements that distract users or interrupt them. 28 | Also, consider removing content the user will find unnecessary. Provide clear 29 | headings and breadcrumbs to help users reorient and refocus if they lose 30 | focus. 31 |
32 |33 | Also, help users maintain focus on their task by telling them what information 34 | they may need to prepare at the beginning of the task, so that they can 35 | collect all required information before starting. 36 |
37 | -------------------------------------------------------------------------------- /design-guide/o5p03-manageable-quantity.html: -------------------------------------------------------------------------------- 1 |
3 | title: Avoid Too Much Content
4 | ref: ${{ FILENAME_REF }}
5 | github: ${{ GITHUB_INFO }}
6 | sidebar:
7 | sections:
8 | - name: User Story
9 | items: "Distractions"
10 | - name: Personas
11 | items: "Alison, Gopal, Kwame, Sam"
12 |
13 |
14 | 17 |24 |18 | I need to find it easy to identify the content that I need, and do not 19 | need. Information I need to know and important information stands out, or 20 | is the first thing I read and does not get lost in the noise of less 21 | important information. 22 |
23 |
25 | Related User Story: 26 | Findable. 29 |
30 |34 | Keep the interface simple. Provide users with five or less main choices on 35 | each screen and remove unnecessary content. This can be provided via a 36 | simplified version, as an alternative that is generated in real time from 37 | the same code base as the main content. 38 |
39 |40 | Extra links that do not relate to the main purpose of the page should be 41 | limited to the footer section. Extra choices can also be hidden under a 42 | “more” link or other clear and descriptive titles. 43 |
44 |48 | Busy pages, too much text, too many images and too much other content can 49 | cause cognitive overload, anxiety and loss of focus. Keeping content down to 50 | a small number of important points reduces the clutter, calms the user, and 51 | allows for better understanding while aiding memory. For example, it can 52 | help slow readers or those with a short attention span, who may leave the 53 | page if it appears complex. 54 |
55 |56 | Simplified content and a consistent simple design helps reduce cognitive 57 | overload and decreases stress and mental fatigue. For example, a person with 58 | early stage dementia goes to their doctor’s application. There are 59 | five choices on the screen: appointments, ask your doctor a question, test 60 | results, approvals and more. Each option has an icon, clear text, and is 61 | separated by whitespace. In two clicks they have asked their doctor their 62 | question. They can easily select what they need without asking for help. 63 | More options are also available if they swipe left. However, they are 64 | unlikely to do so. 65 |
66 |70 | Avoiding long paragraphs, lots of choices, and non-meaningful imagery 71 | ensures those with cognitive and learning disabilities can concentrate on 72 | the important points being made. 73 |
74 |75 | Keeping to a few short bullet points and limiting to one or two images 76 | related to the main subject areas of a web site or service allows the user 77 | to choose whether to explore the site further. 78 |
79 | 80 |81 | The intent of this pattern is not to clutter the page with unnecessary 82 | information but to provide important cues and instructions that will benefit 83 | people with cognitive and learning disabilities. Too much information or 84 | instruction can be just as much of a hindrance as too little. The goal is to 85 | make certain that enough information is provided for the user to accomplish 86 | the task without undue confusion or navigation. 87 |
88 |Use:
93 |Avoid:
108 |
3 | title: Provide Information So a User Can Complete and Prepare for a Task
4 | ref: ${{ FILENAME_REF }}
5 | github: ${{ GITHUB_INFO }}
6 | sidebar:
7 | sections:
8 | - name: User Story
9 | items: "Distractions"
10 | - name: Personas
11 | items: "Alison, Gopal, Kwame, Sam"
12 |
13 |
14 | 16 |I need to know how to start a task, and what is involved.
Related User Story: Distractions.
17 |Emphasize the start of important tasks.
19 |Before a user performs a task consisting of multiple steps, ensure they have an estimate of the 20 | amount of effort required to complete the task. This should include:
21 |Once the user starts the task, ensure the user clearly understands when the task is still “in-process” and when it has been completed.
25 | 26 | 27 |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.
29 |30 | 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. 31 |
32 | 33 |35 | 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. 36 |
37 | 38 |Use:
40 |Avoid:
49 |
3 | title: Ensure Processes Do Not Rely on Memory
4 | summary: Memory barriers stop people with cognitive disabilities from using
5 | content. This includes long passwords to log in and voice menus that
6 | involve remembering a specific number or term. Make sure there is an
7 | easier option for people who need it.
8 | ref: ${{ FILENAME_REF }}
9 | github: ${{ GITHUB_INFO }}
10 | sidebar:
11 | sections:
12 | - name: User Stories
13 | items: "Previous Steps, Accessible Authentication, Voice Menus"
14 |
15 |
16 | 17 | Memory barriers stop many users from using products or accessing help or 18 | content. 19 |
20 |21 | People with any impairment that affects memory or language can find it 22 | difficult or impossible to overcome memory barriers. 23 |
24 |25 | For example, many users have an impaired short-term memory. On average people 26 | can remember 7 letters or items at the same time. A person with an impaired 27 | working memory may be able to remember one to four pieces of information at 28 | the same time (depending on the extent of the impairment). If they need to 29 | remember other tasks, such as track what they have done, they are likely to 30 | make mistakes. 31 |
32 | 33 |Avoid barriers such as:
34 |43 | Allow users access to content, services or help, without using processes that 44 | rely on memory. Make sure there is an easier option for people who need it. 45 |
46 | -------------------------------------------------------------------------------- /design-guide/o6p02-singlestep-login.html: -------------------------------------------------------------------------------- 1 |
3 | title: Allow the User a Simple, Single Step, Login
4 | ref: ${{ FILENAME_REF }}
5 | github: ${{ GITHUB_INFO }}
6 | sidebar:
7 | sections:
8 | - name: User Story
9 | items: "Accessibile Authentication"
10 | - name: Personas
11 | items: "Jonathan, Tal"
12 |
13 |
14 | 17 |19 |I need the login process to be simple, and not multi-step.
18 |
20 | Related User Story: 21 | Accessible Authentication. 26 |
27 |Provide a simple, single-step alternative for logins.
31 |35 | A simple login allows people with impaired executive function or 36 | impaired memory to use applications. This is especially important for users 37 | who become confused or overwhelmed with multi-step processes. For example, a 38 | user with traumatic brain injury wishes to use a site for online 39 | banking. They may have put their finger on a fingerprint scanner to 40 | authenticate who they are. Other examples include some third party logins. 41 |
42 |Use:
46 |Avoid:
54 |
3 | title: Provide a Login Alternative with Less Words
4 | ref: ${{ FILENAME_REF }}
5 | github: ${{ GITHUB_INFO }}
6 | sidebar:
7 | sections:
8 | - name: User Story
9 | items: "Accessibile Authentication"
10 | - name: Personas
11 | items: "Jonathan, Tal"
12 |
13 |
14 | 17 |22 |18 | I need a login process I can use that does not rely on a lot of words (as 19 | someone with a severe language impairment). 20 |
21 |
23 | Related User Story: 24 | Accessible Authentication. 29 |
30 |34 | Provide at least one login alternative that does not require reading or 35 | writing a lot of words 36 |
37 |41 | This pattern allows people with language and communication disabilities to 42 | login without being overwhelmed by blocks of text. 43 |
44 |45 | For example, someone with a severe language impairment using an 46 | AAC 49 | device wants to send a message to their doctor. They can press the login 50 | with the icon they know and send a message without having to read text. 51 |
52 |Use:
56 |Avoid:
64 |
3 | title: Provide Help and Support
4 | summary: This includes **making it easy to get human help.** If users
5 | have difficulty sending feedback, then you will never know if they are
6 | able to use the content or when they are experiencing problems. In
7 | addition, **support different ways to understand content.** Graphics,
8 | summaries of long documents, adding icons to headings and links, and
9 | alternatives for numbers are all examples of extra help and support."
10 | ref: ${{ FILENAME_REF }}
11 | github: ${{ GITHUB_INFO }}
12 | sidebar:
13 | sections:
14 | - name: User Stories
15 | items: "Help, Support, Directions, Cognitive Stress, Task Management"
16 |
17 |
18 | 19 | Support different ways of understanding content. Provide extra help and 20 | support such as: 21 |
22 |Explain choices to help the user successfully complete their tasks.
29 |30 | Make it easy for users get help when they run into difficulties and give 31 | feedback. If users have difficulty sending feedback, they cannot tell you if 32 | they are unable to use the content. You will not know when they are 33 | experiencing problems. 34 |
35 |36 | Some applications depend on user data, such as smart cities. Data from users 37 | who cannot use the system can be missing from data driven systems. The problem 38 | is worse when they cannot even give feedback about their problems. They become 39 | invisible and their needs are not met. 40 |
41 | -------------------------------------------------------------------------------- /design-guide/o7p01-human-help.html: -------------------------------------------------------------------------------- 1 |
3 | title: Provide Human Help
4 | ref: ${{ FILENAME_REF }}
5 | github: ${{ GITHUB_INFO }}
6 | sidebar:
7 | sections:
8 | - name: User Story
9 | items: "Help"
10 | - name: Personas
11 | items: "Alison"
12 |
13 |
14 | 17 |21 |18 | I need to know how to get human help and can manage the process easily. 19 |
20 |
22 | Related User Story: 23 | Help. 24 |
25 |29 | Many people rely on human help. When possible, there is human help 30 | available, and it is easy to use. This includes: 31 |
32 |46 | Access to human help should never require the user to manage complex menu 47 | systems such as a voice menu with many different options. 48 |
49 | 50 |51 | Organizations mechanisms should be in place to ensure support staff 52 | effectively help people with learning and cognitive disabilities and provide 53 | a good experience. 54 |
55 |59 | When a user gets stuck or confused for any reason, getting help from a human 60 | is usually the most effective solution. In reality many sites provide this 61 | option only to users who can navigate complex systems. 62 |
63 |64 | Examples of complex system include a process where a user needs to follow 65 | many links to get to the human contact information. It could also be a phone 66 | number requiring the user to answer many questions before connecting with a 67 | person. With a complex system, the people who need it most will not have 68 | access to the human help option. They may the user may have cognitive 69 | overload and stop trying to complete the process. They may also leave with a 70 | negative attitude towards the service or supplier. 71 |
72 |73 | For example, a user with an intellectual disability wants to use a coupon. 74 | They cannot find the instructions for applying the coupon to their online 75 | purchase, and they cannot find the phone number for support. They 76 | effectively cannot use the coupon. 77 |
78 |Use:
83 |Avoid:
104 | 105 |
6 | title: Clearly State the Results and Disadvantages of Actions, Options, and Selections
7 | ref: ${{ FILENAME_REF }}
8 | github: ${{ GITHUB_INFO }}
9 | sidebar:
10 | sections:
11 | - name: User Story
12 | items: "Cognitive Stress"
13 | - name: Personas
14 | items: "Gopal, Kwame, Tal"
15 |
16 |
17 | 20 |26 |21 | I need support and explanations for any choices. The advantages or 22 | disadvantages are clear to me and I understand the effects of the choice I 23 | might make. 24 |
25 |
27 | Related User Story: 28 | Cognitive Stress. 31 |
32 |36 | When presenting users with actions and selections, clearly explain the 37 | benefits, risks and consequences of each option. This includes any: 38 |
39 |48 | Clearly stating benefits and consequences of each action and selection 49 | option helps individuals avoid mistakes. This is particularly important when 50 | the results cannot be easily corrected, lead to safety risks, or may never 51 | be known. 52 |
53 | 54 |55 | For example, a user of a travel site is booking a trip to Geneva. They see 56 | an option at a good time, but this ticket is to a different city. They 57 | assume the options given are to the location they asked for. They check the 58 | dates and times, but, because they can only read by spelling out words, they 59 | do not notice the changed destination. They are taken to a different 60 | location than their hotel, and the vulnerable user arrives at night in an 61 | unfamiliar city without accommodation. 62 |
63 |64 | In another example, a user sees a laptop for sale at a good price. They do 65 | not see the refurbished word in the long description. The laptop is not 66 | actually a good price. 67 |
68 |72 | Whenever you ask the user to make a selection or take an action, consider 73 | whether there are any implied or hidden results that the user should be 74 | aware of. Clearly indicate those results within the user interface and 75 | confirm the user is aware of them. 76 |
77 |Use:
81 |Avoid:
103 |3 | title: Support Adaptation and Personalization 4 | summary: People with cognitive and learning disabilities often use add-ons 5 | or extensions as assistive technology. Sometimes, extra support requires 6 | minimal effort from the user via personalization that allows the user to 7 | select preferred options from a set of alternatives. Support 8 | personalization when you can. Do not disable add-ons and extensions! 9 | Sometimes users can receive extra support through personalization. 10 | ref: ${{ FILENAME_REF }} 11 | github: ${{ GITHUB_INFO }} 12 | sidebar: 13 | sections: 14 | - name: User Stories 15 | items: "Adapt, Extensions and APIs" 16 |17 | 18 |
19 | Many users need products that support adaptation and personalization. Users 20 | should be able to use add-ons and extensions as assistive technology. This 21 | includes spell checkers, passwords support, support for text-to-speech, and 22 | synchronized highlighting of the phrase being read. 23 |
24 |25 | Personalization can allow the user to select preferred, familiar options from 26 | a set of alternatives. 27 |
28 |29 | Support personalization and simplification when you can. Do not disable 30 | add-ons and extensions. 31 |
32 | -------------------------------------------------------------------------------- /design-guide/o8p03-complexity.html: -------------------------------------------------------------------------------- 1 |
3 | title: Support Simplification
4 | ref: ${{ FILENAME_REF }}
5 | github: ${{ GITHUB_INFO }}
6 | sidebar:
7 | sections:
8 | - name: User Story
9 | items: "Adapt"
10 | - name: Personas
11 | items: "Alison, Amy, Gopal, Jonathan, Sam"
12 |
13 |
14 | 17 |22 |18 | I need less content without extra options and features as I cannot 19 | function at all when there is too much cognitive overload. 20 |
21 |
23 | Related User Story: 24 | Adapt. 25 |
26 |30 | Support simplification of your content. Often this includes allowing the 31 | user to: 32 |
33 |49 | A user who has difficulty reading or using web content can be easily 50 | overwhelmed with too much information on a web page. They need to simplify 51 | the page to include the critical information that they need and not spend 52 | all their energy reading and understanding other content and features. This 53 | is also true for users who are easily distracted. 54 |
55 |56 | For example, an email program has lots of features and formatting options 57 | when drafting an email. This makes it too complex for a lot of people. With 58 | personalization the user can have a simple option with only send and cancel 59 | options. There is a “to” and subject line but no cc or bcc options. In this 60 | setting there is a clear heading (write an email) and they have icons that 61 | the user understands. 62 |
63 |Note that:
67 |
88 | Add data-simplification="critical" on content that is in any
89 | critical user testing paths.
90 |
Use:
95 |Avoid:
104 |
3 | title: Support a Personalized and Familiar Interface
4 | ref: ${{ FILENAME_REF }}
5 | github: ${{ GITHUB_INFO }}
6 | sidebar:
7 | sections:
8 | - name: User Story
9 | items: "Adapt"
10 | - name: Personas
11 | items: "Alison, Amy, Gopal, Jonathan, Sam"
12 |
13 |
14 | 17 |22 |18 | I need (a version of) a familiar interface, that I recognize and know what 19 | will happen. 20 |
21 |
23 | Related User Story: 24 | Adapt. 25 |
26 |30 | Provide users with a way to personalize their interface to make it familiar. 31 |
32 |This can be done by:
33 |54 | Ensure the user knows the personalization options and can easily configure 55 | them. Clear instructions can help. 56 |
57 |Personalization changes the interface to meet the needs of the user.
61 | 62 |63 | Having familiar terms and symbols is key to many users being able to use the 64 | web. However, what is familiar for one user may be unfamiliar to another 65 | requiring them to learn new symbols. Adding semantics allows symbols and 66 | support to be added by an extension or browser that is familiar to the 67 | individual user. 68 |
69 |70 | A stronger example is people using 71 | AAC. These users usually only learn one symbol set. They cannot easily 74 | communicate with other people using 75 | AAC 78 | in a written format or may struggle to understand different symbols used in 79 | different applications. When using personalization, such as 80 | [[personalization-semantics-1.0]] the user agents can load the symbols that 81 | are understandable by the individual user. The user can also access the Web 82 | and other applications. 83 |
84 | 85 |86 | Other support includes autocomplete and extensions that help the user fill 87 | out forms and understand the content. Many users with memory or 88 | executive function impairments cannot fill in forms without asking 89 | someone to help copy over information or check their work. Autocomplete 90 | allows many more users to manage forms by themselves. 91 |
92 |Use:
107 |Avoid:
117 |Current:
12 | 3.2.3 Consistent Navigation: Navigational mechanisms that are repeated on multiple Web pages within a set of Web pages occur in the same relative order each time they are repeated, unless a change is initiated by the user. (Level AA)
14 | Proposed:
3.2.3 Consistent Navigation: Navigational mechanisms that are repeated on multiple Web pages within a set of Web pages occur in the same relative order each time they are repeated, unless a change is initiated by the user. @@Common navigation, search, and control elements have a consistent position within a set of web pages in the primary modality of the content, unless a change is initiated by the user.@@
16 |Exception: If an inconsistent layout is an essential part of the main function of the site.
17 |18 |
19 |
AA
21 |Define the primary modality of the content as modalities considered in the design of the content.
23 |Principle 3, Guideline 3.2
25 |The intent of this success criterion is to ensure consistent position of common navigation, search, and control elements that appear repeatedly within a set of Web pages. For example, controls and menu items consistently positioned across a site.
27 |28 |
Many users with cognitive and learning disabilities rely heavily on their familiarity with Web page components. If identical functions are found in different places, on different Web pages, the Web site will be considerably more difficult to use. It will be confusing, and increase the cognitive load for people with cognitive disabilities, increasing mistakes, and limiting some users from accessing the content. This supports those who have reading and some visual perceptual difficulties due to Receptive Aphasia, as well as those with general cognitive learning disabilities. It also helps those with visual acuity difficulties, where stroke and age-related disabilities co-occur. Also, users with memory impairments will need to learn a lot more to be able to use the Web site, making it impossible for some. Therefore, consistent styles will increase the number of people who can use the Web site, and will help many others.
30 |
31 |
34 |
Computers helping people with special needed, 14 international conference ICCHP 2014 Eds. Miesenberger, Fels, Archambault, Et. Al. Springer (pages 401). Paper: Tablets in the rehabilitation of memory impairment, K Dobsz et. al.
35 |Neilson-aging
36 |The Aphasia Alliance's Top Tips for 'Aphasia Friendlier' Communication taken from http://www.buryspeakeasy.org.uk/documents/Aphasia%20Alliance%20Aphasia%20Friendier%20Communication.pdf
37 |Phiriyapkanon. Is big button interface enough for elderly users, Malardardalen University Press Sweden 2011.
38 |
39 |
42 |
Step 1. Ensure (by inspection) all components, including navigation components and icons, are positioned consistently.
50 |
58 |
59 |
working groups notes (optional)
60 |
Search: Provide a search capability.
11 | An exception is provided for small organizations and for small websites that include simple links to each page from the home page. 12 |AA
14 |A small organization is defined as not more than 50 employees, or the definition within your jurisdiction.
16 |A small website is a site with less than 15 pages
17 |Principle 3, Guideline 3.3
20 | or Guideline 3.2 Make Web pages appear and operate in predictable ways 21 |Search capabilities enable a user to conveniently find and access information.
23 |24 |
26 |
Having a search capability allows users to find the content they need even if they cannot determine how to navigate a site. Search is a method that you can learn one time and reuse on all sites.
27 |User studies have shown the aging population tend to rely on search to locate information rather than navigating menus or surfing.
28 |Menu systems, and most site navigation require the user to understand the categories of the pages that the content provider has created for general use. Users with impaired executive function may be unable to identify the correct categories
29 |In some cases, users identify 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 will be disadvantaged at finding menu items based on recall.
30 |Navigating a site and going to many pages to look for content, is also bad for people with impaired short-term memory or for people who are easily distracted, as they may lose focus and forget what they are looking for.
31 |Search is most useful when it allows for common misspellings, yet still finds the appropriate content or provides suggested auto-corrected versions of the search terms that the user can choose from.
32 |Resources are for information purposes only, no endorsement implied.
34 |See also
40 |60 |
INITAL DRAFT
10 |This document an issue paper looking into the challenges and issues faced by users with emotional disabilities when completing online tasks. 11 |
12 |This is part of a series of issue papers written by The Cognitive and Learning Disabilities Accessibility Task Force (COGA). COGA is a joint Task Force of the Accessible Platform Architectures (APA) Working Group and the Web Content Accessibility Guidelines Working Group (WCAG WG). 13 |
14 | 16 |Task-focused UIs are key components for engaing with Many Websites. Common tasks include:
17 |Task completion can be problematic for this user group particularly when the task requires the user to execute multiple steps over the course of multiple screens.
27 |Task completion may be problematic for users experiencing:
28 |Eg : Ensure that:
13 |Pass examples:
20 | Failure examples:
Use for tags: eg: Short-term memory, Reasoning , Language
23 | Avoid for tags: