A | B | C | D | E | F | G | H | I | J | K | L | M | N | O | P | Q | R | S | T | U | V | W | X | Y | Z | AA | AB | AC | AD | AE | |
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
1 | 'File > Make a copy...' or 'File > Download as...' if you want to use for your own work | Evaluated system: | e.g., Website URL / App Name and Evaluator and Date | ||||||||||||||||||||||||||||
2 | ID | Guideline | WCAG 2.0 | Example(s) | Result | Severity | Fix Effort | Example | Notes, Recommendations | ||||||||||||||||||||||
3 | 0 | Include people affected by dementia | |||||||||||||||||||||||||||||
4 | Before your design was launched, did you include with people affected by dementia? | ||||||||||||||||||||||||||||||
5 | 0.1 | Include people living with dementia in the design stages. Did you conduct primary research with representative users? | |||||||||||||||||||||||||||||
6 | 0.2 | Get feedback from people living with dementia during beta. Did you test, validate and iterate designs with representative users? | |||||||||||||||||||||||||||||
7 | 0.3 | Communicate that your website is dementia-friendly. Help build dementia-friendly communities and mitigate stigma. | DEEP: Creating Dementia Friendly Communities [PDF] | ||||||||||||||||||||||||||||
8 | |||||||||||||||||||||||||||||||
9 | |||||||||||||||||||||||||||||||
10 | 1 | Content | |||||||||||||||||||||||||||||
11 | Make it clear what your website is doing and why you're doing it. | ||||||||||||||||||||||||||||||
12 | 1.1 | Use Simple, Clear, Direct and Precise language. Avoid generic calls to action, complex wordplay, jargon. Use very clear, specific and unambiguous, headings and labels. Struggle to: remember terminology ; find correct word ; complex grammar. Use: high-frequency words, superordinate category words, concrete words, more 'imageable' words. | 3.1.5 ; 2.4.6 ; 2.4.2 ; 2.4.4 ; 2.4.10 | gov.uk: Writing for the Web guidelines | |||||||||||||||||||||||||||
13 | DEEP: Writing Dementia-friendly Information [PDF] | ||||||||||||||||||||||||||||||
14 | 1.2 | Use Explicit and Arresting content. Make the purpose clear and content interesting and focussed. | People with dementia can have problems with visual scanning, following lines, missing spots in the page. Source: Aida Gonzalez, UCL. | ||||||||||||||||||||||||||||
15 | 1.3 | Make content easily printable. Useful for people with issues with vision and perception. | Include an explicit "Print" control Write effective print style sheets (CSS) | ||||||||||||||||||||||||||||
16 | 1.4 | Avoid using abbreviations and acronyms. Don't assume people with dementia will recognise these. | 3.1.3 ; 3.1.4 | gov.uk: Writing for the Web guidelines | |||||||||||||||||||||||||||
17 | 1.4 | Include content from people living with dementia. When relevant provide tangible context: - evidence living well with dementia. - include helpful stories from people living with dementia. | |||||||||||||||||||||||||||||
18 | 1.5 | During longer tasks, give clear feedback on goal & progress. People living with dementia may have problems with attention AND working memory. | W3C WAI: Multi-page forms | ||||||||||||||||||||||||||||
19 | If a person cannot pay attention to something, then it cannot be stored as a memory. Dementia can reduce a persons attention and working memory. | ||||||||||||||||||||||||||||||
20 | 1.6 | Use dementia friendly language People with dementia prefer words and descriptions that are accurate, balanced and respectful. | DEEP: Writing dementia-friendly information | ||||||||||||||||||||||||||||
21 | DEEP: Dementia words matter: Guidelines on language about dementia | ||||||||||||||||||||||||||||||
22 | 1.7 | Content should be context and person sensitive | Inappropriate mail from Alzheimer's Society to a person living with dementia | ||||||||||||||||||||||||||||
23 | |||||||||||||||||||||||||||||||
24 | 2 | Layout, Navigation and Interface Design | |||||||||||||||||||||||||||||
25 | Make your navigation explicit and signpost a route back to the homepage. | ||||||||||||||||||||||||||||||
26 | 2.1 | Avoid splitting tasks across multiple screens. Especially if this relies on memory of previous actions. May struggle to remember location and task in a process. May struggle to remember what happened on previous step. Short attention span ; distractibility ; difficulty in handling several units of information. | If content must be split, then consider: - using the minimum stages possible. - avoiding splitting by separate pages. - reminding about goal(s). - giving clear feedback on progress. - guideline 2.5. | ||||||||||||||||||||||||||||
27 | 2.2 | Use clear breadcrumb navigation. So that it is easy to understand location in the site structure. Disorientation when trying recall relative location in a system. | 3.2.3 ; 2.4.5 ; 2.4.8 | Alzheimer's Soceity: section page. | |||||||||||||||||||||||||||
28 | 2.3 | Use a clear "Home" button. Do not rely on using a logo only to link to the homepage. Disorientation when trying recall relative location in a system. | 3.2.3 ; 2.4.5 | Alzheimer's Soceity: section page. | |||||||||||||||||||||||||||
29 | 2.4 | Make hyperlink styles and states clear. Clear visual styles for :link, :visited, :focus and :hover link states. | Smashing Magazine: The Definitive Guide To Styling Web Links | ||||||||||||||||||||||||||||
30 | 2.5 | Use clear line and section breaks to make splits obvious. Clearly defined sections with strong lines and explicit headers. | 2.4.6 ; 2.4.10 | Consider using: - <fieldset> and <legend> in web forms. - strong colours, backgrounds. - clear headings (label and style). - horizontal rules (<hr />). | |||||||||||||||||||||||||||
31 | 2.6 | Iterate designs gradually and judiciously. Don't tinker with design necessarily. If it's working, keep it. Aspects of impaired memory and learnability. | Where possible: refine, rather than wholly redesign. | ||||||||||||||||||||||||||||
32 | 2.7 | Avoid hiding navigation. Hiding navigation harms discoverability and use for all users. | NN/g: Hamburger menus hurt UX | ||||||||||||||||||||||||||||
33 | 2.8 | Avoid using elaborate design and user interface patterns. This may make the interface and content confusing. Users may not be able to learn new complex motor skills. Older people may struggle with complex movements, esp. if novel. | Use simple and elegant visual design. Use simple / standard interface patterns. Do not assume prior knowledge. Beware controls that assume life stage. | ||||||||||||||||||||||||||||
34 | 2.9 | Make links, buttons, controls have large enough target sizes. Fine motor skills, and ability to learn M. skills, may be degraded. Also: general aspects of "Fat Finger Syndrome" and Fitt's law. | 2 | Smashing Magazine: Desiging for the Elderly | |||||||||||||||||||||||||||
35 | |||||||||||||||||||||||||||||||
36 | |||||||||||||||||||||||||||||||
37 | 3 | Colours and Contrast | |||||||||||||||||||||||||||||
38 | Each type of dementia can damage the visual system in a number of different ways. Alzheimer’s disease can often cause perceptual problems which mean people misinterpret some things they see. Aggregated dementia impairments mean that the world can become a disorienting and stressful place. In addition: as people get older normal vision will change simply due to ageing. | ||||||||||||||||||||||||||||||
39 | 3.1 | Use a high contrast colour scheme to improve readability and confidence. WCAG ratios for contrast are 7:1 and 4.5:1 are a minimum. Support and enable by ensuring that what is important is highly visible. Help people with dementia navigate w/o needing memory, learning or reasoning. Older users will have reduced sensitivity to: - contrasts, - visual acuity, - perception unsaturated colours (pastels) | 1.4.3 ; 1.4.6 | Paciello Group: Colour Contrast Analyser | |||||||||||||||||||||||||||
40 | 3.2 | Use plain backgrounds for textual content Avoid background images, patterned background graphics. Damage to the occipital lobe can cause problems with perception. Plain backgrounds avoid distractions. | Keep text content easy to distinguish, perceive and comprehend for all users, devices and contexts of use. | ||||||||||||||||||||||||||||
41 | 3.3 | Avoid use of blue, especially for important interface elements. Colour vision declines with age, in particular, shades of blue, green and purples. These can appear washed out. Caused by natural hardening of the lens as people age. | Smashing Magazine: Designing for the Elderly | ||||||||||||||||||||||||||||
42 | |||||||||||||||||||||||||||||||
43 | |||||||||||||||||||||||||||||||
44 | 4 | Text and Fonts | |||||||||||||||||||||||||||||
45 | The simplicity of the sans letter shapes makes them more readable on all computer devices. | ||||||||||||||||||||||||||||||
46 | 4.1 | Use an open source sans-serif typeface. The simplicity of the letter shapes is more readable, digitally. Sans-serif letter shapes are generally simpler and free from decoration. The letter shapes are also generally of consistent weight and spacing. | Google Fonts: Source Sans Pro | ||||||||||||||||||||||||||||
47 | 4.2 | Use a large font size, or make explicit controls to change size. Consider including explicit text size controls. Maximise readability to provide the occipital lobe with enough info. As people age, their eyesight ability declines. | 1.4.4 | Dementia Diaries: text controls, CSS | |||||||||||||||||||||||||||
48 | 4.3 | Use bold text, alongside clear, concise, statements. Useful to highlight important information (see 1.1 and 1.2). | Alzheimer's Society: Heading and Strapline | ||||||||||||||||||||||||||||
49 | 4.4 | Avoid using multiple fonts, unnecessarily. This may make the interface and content confusing. | Keep your design simple and use one or two fonts only, never three. | ||||||||||||||||||||||||||||
50 | |||||||||||||||||||||||||||||||
51 | |||||||||||||||||||||||||||||||
52 | 5 | Images and Multimedia | |||||||||||||||||||||||||||||
53 | People with dementia can misinterpret videos and images for real people. Keep images and multimedia simple and relevant. | ||||||||||||||||||||||||||||||
54 | 5.1 | Keep images relevant and closely related to the content. To reduce the chance that the interface and content is confusing. Make images simple, engaging and meaningful. | Dementia Diaries; Tommy; Photo | ||||||||||||||||||||||||||||
55 | 5.2 | Use autoplay where audio or video is the only focus. See 5.4 and never autoplay on the landing page of a site (shock) | 1.4.2 ; 2.2.2 | ||||||||||||||||||||||||||||
56 | 5.3 | Provide subtitles or transcripts for video and audio content. | 1.1.1 ; 1.2.1 ; 1.2.2 ; 1.2.3 | Dementia Diaries; Tommy; Audio | |||||||||||||||||||||||||||
57 | 5.4 | Use very simple and familiar playback controls. So that it's predictable and easy to control the content playback. | 2.2.2 | Dementia Diaries; Tommy; Audio | |||||||||||||||||||||||||||
58 | 5.5 | Provide enough time to use and control content. Movements are slower in older people, also D. w. Lewey bodies. | |||||||||||||||||||||||||||||
59 | 5.6 | Pictograms and icons Judicious and validated use of icons can aid recognition and function of UI controls. Always use text labels with any icons. | UX Myths: Icons | ||||||||||||||||||||||||||||
60 | |||||||||||||||||||||||||||||||
61 | |||||||||||||||||||||||||||||||
62 | |||||||||||||||||||||||||||||||
63 | |||||||||||||||||||||||||||||||
64 | |||||||||||||||||||||||||||||||
65 | |||||||||||||||||||||||||||||||
66 | |||||||||||||||||||||||||||||||
67 | |||||||||||||||||||||||||||||||
68 | |||||||||||||||||||||||||||||||
69 | |||||||||||||||||||||||||||||||
70 | |||||||||||||||||||||||||||||||
71 | |||||||||||||||||||||||||||||||
72 | |||||||||||||||||||||||||||||||
73 | |||||||||||||||||||||||||||||||
74 | |||||||||||||||||||||||||||||||
75 | |||||||||||||||||||||||||||||||
76 | |||||||||||||||||||||||||||||||
77 | |||||||||||||||||||||||||||||||
78 | |||||||||||||||||||||||||||||||
79 | |||||||||||||||||||||||||||||||
80 | |||||||||||||||||||||||||||||||
81 | |||||||||||||||||||||||||||||||
82 | |||||||||||||||||||||||||||||||
83 | |||||||||||||||||||||||||||||||
84 | |||||||||||||||||||||||||||||||
85 | |||||||||||||||||||||||||||||||
86 | |||||||||||||||||||||||||||||||
87 | |||||||||||||||||||||||||||||||
88 | |||||||||||||||||||||||||||||||
89 | |||||||||||||||||||||||||||||||
90 | |||||||||||||||||||||||||||||||
91 | |||||||||||||||||||||||||||||||
92 | |||||||||||||||||||||||||||||||
93 | |||||||||||||||||||||||||||||||
94 | |||||||||||||||||||||||||||||||
95 | |||||||||||||||||||||||||||||||
96 | |||||||||||||||||||||||||||||||
97 | |||||||||||||||||||||||||||||||
98 | |||||||||||||||||||||||||||||||
99 | |||||||||||||||||||||||||||||||
100 |