The internet today is the main source of information, entertainment, and communication for everyone irrespective of their socio-cultural, economic and educational backgrounds.

However, there is one set of people that are not particularly taken into consideration when it comes to designing websites – people with visual, motor, speech, or cognitive impairments.

One of the reasons for this is the fact that people with disabilities form a small part of a site’s audience. And thus designing for accessibility might not be a priority for everyone.

However, it is key to remember that designing for accessibility doesn’t just help people with disabilities but also other users of the website. A great real-world analogy of this would be moving ramp escalators in malls and subtitles in movies.

10 tips for improving web accessibility

Up until a few years ago, designing for accessibility meant having to spend too much time and effort while also compromising on the UI of the website. But that is not the case anymore.

Given the advancement in technology, it has become easy to create great looking websites that are engaging, and also focus on web accessibility.

In this blog, we elaborate on the 10 principles shared by W3C that UX Designers should follow when aiming to design for web accessibility.

Background and foreground should be in contrast

People with low vision, colour blindness, or worsening vision have a tough time reading text on a website if there is not enough contrast.

Thus, a contrast ratio of at least 4.5:1 is recommended to enable people with visibility issues to read effortlessly off the screen.

This ratio obviously become more flexible with larger and heavier fonts since they’re easier to read in general.

Although a small change, this can have a huge impact on your web accessibility.

Information should not be conveyed solely through colours

#accessibility #blog #ux #uxdesign #tcules

If you want to convey something important, make sure you don’t rely solely on one mode of communication – such as colours.

By using only colour, the message is lost on people with visual impairments, such as colourblindness.

You can overcome this problem by using icons, text labels, or patterns along with colours.

Using asterisks for mandatory fields is a great example that when implemented can improve the web accessibility of your website.

Make sure each interactive element is easily identifiable

#accessibility #blog #ux #uxdesign #tcules

On the website, there are different types of elements. Some of those are clickable and some are not.

It is therefore important to style clickable elements differently so that people can identify them more easily.

A popular method of making clickable elements stand out is to highlight and underline them or draw a border around them.

Consistent and clear navigation is essential

Regardless of how good a website is, if it is hard to navigate or people cannot figure out how it works, most of it will go undiscovered and lead to a high drop off rate.

Therefore, when designing a website, ensure consistent naming, styling, and positioning to enhance web accessibility.

Provide users with more than one way to navigate your website, and include enough clues on each page to help them identify where they are on the site.

Label form elements clearly

#accessibility #blog #ux #uxdesign #tcules

Websites, landing pages are incomplete without forms. They serve a great purpose as a mode of communication between the website and the user. Thus, it is important that forms elements are labelled correctly and users do not get confused when trying to fill out forms.

Keep the law of proximity in mind when labelling forms to improve the web accessibility of your forms.

According to the law, elements that are close together are perceived as one unit.

Communicate feedback clearly

Anytime there is feedback on the website that informs a user before submitting a form or requires the user to rectify a mistake or notifies them of changes on the page it should be prominently displayed using colours, icons and highlights.

#accessibility #blog #ux #uxdesign #tcules

A great example of this is when you input an invalid email id on the Gmail website, it gives you an error message that includes red coloured text which clearly informs you of the issue and an icon beside it. This makes it hard for anyone to miss noticing it.

Utilise white space appropriately

#accessibility #blog #ux #uxdesign #tcules

White space is a simple and effective tool that if utilised correctly can transform your designs.

Using it correctly to ideally group relevant content can help you improve the readability of your website by making it easy to scan and providing a clutter-free experience. Thus enhancing web accessibility.

Design different layouts for different viewport sizes

#accessibility #blog #ux #uxdesign #tcules

Given the number of options available to explore the internet, different people would land on your site from different devices like desktops, mobiles or tablets.

Given the different screen sizes of these devices, it is pivotal to ensure that you make the best use of the screen real estate.

It is imperative that the text size and line width are optimized for readability and legibility.

Consider alternative image and media options in your design

Designing websites to include alternative media links to audio transcripts, audio described versions of videos, text along with icons and graphical buttons, descriptions for tables or complex graphs helps ensure that no one is left out from reaping the benefits of your valuable content.

Provide controls for Autoplaying content

#accessibility #blog #ux #uxdesign #tcules

Most modern web browsers support the content Autoplay feature. As the name suggests, this enables audio and video to start playing automatically when a webpage loads.

Although a great feature in itself, it might be distracting or frustrating to people with slower cognitive abilities.

Thus, providing visible controls to allow users to stop any animations or auto-playing sound helps a lot.

This applies to carousels, image sliders, background sound, and videos.

Conclusion

If you’ve read until this point, you might have realized that designing for accessibility can be quite a tedious task.

However, web accessibility also comes with its fair share of rewards like ranking well on search engines, increasing audience reach, gaining a competitive edge, improved site usability and also avoiding potential discrimination lawsuits.

If you failed to ensure web accessibility when you first designed your website or if you are looking to design a new website that has optimal usability, we’d be more than happy to assist you in the task.

You can reach out to us by filling the contact form below.

Have more questions about how web accessibility can help your business?

You might be interested in

Very few designers and marketers realize that landing page design is a combined function of marketing and design.This article provides deep insights on how to design and optimise a landing page.

A case study about how we helped UK’s largest direct-to-consumer eCommerce store design and develop their Magento based website that led to an increase in organic traffic, revenue and reduction in cost.

Have a project for us?

    contact tcules