Use HTML properties on your components to make them accessible to screen readers and other assistive technology. HTML attributes provide information about the UI elements they contain. By reading the properties aloud, accessibility software interprets user interface elements. Below, we will discuss a number of accessibility attribute items such as title attributes and aria attributes.
Use of the title attribute is a crucial component of accessibility. Title attribute values are read aloud to users by screen readers. Always provide a value when consuming a Lightning web component with a title attribute. The lightning-button component, for instance, has a title attribute.
<!– parentWg.html –>
<template>
<lightning-button title=”Log In” label=”Log In” onclick={login}></lightning-button>
</template>
For the screen reader to read out “Log In” to the user, that template generates HTML output that looks like the following.
<!– Generated HTML –>
<lightning-button>
<button title=”Log In”>Log In</button>
</lightning-button>
If you want a screen reader to read a value aloud to the user, use @api to provide a public title attribute while building a Lightning web component. The attribute no longer automatically displays in the HTML output when you take ownership of it by making it a public property. Create a getter and setter for the property, then call the setAttribute() method to pass the value through to the rendered HTML as an attribute (to reflect the property).
// myWgComponent.js
import { LightningElement, api } from ‘lwc’;
export default class MyWgComponent extends LightningElement {
privateTitle;
@api
get title() {
return this.privateTitle;
}
set title(value) {
this.privateTitle = value.toUpperCase();
this.setAttribute(‘title’, this.privateTitle);
}
}
ARIA Attributes
Use ARIA properties to provide more sophisticated accessibility features, such as having a screen reader read out a button’s current state. The screen readers that support the ARIA standard can get more specific information from these characteristics.
Conclusion
In this way, with your HTML template, you can give id attributes ARIA attributes. Screen readers need to be able to connect ARIA properties like aria-describedby, aria-details, and aria-owns with the appropriate elements, therefore id values in a component’s template file must be distinct.
To learn more about attributes and LWC, check out some of my related blogs below!
Additional Resources
- Salesforce Help: Accessibility Standards
- Content Asset Files in Salesforce LWC
Cover Photo by Daniel Ali on Unsplash
