How to design for accessibility

Published on
March 15, 2023

You might have seen the term “A11y” and wondered what it means, or even how to pronounce it. Simply translated, “A11y” is an abbreviation for accessibility—specifically, accessibility of websites. What accessibility is and how to provide it, though, is a more complex topic.

Accessibility has often been associated with improving usability for people with disabilities. However, the benefits of accessibility extend well beyond those with disabilities. Not only are there 105 million friends and family members who have an emotional connection to a disability (according to the WHO), but the reality is that anyone can become disabled at any time, either permanently or temporarily. 

Accessible products have a significant impact. And building accessible products begins with design.

 

Designing with accessibility in mind

In 2020, 98.1% of home pages had detectable Web Content Accessibility Guidelines (WCAG) failures, rendering them inaccessible.

Disability is created by inaccessibility (credit to Anne Cook). Every time we leave accessibility out, we leave people out. Everyone we exclude becomes disabled. Given that 67% of accessibility defects originate in design, I have put together a list of disabilities and how they can be addressed in the design process.

 

Visual Impairments

Examples of visual impairments include blindness, low-level vision, and color blindness.

Reliance on a screen reader (software that reads digital text aloud) requires designing in such a way that the screen reader can determine where text is on a page and the correct sequence in which that text should be read.

Screen readers such as JAWS (Windows), Dolphin (Windows), NVDA (Windows), ChromeVox (Chrome), and Orca (Linux) are applications that read both context and content, while other solutions leverage software built into the operating system, such as VoiceOver (macOS, iPadOS, iOS).

Some visually impaired people often use screen magnifiers that are either physical magnifiers or software zoom capabilities. Allowing users to increase text size is another way we can help people with low-level vision and can be less cumbersome than using a magnifier, if designed well.

 

Hearing Impairments

Deaf and hard-of-hearing (DHH) people have various levels of hearing loss ranging from mild to profound. According to WHO, 466 million people worldwide have a DHH disability, making it challenging to consume media with an audio component.

For DHH design: 

  • Textual alternatives should be provided for all non-text media.
  • Videos should be manually captioned to ensure accuracy, and transcripts should be provided for audio content.
  • Always consider text simplification due to high levels of language deprivation in DHH populations.

