Accessibility in LWC

3 min readDec 29, 2021

Working on LWC requires lots of development on HTML and javascript, writing basic HTML is very easy, you can use out-of-the-box components from SLDS.

Developers generally don’t pay much attention to component accessibility which makes it hard to use for people with disabilities as they use assistive devices or software to browse the web.

For example —

People with visual disabilities use screen readers or assistants which read out loud all the things on a page which helps them to navigate and fill in the information.

How to achieve accessibility in LWC —

I have created many LWC components but never give a thought about accessibility it but that’s a very important thing to cover all types of users.

I am sharing the solutions, I have done for accessibility.

Make the component compatible with a screen reader -

Screen readers are required to help visually challenged people to read the website and fill out the information. To make the page compatible with screen reader, I have tried the below things —

Always give a descriptive title and language to a page.

<html lang="en">
<title>something</title>

Add a descriptive title for links, buttons, and all types of inputs. As screen readers will read them out loud.

<a title="link for google"/>

Navigation is very important, persons will use tabs to navigate to different fields and sections of a page.

tabindex.

Suppose you have a login form with two fields one for username and the other for password.

<input title="user name" type="text" tabindex="1"/>
<input title="password" type="password" tabindex="2" />

There should be a difference between heading and sub-heading always use different heading tags.

Use heading levels appropriately (H1 through H6). The user can listen to all the section headings and then decide which part of the page he is interested in if any.

These all are basic things that will help you in achieving accessibility and making your page better.

Accessibility issues with Modal

Modals are required to show some extra details or get any other information from the user, I use them all the time.

Recently, I have encountered a problem with modal i.e. whenever the user opens the modal box the focus remains on the page instead of focussing on the modal. When you click the tab it works in the background, not on the modal.

Generally, I use modal in a separate component that will become a child component, to shift the focus you need to write javascript which will work on rendering of the component and a small change in HTML.

HTML —

Parent component
<template>
    <c-child tabindex="0"></c-child>
</template>Child component
<template> 
   <lightning-input type="text" label="Enter some text"   class="focus"></lightning-input></template>

JAVASCRIPT —

focusOnce = true;renderedCallback(){ let focus = this.template.querySelector('.focus'); if(this.focusOnce && focus){   focus.focus();   this.focusOnce = false; }}

renderedCallBack — because the modal box will be rendered dynamically.

And also, the background behind the modal is not blurred, which is allows users to read the background page details. To stop this use CSS on the section tag.

CSS —

backdrop-filter: blur(5px);

Conclusion —

Making a component or a page in straight forward fashion is an easy thing, but this will focus on a specific audience. You should always try to improve the design and accessibility of a page to target all types of audiences.

These all are small things to help you in increasing accessibility.

Accessibility in LWC

Written by Mukul Mahawariya