10 tips for accessible web design

To mark Global Accessibility Awareness Day, we’ve put together some top tips to help web professionals design for accessibility. Learn more about the benefits of inclusive design today.

We all have a responsibility to create a more equal society. Accessibility contributes to this by ensuring that people who have a disability have access to the same opportunities and experiences as able-bodied people. 

In recognition of Global Accessibility Awareness Day on the 18th of May, we’re taking a look at accessibility from a web design perspective. Designing for accessibility involves making sure that web pages are inclusive to the needs of all users, which is incredibly important in our fast-moving digital world. 

A recent study revealed that, on average, 51.4 accessibility errors were recorded per home page of the top one million websites. This shows that web designers still have a long way to go in ensuring that browsing online is an inclusive experience.

In this article, we take a look at what accessible design is, the benefits of inclusive design, and list 10 tips on how to design for accessibility. Keep reading to find out more.

What is accessible design?

Accessible design allows people with disabilities to navigate online platforms and interact online easily. Web designers have a big responsibility to make websites that ensure people with disabilities don’t encounter any issues while using the internet. 

In most cases, accessibility guidelines are published by governmental and industry groups. They act as a guide for website developers, so they can ensure that people with disabilities can access digital products successfully.

Due to the range of possible disabilities being vast (intellectual, physical, sensory, invisible, and mental illness), it’s important that design for accessibility considers as many people as possible and meets different individual needs. 

Why accessible and inclusive design is important

Your website is often the first impression someone will have of your brand. This becomes even more important for users with disabilities, as your website may be the only way they can interact with your brand and the only impression they receive. That’s why the user experience needs to be smooth for everyone that uses it.

Internet users have a wide range of capabilities and lived experiences. In fact, an estimated 1.3 billion people (16% of the world’s population) experience significant disability. These disabilities might relate to:

• Hearing
• Eyesight
• Memory
• Dexterity
• Mobility
• Development
• Learning.

If developers don’t design for accessibility, they run the risk of shutting large sections of society out of online conversations, which could restrict them from accessing important information about the goods or services they’re trying to access.

Whether it’s for websites or apps, inclusive design should be considered at all stages of the design process, so everyone can interact digitally as equals. For a more in-depth look at inclusive design, take a look at our Designing for a Diverse and Inclusive Future course by Samsung.

Benefits of accessible design 

Not only does accessible design benefit the user, but it can also be incredibly advantageous from a business perspective as well. That’s why, in this section, we will look at the benefits of accessible and inclusive design from the perspective of both.

Benefits for users

• Transforms lives. Make no mistake, accessible web design has the ability to change peoples’ lives and open up doors that wouldn’t usually exist. 
• Caters to all members of society. Accessible design aims to accommodate everyone. In order to be truly inclusive, a website needs to consider the whole of society and try to cater for as many different demographics as possible.
• Improves usability and navigation. By incorporating accessible design elements on your website, you will inevitably improve navigation and enhance your users’ online experience..
• Empowers website users. Your users will benefit from feeling more confident when using digital products that cater to their needs. This will empower them to try new things and step outside of their comfort zone online.
• Creates better website design for all. By creating a more inclusive website, you’re introducing design elements that benefit everyone’s online experience. Ultimately, the user experience will improve for all of your customers.

Discover the Fundamentals of User Experience in our online course by Accenture.

Benefits for businesses

• Reaches a larger market. People with disabilities total an emerging market the size of China plus the European Union. From a business perspective, this is a huge amount of potential income that simply can’t be ignored.
• Better brand image. Around 94% of consumers think it’s important that companies have a strong purpose. By implementing accessible design best practices, your business will be viewed as a brand that cares about inclusivity.
• Stand out from the competition. Designing for accessibility allows you to present your online products in a different way to competitors, which could give you the edge. It also shows that you’re more progressive than other brands.
• Inspires your team. Your staff are likely to be more motivated and take pride in their work if you prioritise creating products for all members of the public, and your disabled staff will feel seen.

You can learn more about how to foster inclusivity in the workplace in our blog post.

How to design for accessibility: 10 tips

Before you start redesigning your whole website to make it more inclusive, we have put together a helpful list of tips on how to design for accessibility successfully. You’ll be an expert before you know it.

1. Embrace accessibility to innovate and inspire

Catering for accessible requirements doesn’t have to mean that your web pages become boring. If anything, it should inspire you to explore new ideas and create a better online product. It’s all part of the challenge of creating inspiring websites that engage with an audience in unique ways.

2. Don’t rely purely on colour to convey information

While colour is a useful tool for presenting information, you need to consider that many people have difficulty distinguishing between different colours. Therefore, you should only consider using colour when highlighting or complementing what is already visible. Colour perception should never be relied on alone.

3. Make sure there is a contrast between the text and its background

Text in the foreground needs to contrast with background colours to avoid any confusion. By applying this to text on images, buttons, and other design elements, people with reduced vision will be able to read the information on the page. The only time this doesn’t apply is with logos. 

4. Ensure the website is easy to navigate

Navigation across your website should be consistent and the user journey made as simple as possible. Having clear, concise headings in the main navigation bar can help, as can a site search function. Implementing these design features will also benefit all of your users, as clunky, poorly performing websites are a disaster for engagement.

5. Include multimedia where appropriate

Having a range of multimedia options is a good way of presenting content that’s accessible to as many different people as possible. Multimedia tools such as images, video, audio, and interactive polls are all possible ways of boosting engagement and ensuring your content isn’t overly reliant on text.

6. Use headings and space to group content

Another way to design for accessibility is by using headings to group content and ensure text is easier to read. Whitespace can also be used to help the content flow better and make the text on a page more digestible.

7. Don’t use hover effects

Keyboard-only users who use speech recognition tools rely on actionable items that are visible on the screen. This means that if a button can’t be seen, then it cannot be verbally clicked. This is an important accessible design feature to consider when creating the navigation bar at the top of a page.

8. Be careful when using forms

A lot of modern form field designs have abandoned traditional identifying attributes in favour of a minimalist approach. However, with this approach, you run the risk of losing clearly defined boundaries and visible labels. Make sure that all fields have a descriptive label next to the field and avoid too much space. 

9. Offer instructions and feedback

Form submission confirmations and alerts that notify users when something goes wrong are two examples of providing feedback for interactions. Such feedback should be clear, easy to understand, and identifiable. This helps people of all disabilities to react when an error occurs.

10. Consider users of all disabilities

You need to try to ensure your website or mobile app design is as inclusive as possible for people of all disabilities. Good design for accessibility should consider people with autism, reduced vision, lack of hearing, dyslexia, physical or motor disabilities, and more. This means implementing design features, where possible, that are tailored to help each individual user.

Online accessible design courses on FutureLearn 

If learning about design for accessibility has inspired you to become a digital designer and specialise in accessibility, we offer a range of courses that can help you on your journey.

From how to become a UX designer to creating accessible interfaces, we’ve got you covered.

Expand your skillset and reach new career milestones with the help of FutureLearn today.

• Introduction to Content Design by Government Campus UK
• The Design Thinking Toolbox by Wintec and Te Pūkenga
• Digital Skills: User Experience by Accenture
• UX Design Fundamentals: Delivering Value to Users by FutureLearn
• The Online Educator: People and Pedagogy by The Open University
• Software Development Fundamentals: Web Accessibility and CSS by FutureLearn & Mulesoft
• Introduction to UX and Accessible Design by UAL Creative Computing Institute & Institute of Coding.