Designing Accessibility and Inclusivity in Your Website

Tanhaz Kamaly
Published 08/04/2022
Share this on:

Incorporating accessibility and inclusivity best practices in your website designIf the past year has taught us anything, it’s that a pandemic is far easier to get through with the internet. Working from home, e-commerce, online gaming, and cinematic experiences have become the norm, which is why they should be available to everyone.

Most of us expect seamless customer care and support whenever a website goes down for a couple of hours. But imagine a situation in which you have no access to your favorite websites. This is the reality for many people. In this article, we will be exploring how UX design can be inclusive and accessible to everyone.

 


 

Want More Tech News? Subscribe to ComputingEdge Newsletter Today!

 


 

Links, Buttons, and Layout


Whether you’re a UX designer who has just been commissioned by a threat intelligence platform or a company that provides a business VoIP solution, the web design process is still similar. You begin with an idea. This evolves into a wireframe, a more detailed wireframe, and finally, a web page. Links, buttons, and layouts are all crucial elements of design. So they need to be inclusive and customizable.

You need to give people options. A small button or fashionable cursive text may be crucial for the “aesthetic,” but it can often cause certain users to struggle. Ensure that your text can be made larger and that your call-to-action buttons are clear. Also, if you’re linking anchor text, make sure you include a description of where this link will lead. This means instead of linking “click here,” link a phrase or keyword.

A lot of website layouts include animation or pop-ups. As interesting as they may be to some, they can be distracting or even anxiety-inducing for others, leading to a bad review from your site’s visitors. We’re not saying don’t include them, just ensure that there is a straightforward way to close the window and stop the content from playing. WCAG states that if the content plays for more than three seconds, there should be an option to switch it off.

 

Contrast and Color


The contrast and use of colors are vital for brand image. It makes customers pick you out of a crowd or stop their car on the highway to visit your store. It’s also crucial online. But, color blindness or deficiency is common. Research shows that around 1 in 12 men and 1 in 200 women suffer from this condition. Such conditions can affect the appearance of red, green, orange, and many other colors.

WCAG standards of contrast colors
Source

The web content accessibility guidelines (WCAG) require any website builder to ensure that the contrast ratio is 4.5: 1 for standard text and 3: 1 for larger text, at a minimum.

UX designers should avoid using color to communicate a point or command. For example, red for ‘no’ and green for ‘yes’ can cause many visually impaired people stress and confusion. You should also stay away from colors that are very different in contrast, as this can trigger people on the autism spectrum.

 

Navigation


Website navigation can include everything from the drop-down menu style to the way content is organized. You need to be aware that not everyone is capable of using the mouse and keyboard together. This is why your website should provide users with additional navigation methods to improve the customer experience.

Support keyboard navigation is a technique often adopted by people with motor neuron conditions, muscle disorders, and the visually impaired. It enables them to navigate the screen using just the keyboard. It is vital for you, as a UX designer, to allow this type of navigation. If you’re unsure that your website is capable of this, try navigating it using just the keyboard yourself. If it’s difficult, make adjustments accordingly.

Another crucial feature that you need to include is breadcrumb navigation. This aid allows users to see their exact trail on the website and where they are now. Breadcrumb navigation is named after the popular fairy tale Hansel and Gretel, where the characters leave a breadcrumb trail so that they don’t get lost in the forest. For example:

business advice > customer experience > customer service > customer service tools > customer service management system.

 

Asset Alternatives


A web page combines various media assets such as images, video, audio, infographics, etc. And these large sets of data are normally stored in cloud data lake tools that provide a seamless user experience on most days. That’s why prioritizing the digital experiences of customers is a must and having alternatives is essential.

Visually impaired individuals often use a screen reader to experience a website. This assistive software renders written text and image content into speech or even braille—so UX designers should spend time crafting the best <alt> text for their images.

For example, let’s say you are designing a blog page with the title “In the UK, virtual receptionists provide professional services.” You have placed an image of an agent and a video conference call solution. Instead of describing this image as just a “virtual receptionist example,” you need to give it context: Explain in detail how many people there are and what they’re all doing in relation to the text.

Source

 

If your website is heavy on video or audio content, it is crucial that you provide an alternative method for people to experience it. For example, turn an audio podcast into a transcript. Various AI tools can help with this process. Also, add captions to your videos.

Another thing you can do for more complex infographics or graphs is to add a clear description or summary of the data points.

 

Feedback Awareness


We all make mistakes when navigating the internet. We press the wrong buttons, misread instructions, and fill in forms incorrectly. People with disabilities can often find it challenging to know when they’ve made a mistake online. Especially if the website only alerts them subtly, like with colors or sound effects.

This is why providing these users with clear and concise feedback is crucial for accessibility. Not only that, but you should also:

  • Label boxes and other input forms clearly
  • Allow Autocomplete to fill in the remainder of the form to reduce typing
  • Allow the user a chance to verify and check for errors

The main thing here is finding a balance between being helpful and overbearing.

 

To Summarize


Accessing and navigating the internet is a right, not a privilege, especially in a 2022 world where everything has become a digital operation. There’s plenty of technology out there that can assist people with disabilities, but the foundation of web design should also cater to these individuals. UX designers need to make it their mission to design inclusively. This article has only scratched the surface of inclusive web design. To ensure that your website is truly designed with disabilities in mind, you should consider appointing an accessibility auditor.

 

About the Writer


Tanhaz Kamaly is a Partnership Executive at Dialpad, a modern cloud-hosted business communications platform with virtual call center solutions that turns conversations into the best opportunities, both for businesses and clients. He is well-versed and passionate about helping companies work in constantly evolving contexts, anywhere, anytime. Check out his LinkedIn profile.