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.

The Components feature allows you to identify and track design components with potential accessibility issues after running automated scans. Scanning design components gives you a different way to visualize issues and helps you prioritize remediation tasks. Because every design library is unique, you’ll have to manually add the components that you want scanned.

It’s best to have someone with knowledge on website components, elements, and CSS selectors create components in the platform.

CSS selectors

When you create a component, the CSS selector field tells the platform which component you’d like to identify in a scan. The Components feature allows you to use any CSS selector to identify your components 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.