Salesforce is committed to building performant and accessible base components. Base components that provide UI elements contain accessible HTML markup from Lightning Design System (SLDS). They follow W3C standard and best practices for interactive components, including keyboard behavior and management of ARIA roles and properties. Using base components provide a great starting point for building your own interactive and accessible components.
Base components implement SLDS blueprint markup that follow the W3C ARIA Authoring Practices Guide (APG) to provide standard accessibility requirements. By using ARIA attributes when necessary, base components ensure a consistent experience across devices. Following user interaction, these components also update their ARIA attributes automatically to reflect the new state. For example, the lightning-accordion base component toggles between aria-hidden="true" and aria-hidden="false" depending whether an accordion section is hidden or displayed. The lightning-input base component appends the aria-describedby attribute to the input element when a validation error is displayed.
Base components also use ARIA properties and roles to make content accessible to assisistive technologies. For example, the lightning-breadcrumbs base component uses aria-label="Breadcrumbs" and role="navigation" to provide semantic meaning to the content. Since this component doesn't use the ul and li HTML elements, the component uses role="list" and role="listitem" to ensure that the individual links are presented as an item within the larger list context.
With base components, you can also use ARIA attributes to build your own accessible user interfaces. For more information about the ARIA attributes available for each component, see the Component Reference.
Base components conform to SLDS color guidelines, which meet or exceed the Web Content Accessibility Guidelines (WCAG) 2.1 AA standards for contrast. Based on SLDS blueprints, base components such as lightning-button provide variants that change the color of the component based on its purpose. For example, use the success variant for a green background color or the error variant for a red background color. In cases where a variant isn't available, you can also use SLDS styling hooks to customize the colors across base components consistently.
Base components provide an accessible implementation of input fields and forms. Input components include lightning-input, lightning-combobox, lightning-select, and more. These components follow the WCAG guidelines, such as for predictable input (3.2.2) and input assistance (3.3).
By using the input components and form-based components, you get these accessible requirements.
<label> element and other mechanisms such as WAI-ARIA and title attribute to identify each form control<fieldset> and <legend> elements to group and associate related form controls.For images and icons, base components provide attributes for your text-based alternatives, which follow the WCAG 1.1.1 guideline for non-text content. For example, lightning-avatar and lightning-icon include an alternative-text attribute for your description. The lightning-avatar base component passes down this description to the alt and title attributes on the img element. To visually hide the description, the lightning-icon base component renders the description using the slds-assistive-text SLDS class.
See Also
The Summer '25 guide is now live
j
Search Tips: