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.

Create components to identify and track accessibility issues in recurring design components. Run a scan after creating a component to more clearly visualize issues and prioritize remediation tasks.

Create components

To create a component:

1. Navigate to the workspace level. 
2. Under Workspace, select Digital assets.
3. Choose the digital asset.
4. Perform one of the following actions: 
   • Select Scans, and then the Components tab -or
   • Under Manage, select Digital asset settings, and then 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.