Accessibility can seem complicated, but you can make accessible web apps with semantic markup and 18 principle patterns. These patterns form the basis of the Lightning Design System Components.
- Alert Dialog
- Expandable Section
- Live Region
- Modal Dialog
- Non-Modal Dialog
- Toggle Button
- Tree View
What are Accessibility Patterns?
Accessibility patterns are the principle patterns a lot of the Lightning Components are built on. These patterns originate from traditional software applications and have been adapted to web applications in the W3C’s ARIA specifications.
The ARIA specifications follow patterns from traditional software applications because most assistive technology and power users are familiar with their interactions, layout, and naming conventions. So, to make your web based software feel familiar to your users, you should follow these conventions.
What makes these patterns accessible are additional HTML attributes and consistent keyboard interactions on top of semantic HTML markup. The attributes ARIA requires convey the pattern’s identity, operation, relationship to other elements, and state to assistive technologies. This way, users know what is going on, what to do next, and how to do it.
Implementing the Patterns
Our documentation includes:
- The required markup and behavior for each pattern
- Working examples of the patterns for reference when implementing Lightning Components
- References to where the patterns are used in the Design System and traditional software applications
Note: the Lightning Components extend the Accessibility Patterns. All the attributes and keyboard interactions of the Accessibility Pattern should be present in the Lightning Component. Due to the complexity of Lightning Components, however, there may be additional steps necessary to make the component completely accessible, which are documented on the component’s page.