Although some do use AT (Assistive Technology), they are not widespread. Designing to make content more accessible to DHH people includes providing textual alternatives to all non-text media (e.g., manually captioning videos, providing scripts for audio) and simplifying language (as DHH people often experience high levels of language deprivation.

 

Mobility Impairment

A mobility impairment is any disability concerning movement, from purely physical (e.g., loss of limb, paralysis) and neurological/genetic disorders that lead to weakness or loss of control in limbs, to loss of motor control due to advanced age, a trauma, or a condition (whether temporary or permanent), to hardware limitations such as not having a mouse.

Designers can make websites more accessible to the mobility impaired by: 

  • Designing large, clickable actions over ones that demand precision. 
  • Giving space between form fields, rather than bunching them together, and providing shortcuts to form filling and scrolling, also helps. 
  • Adding keyboard and speech navigability in addition to click-based actions and extending timeout windows improves ease of use.

Cognitive Impairment

Cognitive impairment refers to a broad range of disabilities. This group includes those with the most limited capabilities due to intellectual disabilities as well as those who experience a natural decline in thinking and remembering skills over time. 

Examples of cognitive impairment include: 

  • Depression
  • Schizophrenia
  • Dyslexia
  • Attention deficit disorder (ADD)

The Centers for Disease Control (CDC) estimates that one out of four U.S. citizens has a disability. Of those disabilities represented, cognitive impairment is the most common in young people. To help those with cognitive impairment, deliver content in more than one way, produce content that is easy to understand/uses plain language, focus attention on important content, and minimize unnecessary content or advertisements, as these can be distracting. 

From a UX perspective, maintain a consistent webpage layout and navigations, use familiar web elements (e.g., colors, symbols), and divide processes into logical, essential steps with progress indicators. Simplicity is key, so ensure easy website authentication—without compromising security—and make forms easy to complete.

 

Ability Barriers

Ability barriers can be incidental, environmental, or due to an event such as hardware malfunction, and they can arise at any time, for any user. Examples of ability barriers include sleep deprivation (incidental), using a mobile device underground (environmental), or a mouse no longer working (hardware malfunction).

 

A11y matters to your customers and your business

Designing for accessibility brings significant benefits to users, but there is also a compelling business case for investing in A11y. According to the World Wide Web Consortium (WC3) people with disabilities worldwide have an estimated spending power of $9 trillion, yet this group is unserved or underserved by most e-commerce websites. Addressing accessibility can open revenue opportunities for your business.

Increasingly, many government entities are putting in place legislation that requires websites to be accessible, introducing legal requirements for some organizations that offer specific services to these countries’ populations. Accessibility, in these cases, is required by law.

Not only are there financial and legal benefits to accessibility. Semantic HTML, which improves accessibility, also improves SEO. Caring about accessibility demonstrates good ethics and morals, which improves your public image, and accessibility improvements make your site more usable for all, such as mobile phone users or those with low network speed.

While prioritizing A11y is not required, the importance, benefits, and impact on users make a good case for investing in accessibility.

Author
Subscribe to newsletter
By subscribing you agree to with our Privacy Policy.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Share

How to design for accessibility

How to design for accessibility
Down Arrow

You might have seen the term “A11y” and wondered what it means, or even how to pronounce it. Simply translated, “A11y” is an abbreviation for accessibility—specifically, accessibility of websites. What accessibility is and how to provide it, though, is a more complex topic.

Accessibility has often been associated with improving usability for people with disabilities. However, the benefits of accessibility extend well beyond those with disabilities. Not only are there 105 million friends and family members who have an emotional connection to a disability (according to the WHO), but the reality is that anyone can become disabled at any time, either permanently or temporarily. 

Accessible products have a significant impact. And building accessible products begins with design.

 

Designing with accessibility in mind

In 2020, 98.1% of home pages had detectable Web Content Accessibility Guidelines (WCAG) failures, rendering them inaccessible.

Disability is created by inaccessibility (credit to Anne Cook). Every time we leave accessibility out, we leave people out. Everyone we exclude becomes disabled. Given that 67% of accessibility defects originate in design, I have put together a list of disabilities and how they can be addressed in the design process.

 

Visual Impairments

Examples of visual impairments include blindness, low-level vision, and color blindness.

Reliance on a screen reader (software that reads digital text aloud) requires designing in such a way that the screen reader can determine where text is on a page and the correct sequence in which that text should be read.

Screen readers such as JAWS (Windows), Dolphin (Windows), NVDA (Windows), ChromeVox (Chrome), and Orca (Linux) are applications that read both context and content, while other solutions leverage software built into the operating system, such as VoiceOver (macOS, iPadOS, iOS).

Some visually impaired people often use screen magnifiers that are either physical magnifiers or software zoom capabilities. Allowing users to increase text size is another way we can help people with low-level vision and can be less cumbersome than using a magnifier, if designed well.

 

Hearing Impairments

Deaf and hard-of-hearing (DHH) people have various levels of hearing loss ranging from mild to profound. According to WHO, 466 million people worldwide have a DHH disability, making it challenging to consume media with an audio component.

For DHH design: 

  • Textual alternatives should be provided for all non-text media.
  • Videos should be manually captioned to ensure accuracy, and transcripts should be provided for audio content.
  • Always consider text simplification due to high levels of language deprivation in DHH populations.

Although some do use AT (Assistive Technology), they are not widespread. Designing to make content more accessible to DHH people includes providing textual alternatives to all non-text media (e.g., manually captioning videos, providing scripts for audio) and simplifying language (as DHH people often experience high levels of language deprivation.

 

Mobility Impairment

A mobility impairment is any disability concerning movement, from purely physical (e.g., loss of limb, paralysis) and neurological/genetic disorders that lead to weakness or loss of control in limbs, to loss of motor control due to advanced age, a trauma, or a condition (whether temporary or permanent), to hardware limitations such as not having a mouse.

Designers can make websites more accessible to the mobility impaired by: 

  • Designing large, clickable actions over ones that demand precision. 
  • Giving space between form fields, rather than bunching them together, and providing shortcuts to form filling and scrolling, also helps. 
  • Adding keyboard and speech navigability in addition to click-based actions and extending timeout windows improves ease of use.

Cognitive Impairment

Cognitive impairment refers to a broad range of disabilities. This group includes those with the most limited capabilities due to intellectual disabilities as well as those who experience a natural decline in thinking and remembering skills over time. 

Examples of cognitive impairment include: 

  • Depression
  • Schizophrenia
  • Dyslexia
  • Attention deficit disorder (ADD)

The Centers for Disease Control (CDC) estimates that one out of four U.S. citizens has a disability. Of those disabilities represented, cognitive impairment is the most common in young people. To help those with cognitive impairment, deliver content in more than one way, produce content that is easy to understand/uses plain language, focus attention on important content, and minimize unnecessary content or advertisements, as these can be distracting. 

From a UX perspective, maintain a consistent webpage layout and navigations, use familiar web elements (e.g., colors, symbols), and divide processes into logical, essential steps with progress indicators. Simplicity is key, so ensure easy website authentication—without compromising security—and make forms easy to complete.

 

Ability Barriers

Ability barriers can be incidental, environmental, or due to an event such as hardware malfunction, and they can arise at any time, for any user. Examples of ability barriers include sleep deprivation (incidental), using a mobile device underground (environmental), or a mouse no longer working (hardware malfunction).

 

A11y matters to your customers and your business

Designing for accessibility brings significant benefits to users, but there is also a compelling business case for investing in A11y. According to the World Wide Web Consortium (WC3) people with disabilities worldwide have an estimated spending power of $9 trillion, yet this group is unserved or underserved by most e-commerce websites. Addressing accessibility can open revenue opportunities for your business.

Increasingly, many government entities are putting in place legislation that requires websites to be accessible, introducing legal requirements for some organizations that offer specific services to these countries’ populations. Accessibility, in these cases, is required by law.

Not only are there financial and legal benefits to accessibility. Semantic HTML, which improves accessibility, also improves SEO. Caring about accessibility demonstrates good ethics and morals, which improves your public image, and accessibility improvements make your site more usable for all, such as mobile phone users or those with low network speed.

While prioritizing A11y is not required, the importance, benefits, and impact on users make a good case for investing in accessibility.

Ro Dixon

Ro Dixon

Lead Designer

No items found.
green diamond