Ad

23 July, 2020

Accessibility and Interface design

We should take accessibility more seriously. 

One billion people, or 15% of the world’s population, experience some form of disability, and disability prevalence is higher for developing countries. One-fifth of the estimated global total, or between 110 million and 190 million people, experience significant disabilities. (Source - World Bank Group

In 2019 in France, disabled people were estimated at 12 millions with 1,5 millions suffering from vision Impairment and 850 000 from physical disability. The rest of the disabilities are related to hearing, mental or intellectual disability as well as autism and other minor disabilities.

Also, the number of disabilities is expected to rise with time as younger generations age and are prone to visual and hearing impairment due to excessive use of screens and earphones.

Simply put, people with disabilities are a user base that is as valuable for every business as any user bases. Seeing these numbers, we are talking about millions of unaddressed users that could use your services and products.

Taking accessibility more seriously in your product and service design could allow any business to grow its user base right now but also adapt to a certain future where these needs will be even more in demand.


What are the different disabilities and their needs?

Today we can observe five types of disabilities that need to have their needs addressed digitally:


  • Vision Impairment, Deaf or hard of hearing, Autism spectrum disorder and Physical & Learning disability 

  • Each of these disabilities have different sets of needs but most of these needs can be addressed the same way. Let's go over these needs and how to address them!

  • NB: This post does not take into consideration the needs of other disabilities that are not listed here.

Vision impairment & its needs:

Vision impairment concerns people who suffer from total blindness to people who simply wear glasses. However, some people have severe vision impairment (low vision, astigmatism, cataracts…) that despite corrective glasses or surgery aren't able to read small text or identify small details unless enlarged.

Vision impairment also concerns people with colourblindness.

Today a few websites provide some tools to assist people with visual disabilities:

  • Text enlargement tool:

This tool allows people to enlarge the text in order to read more easily small text. However, if your website contains a lot of information, enlarging the text will completely disturb the structure of your website and thus render your UX useless. ( see example below) This text enlargement is even more disturbing on mobile…


In order to avoid using this type of tool, there are some alternatives such as using bigger typography size (at least 19px) as well as a font that has sharp and spaced letters (Verdana and Arial are good examples.)

  • Tools for testing your website to be colourblindness compliant:

Regarding colourblindness, it is best to avoid clear text & elements and work on contrast. There is a lot of website where you can test your colour palette and visualise how a colourblind person will see it.

You can use toptal for example to test your website renders depending on colourblindness types! There are also other tools to test unique colors, you can find out more here.

  • Voice over tool:


This is an interesting tool for people with reduced vision and total blindness. It consist of a button on a website page to activate a voice over that will read or describe whatever that person will hover on. However, so far, I haven't found a good example on a website that uses that feature correctly. All I could find was an indicator that we can listen to a website content, but this feature didn't work properly.

However, I recently discovered Apple's VoiceOver for IOS and I was impressed by everything it could do! You can learn more about it here: Apple VoiceOver (OS X) .

I find this tool incredible however some of its use requires third party objects such as refreshable braille table for people who want to read normally instead of listening. (Let's not forget people who are deaf & blind at the same time!)

However I wonder, why is this app not an API? This way every website & app on every device would be fully equipped!

  • Full content personalisation filters tool:

This is a unique case so far, wasn't able to find another example but a certain website implemented an incredible filters tool to allow various profiles of vison impairment to personalise the website to their needs! You can check it out here: jobinlive.com (see images bellow to find the filters).

To sum it up, vision impairment is the hardest disability to provide for, but with the advances of voiceover technologies as well as speech controls, providing for these needs will be easier than ever.


Deaf & Hard of hearing & its needs:

This is one of the easiest disability to provide for:

  • If your website has music, provide a way to signal the user that the website has music as well as an option to turn it off or modify the volume. Today, Google chrome already indicate that sound is coming from a specific page by placing a speaker icon on the website's tab in the navigator.
  • Always provide subtitles on your videos! I cannot stress this enough, but there are still many businesses who overlook the importance of subtitles. Also, subtitles doesn't only serve deaf or hard of hearing people but also people with normal hearing who need to view the video in public spaces and don't have earphones! Many business missed a lot of opportunities to retain users by lacking subtitles on their product's video presentation.
  • Provide multiple ways to contact the client service. Many client services today are only reachable by phone and some of them have really long response time regarding emails. Please train your client service to respond faster to emails or provide a live chat or video chat fit for people with hearing disabilities. Another alternative is to have a super detailed FAQ page with a lot of answers for many possible questions.

Autism spectrum disorder & its needs:

Like deaf people, people on the autism spectrum are quite easy to design for:

  • Avoid web pages that are too cluttered with elements. Many people with autism have heightened sensory awareness and can be distracted by crowded pages. In this case you should prioritise white spaces.
  • People with autism also tend to prefer consistency and dependability,including web pages with a predictable layout and navigation.
  • The text should be as simple as possible, while providing definitions for any non-standard terms, such as idioms, jargon, and abbreviations and acronyms. Correct grammar and spelling are important. People with autism can fixate on things they don't understand or loose concentration.
  • Users should have as much control as possible over the site’s behaviour. Avoid time limits on content or automatic refreshes whenever possible. Provide clear instructions and error messages when filling out forms.

For more information you can consult this site.


Physical disability & its needs:

People with physical disabilities requires mainly gesture accommodations on digital products & services.

  • Large "tap-able" areas ( CTAs buttons, search bars, tabs etc…), since their motor skills are limited and it requires more effort to aim small targets, it is best to enlarge the most important interactions.
  • Prioritise most important content first to avoid long scrolling or swiping. Some people use another part of their bodies to scroll (a foot, an elbow, chin, mouth with tactile pen…) to scroll or swipe on their device. Long scrolling could be tiring especially if that person use her chin. Also, provide a way to adjust scrolling sensitivity.
  • Find better alternatives than drop downs to enter informations on forms. While drop-downs are a good way to enter information by taping on the screens, they often requires long scrolling (when you enter your birth date or birth year for example). There are better alternative such as a full calendar. You can refer to this site for more examples: www.fuckdropdowns.com
  • Prioritise step by step tunnels / processes. By doing so, you reduce scrolling and prioritise taping. for example for subscriptions forms. Doing so, allows to use larger CTAs buttons and raise the possibility to introduce more white spaces.

Learning disabilities & its needs:

This might surprise you, but Dyslexia is considered a "Learning disability"and not a "visual impairment"! This is due to the source of dyslexia coming from the way our brain analyses text.

For dyslexic people, there is a particular font that allows them to read with ease. This is the only need this disability has. However the hardest part is to implement it seamlessly on your product. So far the best example i found was with job in live preference filters (mentioned above).

However sometimes, larger fonts allow them to read easily but this is not always the case and requires training.


How to design for everyone the same experience?

To me, addressing accessibility on digital products isn't necessarily cramming all possible tools and accommodation on your digital interface! But finding a middle ground that could suit more than half the different profiles as well as adding an option in the footer for profiles that need more personalisation (similar to job in live) .

Here is a list of "must have" on any digital products to meet more than the average accessibility standards and the disabilities who will be affected by these changes:

  • Larger texts ( Vision impairments, autism, dyslexia)
  • Larger CTAs (Physical disability, vision impairments)
  • Step by step tunnel ( Physical disability)
  • Subtitles (Deafness, Autism)
  • Sound indicators & controls (Deaf, Autism)
  • More White spaces ( Vision impairments, autism, dyslexia, physical)
  • Usage of sharp & spaced lettering ( Vision impairments, Autism, Dyslexia)
  • Client service Chat or Detailed FAQ ( Deafness, Autism)

You can also check a small UI exercice for the 100 days UI challenge I did where I redesigned the sign up page of an organisation that aims to provide jobs for people with disabilities by taking into considerations all their needs : Friendly sign up page for people with disabilities.

As you can see, designing for multiple types of disability isn't that hard and requires only a little of your attention during the usability testing of your product! Test it with disabled people if you can or refer to this guide!

However, this article addresses only a portion of digital accommodation while there is still a lot to be done especially in gaming, AR & new products that requires specific interactions but nothing is impossible!