Inside LiveChat

Everything You Need To Know About Chat Widget Accessibility

9 min read
Jun 22, 2021
  • Post on Twitter
  • Share on Facebook
  • Post on LinkedIn
  • Post on Reddit
  • Copy link to clipboard
    Link copied to clipboard

What’s the first thing that jumps to your mind when you think about building an online business? Whether it’s a product or service, it should, above all else, solve a problem. If it doesn’t, why bother? No one will buy your product if it doesn’t make their lives easier or more enjoyable. 

Once you’re sure you have a valid reason to launch a product, make sure it’s accessible for all your customers. Around 10% of the world’s population live with a disability. It’s likely that some of them will want to use your product or service at some point, but what if their impairments make it impossible to order because your product or service is inaccessible? To help you avoid a scenario like this, we made certain adjustments to make our product more accessible

An example of 1 in 10 people living with a disability.

Imagine a situation where a person with a hearing impairment wants to contact a customer service representative. It won’t be possible to talk on the phone, so that person will probably choose live chat. As a responsible provider, we want to have our Chat Widget accessible to everyone, regardless of the type of their disability.

Wait, what’s a chat widget?

If you haven’t used live chat software before, the term “chat widget” can be confusing. However, it’s the equivalent of a chat window. You’ve probably visited more websites using chat widgets on their websites than you’re aware of. Whether you’re visiting a website of your mobile provider, your bank, or an ecommerce website, they all have chat widgets on their websites. 

Before you add a chat widget to your website, do your research and make sure you use an accessible one. If you choose live chat that’s hard or impossible to use for people with disabilities, missing out on potential customers won’t be your biggest problem. The Equality Act of 2010 says that you break the law if you have an inaccessible website. As a consequence, you’re in danger of potential lawsuits and fines.

What's useful when it comes to a chat widget is that you don't necessarily have to type. A chat widget supports rich messages. Rich messages are cards that display products that you might want to buy.

An example of rich messages at LiveChat.

Rich messages can also take the form of buttons or quick replies that let you select a conversation action instead of typing. You can also use announcements. They serve as a customer engagement feature that you can use to announce sales, introduce product releases, invite customers to events, communicate business interruptions, and much more.

What’s web accessibility?

Web accessibility means that you design and develop a website in a way that its content is available to anyone, including people with disabilities. When you comply with accessibility standards, you make it convenient for people with disabilities to perceive, understand, navigate, interact, and contribute to the Web. So many aspects of our lives have moved online. We work, study, shop, pay our bills, and do many other things online. None of this would be possible if the websites we use weren't accessible. 

The symbol of accessibility.

Suppose you don't take web accessibility seriously. In that case, you need to know that the United Nations Convention on the Rights of Persons with Disabilities defines access to information and communications technologies as a basic human right. As long as we build our websites responsibly, we should have options to consume content and use the Web without barriers.

Can you build a successful online business without paying attention to accessibility? No. If you fail to deliver customer experience available to everyone, people will always look for alternatives that are easier to use. Also, as we’ve mentioned before, keep in mind that web accessibility is required by law in many situations

Now, ask yourself, how well do you know your audience? Chances are that a significant percentage of your website visitors struggle with disabilities. Is your website accessible to all types of disabilities?

Types of disabilities that affect access to the web

If you want your online business to be successful, your website must be accessible to provide equal access and opportunity to people with diverse disabilities. Before you optimize your website so that everyone can use it, you need to be aware of different types of disabilities:

The list above isn't complete and could easily be expanded, but the point remains that website accessibility must be considered for your business. Take a look at a video by the World Wide Web Consortium Accessibility Initiative that presents examples of poor web design and development and easy ways to enhance them:

The goal of web accessibility is to make it easier for people with disabilities to use the Web. However, if you build your websites according to web accessibility standards, you'll also benefit people without disabilities. An error message in the video above that says, "Error ead#234532 invalid data" is a perfect example of poor communication causing troubles for both people with and without disabilities. 

At LiveChat, we know how important accessibility is from a business standpoint. We listen to our customers and value their feedback. Our Chat Widget is now compliant with Web Content Accessibility Guidelines (WCAG) 2.1 AA after months of hard work.

