I first called this page “special needs”. Then I thought better. The term “special needs” often used to refer to school-age students’ challenges that prevent them from fully participating in the mainstream setting. When talking about web design, or design in general, we call it Web Content Accessibility Guidelines (or WCAG) 2.1, a legal term that requires all “public places” to be accessible to everyone (and the wide web of the internet is as public as it gets). For a great discussion on the history of the crusade for the Americans with Disabilities Act (ADA), listen to this 99% Invisible podcast. Turns out that when we make the required changes to accommodate people with disabilities, everybody fares better, not just people with special needs. Can you see yourself
- with a screaming toddler, or hanging out in a noisy coffee house? (i have done both)
- as non-native speakers of a language?
- having a temporary disability (sprained wrist or eye drops)?
- after a sleepless night?
- in a hurry, not able to comprehend all the details of a text or announcement?
Inclusive designBefore we get into the specifics, I want to clarify some points about accessibility guidelines and just plain good design guidelines that help everyone. Accessibility is meeting the needs of people with disabilities, enabling them to fully participate. They are l legal requirement (ADA, IDEA, WCAG 2.1) based on which lawsuits can be filed. Inclusive Design does not specifically target people with disabilities and is not integrating assistive technology, instead it
- aims to fundamentally redesign a product so that the barrier does not exist in the first place. Inclusive design is also known as universal design.
- Recognizes that we are all disabled in certain situations, and designs for that
Cognitive DisabilitiesWhen people talk about the ADA, or WCAG 2.1, they normally mean accommodations for people with hearing and visual problems, even though learning disabilities affect more people. Why is that? The reasons are manifold.
- No clear definition. Cognitive disabilities (sometimes called learning disabilities, or learning differences) are not clearly defined, whereas vision and hearing problems are. Just as an example, ADHD is included in some lists, but not in others.
- Measurement. If cognitive differences are not clearly defined, they cannot be clearly tested and measured either, and so it is difficult to prove that an application is not compliant. WCAG 2.1 does mention cognitive differences but fails to provide clear, actionable guidelines.
- The stigma attached to learning disabilities. Most testing guidelines and legislation such as IDEA ((U.S. Department of Education’s Individuals with Disabilities Education Act) are put in place for educational settings because they benefit students in school. Once these same people leave school, a diagnosis of cognitive differences stigmatizes them, making it very hard to gain employment. Statistics show that a lot more students have some kind of learning disability than young adults, even though most of these cannot be cured.
Designing for People with Dyslexia
- Use short, simple sentences (max 14 words/sentence)
- Choose short words (travel instead of a voyage)
- Explain jargon and abbreviations ( may need to provide a glossary)
- Use active rather than passive voice
- Don’t nominalize (We discussed vs. we had a discussion)
- Use examples to illustrate points ( I like sports, such as jogging and weightlifting)
- Be concise; avoid using long, dense paragraphs
- To get better at plain English, see free resources here
Organization of Information
- Use bullet points instead of narratives!
- Use headings and subheadings to break up long and dense blocks of texts
- Add a table of contents for long texts
- Provide flowcharts, diagrams and other visual aids to support the text
Layout and Visual Design
- Left-aligned text, with adjustable font size (or at least 12 points)
- Sans-serif fonts can appear less crowded
- Soft pastel colors make good background color, whereas white can appear too dazzling
- Headings need to be at least 20% larger than normal text
- For emphasis, use bold, and avoid underlining, italics, small caps, as they make the text feel more crowded and the lines run into each other
- Avoid CAPTCHAS
- Put in place the most error-tolerant and intelligent search system possible. In other words, systems that
- which suggest search terms
- tolerate mistakes
- include semantically related terms in the search.
Dyscalculiaalso known as number blindness, is the mathematical equivalent of dyslexia. People with dyslexia have difficulty
- Performing simple mathematical functions (addition, subtraction).
- Grasping simple mathematical concepts (fractions, percentages, ratios)
- Comparing numbers (weights, areas, distances)
- Conceptualizing time, and judging the passing of time
- Holding number sequences in their mind, transposing or reversing them (e.g, 345 for 543)
- with directions
Designing for People with Dyscalculia
- Users need to know where they are in the process (breadcrumbs, and progress bar charts)
- Make calculations explicit (when increasing the quantity of an item in a shopping cart, show the math: 2 X $45 = $90
- Include reminders of what happened on the previous page
- Avoid numeric captchas on web forms
Autism Spectrum Disorder – ASDa wide range of lifelong mental conditions that are characterized by a(n)
- A deficit is social skills and perspective taking (lack of empathy)
- Difficulty regulating emotions
- Either decreased language skills (many are non-verbal), or precocious vocabulary/speech. Many on the spectrum do not understand sarcasm, satire, parody, allegory, metaphors and will often take things literally.
- Obsession and hyperfocus on things/topics (e.g., there are people who are super-focused on ducks). They develop expertise in areas neurotypical people don’t find as fascinating
- High need for predictability and routine – they want to know ahead of time what to expect and do not do well with last minute changes
- Challenge to shift from one task to another
- Heightened sensitivity to stimuli (noise, light, smells, the texture of food, etc.)
- 1 in 59 children(1 in 37 boys and 1 in 151 girls) have ASD
Autism Spectrum Design Guidelinesas people on the autism spectrum thrive on predictability, they want (to)
- See very clear expectations for the steps in a task flows
- Know where they are in the process
- Use simple, clear navigation, with the browser buttons doing some of the moving from page to page
- See icons that are clear, large buttons with text. The icons should NOT be multicolored.
- Synopses for longer texts
- Context to the text – either by adding images or through reiteration from the previous sentence or paragraph
- Text that is separated from images and background (no overlapping or background images.)
- Simple graphics, but make sure that no element stands out too much
- Texts presented in a single column, using clear sans-serif fonts
- Soft, mild colors as the background. Avoid colors with high luminance (yellow and white are the worst offenders, with blue, red and brown the most appealing). On luminance, see the source
Anxiety DisordersAnxiety disorders are quite common (18.1% of the population), affecting twice as many women as men. A general anxiety disorder (GAD) makes people nervous, restless and tense, with a sense of impending danger, panic or doom. This leads to an increased heart rate, and trouble concentrating.
Designing for People with Anxiety
- Make sure users have feelings of control and progress toward achieving tasks
- Clearly signal where users are in the process
- Make interaction results predictable
- Make sure that the visual elements have space, and are not crowded together
- Increase the credibility of the website by eliminating typos, and poor alignment
Attention Deficit (Hyperactive) Disorder / ADHDAbout 5-7.5% of the population has some form of Attention deficit disorder, characterized by
- Difficulty sustaining attention, resulting in careless mistakes
- Is often easily distracted by extraneous stimuli
- Difficulty organizing tasks and activities
- Poor time management
- Often losing important things (keys, tools, paperwork, cell phone)
- Often gets overwhelmed
- Being forgetfulness and fidgety
Designing for People with ADHD
- Provide a ‘calm’ environment, with soothing colors. No decorations or distractions
- Write instructions in the affirmative
- Provide a high-reinforcement environment
- Distinguish important information by putting it in bold or color. Signpost sections and group related information into panels;
- Use large print (12-14 point) and a clear sans-serif font such as Arial;
- Help users follow text by writing/highlighting alternate lines in different colors;
- Avoid having dynamic or moving images on the site.
- Make it clear what point in the process they are at could help them keep track of their progress (see the example of a survey from www.typeform.com to the right
- Enable “save it as a draft” and quick/easy resume functions
- Make sure that chunks of information can be saved (and without needing to complete the whole page)