Accessible design: the benefits of considering everyone’s experience
What is accessibility?
Accessibility is an inclusive practice that ensures there are no barriers that prevent interaction with or access to any digital solution by people with disabilities.
At Sysdoc, we are care about accessibility and always try to meet the best government standards when designing solutions and working with our clients.
There are four main types of disabilities:
- Visual disability: blindness, low vision, colour-blindness
- Auditory disability: deafness and hard of hearing
- Motor disability: inability to use a mouse, slow response time, limited fine motor control
- 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.
Latest blog postsSee all blog posts
How creative can you be with just one paperclip?
I was sketching out a new portrait idea when my husband asked me why is it that some people are creative and can create something out of nothing? I personally think that everyone is born creative. We sit children down at a table with a blank sheet of paper and some crayons and they start scribbling, limited only by the boundaries of their imagination. Over the years we begin to worry about what to draw, how to draw it, who we’re drawing it for and if they will like it. It is only when we choose to walk away from drawing the table that some of our creativity seems to dry up. Then there are some who choose to stay at the table.
How can design thinking help you reach your users
‘When you understand the people, you’re trying to reach – and design from their perspective – not only will you arrive at unexpected answers, but you will produce answers they’ll embrace.’ (1) Design thinking is a human-centred approach to innovation and problem-solving that focuses on user needs and expectations through intuitive experiences. Companies increasingly recognise the value of design to help navigate their evolving businesses. There is a clear link between design thinking and better return on your investment (2) and increasing design capabilities leads to improved customer satisfaction and product adoption. Companies are facing unprecedented social, technological, and economic issues, leading to dramatic shifts in customer and employee expectations.
Tales of tragedy and triumph: storytelling with It's A Penalty
This blog is the second in our two-part series on ‘storytelling.’ In part one we discussed how effective communicators are increasingly using storytelling to get their messages across and marking themselves out as leaders. In this blog we explore a real-life example of a storytelling workshop that Sysdoc recently led.