The Salesforce Lightning Design System (SLDS) is a CSS framework that helps designers and

developers create applications with the look and feel of Lightning Experience. SLDS provides a library

of design tokens, icons, components, utilities, and patterns that can be used to build consistent,

responsive, and accessible user interfaces1. One of the features that SLDS provides for designers and

developers is semantic and accessible component markup. Semantic markup means using HTML

elements that describe the meaning and structure of the content, rather than just the presentation.

For example, using 

 for a main heading, 

 for a paragraph, or  for a button. Semantic

markup helps to improve the readability, maintainability, and SEO of the code2. Accessible markup

means using HTML attributes and techniques that enhance the usability and accessibility of the

content for people with disabilities. For example, using aria-label to provide a descriptive label for an

element, role to indicate the function of an element, or tabindex to control the keyboard focus

order. Accessible markup helps to ensure that the content can be perceived, understood, operated,

and interacted with by people using assistive technologies, such as screen readers, keyboards, or

voice commands3. SLDS provides semantic and accessible markup for its components, which are

reusable UI elements that can be customized and composed to create complex interfaces. SLDS

components follow the Web Content Accessibility Guidelines (WCAG), which are the international

standards for web accessibility4. SLDS components also use the BEM (Block Element Modifier)

naming convention, which is a methodology for creating clear and consistent class names for CSS

selectors5. By using SLDS components, designers and developers can create user interfaces that are

not only visually appealing, but also meaningful and accessible for everyone. Reference: Introduction

to the Salesforce Lightning Design System, Semantic HTML: How to Structure Web Pages, Accessible

Rich Internet Applications (WAI-ARIA), Web Content Accessibility Guidelines (WCAG) Overview, BEM

— Block Element Modifier