Tag: accessibility

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?

  I could go on with the list … but I am not going to.  And yes, we have all been there, and know how important it is to design not just for the able-bodied native speaker sitting in a quiet room, after a good night’s sleep.

Inclusive design

Before 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

Here are some well-known examples of inclusive design:

Cognitive Disabilities

When 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.

In this post, I would like to talk about designing with learning disabilities in mind (stealing Jeff Johnson’s book title a little bit). As I said before,  there is no agreed upon terminology and definition of these disabilities, and my list is not scientifically determined. My focus is going to be on the following challenges, along with web design guidelines

• Dyslexia
• Dyscalculia
• Autism Spectrum
• Anxiety
• Attention Deficit Disorder

Dyslexia

Dyslexia is a lifelong language-based learning disability, characterized by difficulties with accurate and fluent word recognition, spelling and reading decoding. About.10-20% of the population is affected by some version of dyslexia. Some famous people who have dyslexia include: Whoopie Goldberg, Steven Spielberg, Anderson Cooper, Tim Tebow

Designing for People with Dyslexia

Language

• 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

Miscellaneous

• 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.

For more information on design guidelines, visit the British Dyslexia Association, and their stylesheet.

Dyscalculia

also 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

Famous people include Benjamin Franklin, Cher, Bill Gates

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 – ASD

a 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 Guidelines

as 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 Disorders

  Anxiety 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 / ADHD

About 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)

Replace long pages that require extensive scrolling with separate pages

Bottomline

Usability testing Design and test with a diverse set of users, for diverse scenarios.  Try to recruit people whose native language is not English, and users without a college education. Create realistic scenarios when testing. Most users do not use your interface, do not read your words in a calm testing room, having an hour set aside to complete a task. Language: Use simple, easy-to-understand language (vocabulary, sentence structure, paragraph). Use visual organizers to get your point across User-control: Allow the user to feel in control both of the process and as much of the display as possible (i.e.g,  customization)