Accessibility

Accessibility Patterns Overview

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 and are a companion to the accessibility documentation available on each component page.

The Patterns

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.