Accessible design: the benefits of considering everyone’s experience

There are four main types of disabilities:

1. Visual disability: blindness, low vision, colour-blindness
2. Auditory disability: deafness and hard of hearing
3. Motor disability: inability to use a mouse, slow response time, limited fine motor control
4. Cognitive disability: learning disabilities, destructibility, inability to remember or focus on large amounts of information

Accessibility is for everyone

If you design a product in an accessible way for people with disabilities, you are also creating a better experience for everyone else. Designing for accessibility isn’t a challenge but a way to increase the reach of your products. In other words, designing for accessibility benefits everyone.

We need to design for people with disabilities that are permanent, temporary, or situational.

• A permanent disability affects a person long-term, like loss of sight, hearing, speech, or mobility. For example, a person with permanent blindness uses a walking stick to navigate their surroundings.
• Temporary impairment is a short-term illness or ailment caused by an injury or other limitation.For example, someone who has temporarily blurred vision without their glasses.
• A situational challenge occurs when a person’s environment blocks certain functions. For example, a person who cannot read text messages on their mobile phone because they’re driving a car. Instead, this person uses voice commands to hear and send texts while driving. 

Solutions already on the market

For each type of disability, there are already solutions on the market and there will be more as technology progresses over time

• Visibility disabilities: Screen reader software is designed to read online content aloud. Those with visual impairments no longer need to rely on others to read to them. They can open a browser and interact with content independently as soon as it is published. A screen reader interprets and verbalizes text, button names, keyboard strokes, and code composed by a website or app. People with low vision often use them. In addition to screen readers, some people with low vision might use a computer or smart device with a high contrast screen or increased magnification.
• Auditory: People who are deaf or hard of hearing rely on captions and transcripts of multimedia. Closed captioning and speech-to-text convert audio into text for people with limited hearing.
• Motor: People with motor disabilities interact with online content using assistive devices that map their abilities to their hardware. Some are simple, like a mouth wand to interact with the keyboard. Others are more sophisticated, such as alternative keyboards or eye-tracking software that allows people to use a computer with just their eye movements.
• Cognitive: As a solution, designers tend to create a clean, well-organised, uniform look, avoiding clutter and including sufficient white space. Other good practices are:

• Use high contrast between text and background.
• Avoid too many choices or too much information on one screen.
• Avoid lengthy scrolling and provide links to additional content.

Augmentative and Alternative Communication (AAC) devices support people with cognitive disabilities who may experience speech limitations or learning disabilities by using images to communicate instead of words.

How is accessibility scored?

Web accessibility is ranked against the Web Content Accessibility Guidelines, or WCAG. Their current guidelines, WCAG 2.2, tell web owners what they need to do to make their content usable for everyone.

They score sites in three different categories:

A – The minimum accessibility standards.

• You can navigate the site with your keyboard
• Design elements should never depend only on colours
  For example: click the red button

The instruction ‘click the red button’ could be problematic for people with colour blind disabilities. Buttons, prompts and instructions should be clear so that users know what action they are taking. 

AA – Acceptable accessibility, something sites should aim for.

• Colour contrast is at a higher level
• Images have alternative text that describes what is depicted
• Navigation is clear
• Headings indicate the focus of the content that follows

AAA – The highest levels of accessibility.

• Very high colour contrast (you can check your colour contrast rating at this link)
• Videos include sign language
• No getting timed out of an order
• Tooltips are present whenever the content’s purpose needs explaining

Why accessibility is important?

We must ensure that our existing and potential users, including people with disabilities, have a good user experience and can easily access information. By implementing accessibility best practices, we are improving the site’s usability and digital solutions for all users.

Also, looking at data, we must always consider accessibility in our design because:

• 11 million people in the UK are deaf or hard of hearing
• Over 7 million people (18%) of the working-age population in Britain are disabled
• 1 in 10 people in the UK have some degree of dyslexia
• 700,000 people in the UK, including one in 100 children, have a diagnosis of autism spectrum disorder

A few examples:

Blindness affects 2.2 billion people worldwide and would make Netflix look like this. The line you can see illustrates the tab order – how people would navigate the site with the tab key – while the empty image boxes are all people would ‘see’ if not for alt text. The tab order ends at the bottom of the page, giving users no option to go back to the top.

Dyslexia causes much of Google to look unreadable. It can make reading, writing, and spelling a challenge, causing letters to look jumbled up and nonsensical. On a site like Google, where text makes up most of their platform, this would be particularly problematic.

Below is an example of how certain colour combinations and small font sizes / weights can make reading text a challenge.

How accessibility standards are met at Sysdoc (and a few tips)

• GDS Accessibility Standards: We follow the Government design principles (link here)
• Plan Heading Structure: We ensure all content and design fits into a logical heading hierarchy structure
• Logical reading order: The reading order for screen reader users should align with the visual order
• Provide a good colour contrast: Be especially careful with shades of orange, yellow and light grey as they often don’t pass accessibility standard requirements
• Use actual text instead of images of text: True text enlarges better, loads faster, and is easier to translate and customise
• Use adequate font size: Small text is complex for all users. Ensure text is optimally readable
• Line length: Don’t make lines of text too long or too short
• Make sure links are recognisable: Distinguish links from body text using more than just colour (e.g. underlining is a good practice)
• Use animation, videos, and audio carefully: Provide play/pause buttons. Avoid distracting movements. Where possible, add subtitles
• Design accessible form controls: Ensure form controls have descriptive labels, instructions, and error messages 

We hope this article has helped to demonstrate the importance of accessibility and provided some helpful takeaways and tricks you can apply to your daily work. We want to ensure we include everyone in everything we design.

Sources:

https://www.hearinglink.org/your-hearing/about-hearing/facts-about-deafness-hearing-loss/#:~:text=Hearing%20loss%20statistics%20in%20the%20UK&text=1%20in%206%20of%20the,are%20severely%20or%20profoundly%20deaf.

https://www.gov.uk/government/publications/understanding-disabilities-and-impairments-user-profiles/simone-dyslexic-user#:~:text=Include%20Us%20All-,Statistics%20about%20dyslexia,an%2011%2Dyear%2Dold.

https://www.bma.org.uk/what-we-do/population-health/improving-the-health-of-specific-groups/autism-spectrum-disorder#:~:text=It%20is%20estimated%20that%20around,have%20a%20diagnosis%20of%20autism.

https://www.gov.uk/government/publications/understanding-disabilities-and-impairments-user-profiles/saleem-profoundly-deaf-user#:~:text=11%20million%20people%20in%20the,25%25%20for%20the%20general%20population

https://www.st-andrews.ac.uk/hr/edi/disability/facts/#:~:text=Over%207%20million%20people%20or,article%20Work%20for%20disabled%20people).

https://www.tooltester.com/en/blog/accessible-websites/