What are Web Content Accessibility Guidelines?

Accessibility experts put together the WCAG, which consists of 12 guidelines that explain how to build websites that are accessible to people with disabilities. Those 12 guidelines are organized around four principles: Perceivable, Operable, Understandable, Robust, also known by the acronym POUR.

Symbols of four accessibility principles.

Perceivable

Make sure your customers can perceive the content on your website. The fact that some of your customers can perceive your content with one of their senses doesn't mean that other customers will perceive it in the same way. If you have a video on your website, add subtitles to it so that those who can't hear the sound in the video can at least read what the people in the video are saying. 

Operable

Your user interface (UI) should make it easy for everyone to navigate your website. Some people won't be able to use their computer mouse or other pointing devices, which means that they should have an option to access key elements of your website with a keyboard. If you want to show tooltips, keep in mind that they might not be accessible to some users if you don't implement them correctly.

Understandable

The content on your website and ways to navigate your website should be understandable. Don’t use jargon or long and complicated sentences that make it difficult to understand the essence of what you’re communicating. Also, don’t make your website overly complicated when it comes to navigation. A logical and natural structure of elements for your website is a key to accessible navigation.

Robust

Design and develop your website in a way that makes it work in various browsers. Test it by using different browsers and different devices, including computers, tablets, and smartphones. Lastly, make sure it's compatible with different assistive technologies.

Assistive technologies for web browsing

With the principles above in mind, we made our Chat Widget more accessible by adding assistive technology like a screen reader. We also adjusted color contrast and keyboard navigation. All of these changes help our customers with different types of disabilities interact and make LiveChat more inclusive. 

What’s a screen reader, and what’s it for?

Screen readers are used mainly by visually impaired people. A screen reader is a software application that processes written content on computers and web browsers and transforms it into a voice description. 

Depending on the intensity of this disability, people can choose from different types of screen readers. Apart from a typical screen reader, they can also use braille display or text-to-speech technology. 

In some cases, screen readers won't be able to read every type of content. Those cases include chat bubbles that display information that somebody is typing. While it's obvious to people without visual disabilities, those who are visually impaired and use screen readers below accessibility standards will have a hard time accessing content. It's the same with written content that's available only after you hover over it, like tooltips on a pricing page, for instance. You can, for example, add visually hidden text to similar elements of your website to enable screen readers to transform it into speech and make those types of written content more accessible.

Why do you need keyboard navigation?

Keyboard navigation is being able to access all parts of your website with a keyboard only. Typically, keyboard navigation requires using the tab key combined with the shift key and arrow keys to move from one element of your website to another. After our latest improvements to a Chat Widget, your customers can navigate the chat and use all the functionalities of the Chat Widget with a keyboard only.

To make keyboard navigation fully functional, you have to take a few considerations into account: make elements accessible by keyboard, set up focus states, and add focus traps. We’ll cover those three elements in detail in an article dedicated entirely to the improvements of the LiveChat Chat Widget. Without those elements, people with disabilities will have a hard time using your website because it won’t be properly navigable by keyboard. 

Color contrast

The right color contrast is crucial for color-blind people. They usually need specific color combinations and larger text sizes to be able to access content fully. If you want your website to be accessible, using a blue font on a black background isn't the best idea. 

Problems with color contrast don’t always result from the software itself. Sometimes, it’s people’s preferences and the ability to customize color settings in an app. People choose the colors they like, but their preferences often don’t match the recommended contrast ratio. We made our colors compliant with the WCAG principles. You can now set your brand color as the primary one, and we will adjust the rest of the colors used in Chat Widget to match required contrast ratios. 

Tim Berners-Lee, the inventor of the World Wide Web and W3C Director, said, "The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect." The changes we've made to our Chat Widget to make it compliant with accessibility requirements have been requested for a long time. From now on, you can significantly increase the number of people who can chat with you on your website. It’ll improve both your customer satisfaction and sales. On top of that, becoming more accessible will help you make the world a better place. What more can a business ask for?