Create a component

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.

Creating components allows you to identify and track design components with potential accessibility issues. Running a 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. Go to Digital assets.
2. Choose the digital asset.
3. Select Scans.
4. Choose Components.
   
   
5. Select Add component.
   
   
6. Enter the Component name.
7. Enter the CSS selector. Learn more about CSS selector syntax. Note that you can't use the "|" (vertical bar), which is not supported as a valid selector. Here are some examples of valid selectors:
   • .primary-button
   • [class=”carousel”]
   • [component-name~=”card”]
8. 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.
9. 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.
10. 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.