How do different types of disabilities affect website users?

A 2011 study by the World Health Organisation found that roughly one billion people (15% of the world's population at the time) are registered as living with at least one form of disability. With this in mind, it's crucial that web designers and developers understand how to build a website for users with different disabilities. 

 

The Nielsen Normal Group defines accessible website design and development as "encoding meaning rather than appearance", and suggests that so long as websites are developed specifically for meaning, then browsers, screen readers and other digital tools will enable disabled users to interpret and interact with online content in a way that is best optimised for their individual needs.

 

To help web designers and developers understand a little more about what those individuals' needs are likely to be, we've put together a helpful guide that breaks down the four primary types of disabilities and how these conditions are likely to affect disabled users as they navigate the internet.

 

 

👀 Visual disabilities

Screen reading technology has revolutionised the way that the visually impaired access the web. A study from The National Federation for the Blind discovered that an estimated 7.3 million Americans rely on screen readers in order to browse the internet, just a small percentage of the 285 million people worldwide who are living with some form of sight loss.

 

There are a wide range of different sight-based disabilities that developers need to consider when developing an accessible website for the first time, ranging from complete and partial blindness to short-sightedness (myopia), farsightedness (hyperopia), and four different types of colour-blindness (protanopia, deuteranopia, tritanopia and monochromacy).

 

Fortunately, developers who are keen on differentiating their websites from the competition are also inadvertently streamlining their websites for the visually impaired thanks to a shared list of benefits between accessibility and SEO (more on that later).

 

Things to do:

• Make sure that all text-to-background colours pass with at least an AA rating according to Web Content Accessibility Guidelines (WCAG).
• Avoid certain shades of red and green that are difficult to see against darker backgrounds for those who suffer from deuteranopia.
• Use clear iconography and don't rely on colour alone to distinguish between certain elements such as confirm and cancel buttons.
• Label buttons and interactive elements clearly, avoiding short nondescript text such as "click here" to assist users that utilise screen reading programs.
• Ensure all images throughout the website include alt tags so that people who use screen readers are more easily able to identify their content.

 

🦻 Hearing disabilities

According to the World Health Organisation, around 1.5 billion people (almost 20% of the global population) live with some form of hearing loss. 430 million of those (or 5% of the world's population) are credited as hearing disabled.

 

According to the American Speech-Language-Hearing Association (ASHA), the three most common forms of hearing loss are:

 

• Conductive hearing loss: Sounds struggle to make it past your outer and middle ears, resulting in soft sounds being harder to hear and loud sounds becoming muffled.
• Sensorineural hearing loss: Damage to the inner ear results in soft sounds being harder to hear and loud sounds becoming unclear and muffled.
• Mixed hearing loss: A combination of the above two hearing disabilities.

 

Thankfully, most of the online environment today is focused primarily on visual-led experiences. And, any experiences that do rely on video are becoming more and more accessible.

 

A 2021 report by 3PlayMedia found that 87% of people surveyed actively provide captions to accompany most (if not all) of their video content. Further,  over 50% of those responding said they do so with a direct focus on accessibility.

 

Things to do:

• Clearly subtitle videos and offer additional subtitles if possible for those who speak alternative languages.
• Offer full written transcripts to accompany any audio-based content.
• Ensure that any media player controls are enabled to help users with hearing-related disabilities adjust the audio volume to suit their own requirements.
• Avoid high-frequency sounds on your website. They can be troublesome for people who suffer from hyperacusis or other tinnitus-related conditions.

 

 

🧠 Cognitive & neurological disabilities

Typically characterised by a difficulty in comprehending and processing information, cognitive and neurological disorders affect roughly one in six people globally. They can make it difficult for users to engage with the content of a website.

 

Cognitive and neurological disabilities are often less predictable than visual, hearing or motor disabilities so it can be a complex task for developers to accurately account for them when building an accessible website for users with different disabilities. 

 

It's best practice to focus on crafting a short and intuitive user journey. Keep animation and moving elements to a minimum, and ensure that the readability of any text is as clear as possible.

 

Things to do:

• Avoid justified text, break any written content up into smaller sections, regularly use new paragraphs and avoid overly-long lines of text.
• Use sans-serif fonts where possible, as users with dyslexia can often struggle to discern the individual characters found in crowded, serif typefaces.
• Consider using a darker colour palette to improve text readability for those who experience dyslexia and help to ensure better sleep for those who view their screens late at night thanks to a reduction in the amount of blue light emitted.
• Remove (or restrict) any flashing elements around your website to avoid triggering seizures in those diagnosed with photosensitive epilepsy. The W3C specifies that content should not flash more than three times in a single second, and for developers in the United States of America, Section 508 of the Rehabilitation Act states that pages must be "designed to avoid causing the screen to flicker with a frequency greater than 2 Hz and less than 55 Hz."
• Ensure that any custom styling (colour palettes and font families for example) can easily be disabled by any third-party accessibility software that a user may have installed.

 

 

✍🏼 Motor disabilities

For website developers looking to help create a more accessible online environment, it's also worth considering how users will interact with your website at the physical level.

 

For those who experience limitations to their fine motor skills, it may not always be possible to use traditional input methods such as a mouse and keyboard. As such, it's important to examine how alternative input devices (such as voice commands, mouth sticks or keyboard-only controls) affect a user's ability to interact with your website.

 

Things to do: 

• Streamline your website's navigation to reduce the number of clicks required to reach a new page. For example, consider including links to the most popular pages in your website's footer, and ensure that if you're using dropdown menus, make sure that these expand on hover instead of on click.
• Be generous with the sizing of interactive elements such as buttons or hyperlinks so that users don't have to be so precise when engaging with them. The W3C recommends a minimum target size of 44px for all mouse-based elements to ensure maximum accessibility.
• Remove time-limited actions on things like form submissions to reduce both physical and mental stress on a user.
• Make sure that modal or popup elements on your website are easy to close with both keyboard and mouse controls.
• Check if you can tab through all elements on the page. This is one of the easiest forms of keyboard navigation testing developers can do.

 

 

💚 Let's build an accessible website together

We're a team of designers and developers who specialise in the design and build of responsive and accessible Shopify stores. We understand how to build a website for users with different disabilities so if you need our help in this area, get in touch now!