Components overview

Who can use this feature?

• Members of each user group.
• Available for Accelerate, Enterprise, and customers who were onboarded to the Level Access Platform before February 20th, 2023.

On this page:

• What's the Components feature? 
• CSS selectors
• Attributes

What's the Components feature? 

Pinpoint and track accessibility issues in recurring design components! Match components to pages you are scanning in Monitoring.

The Components feature allows you to identify and track potential accessibility issues after automated scanning. It offers a new way to visualize problems and prioritize fixes. Because each design library is unique, you must manually add the components to be scanned.

Note: Before you create components in the platform, learn more about website components, elements, and CSS selectors.

CSS selectors

When you create a component, the CSS selector field tells the platform which component you’d like to identify in a scan. 

To identify your components, you can use any CSS selector as long as the syntax is valid. As a good practice, use attributes that identify components at the highest level possible. This allows you to identify more issues and scale the impact of your issue remediation.

Attributes

To maximize the impact of the issues you fix, you want to use attributes that can identify components  in as many pages as possible. The Components feature allows you to use attribute values as long as you follow the appropriate CSS selector syntax. For example, if you use the attribute "class" to identify all of your components, your CSS selector may be defined using this attribute.

Examples: [class=“primary-button"] or [class=“hero-carousel”].

You can also use custom attributes to identify your components:

Examples: [component-name=“dropdown-main’] or [component-id=“custom-card”].

Next, learn about creating a component.