Create a component

Who can use this feature?

• Members of each user group.
• Available for Accelerate, Enterprise, and customers who joined Level Access before February 20th, 2023.

Creating components allows you to identify and track design components with potential accessibility issues. Running an automated scan after creating a component gives you a different way to visualize issues and helps you prioritize remediation tasks.

Create components

To create a component:

1. Select Settings.
2. Choose Components.
3. Select Create component.
4. Enter the Component name.
5. Enter the CSS selector. Learn more about CSS selector syntax. Here are some examples:
   • .primary-button
   • [class=”carousel”]
   • [component-name~=”card”]
6. Alternatively, to get the CSS selector:
   1. Right-click the web page and select Inspect. The console will open.
   2. Select the code until the chosen component on the webpage is highlighted.
   3. Right-click the code and select Copy > Copy selector.
   4. In the Platform, paste the code in the CSS selector field.
7. Optional:
   1. Enter a description of the component.
   2. Upload an image of the component. It will appear as a thumbnail in the Components table and the Components report in the scan results.
8. Select Create.

CSS selector reference table

The table below outlines CSS selector attributes and corresponding symbols. For more detailed information on CSS selectors, visit CSS Attribute Selector.