Adjust a component to meet accessibility standards

Adjust a component to meet the Web Content Accessibility Guidelines (WCAG) 2.1. When you're editing a component in Theme Builder and see a warning symbol, that indicates that the component doesn't comply with the guidelines for color contrast.

始める前に

Role required: ui_builder_admin

For information on granular roles, see Granular admin roles.

このタスクについて

When you're editing a component in Theme Builder, you may encounter a warning symbol (), which indicates that the component doesn't comply with the Web Content Accessibility Guidelines (WCAG) 2.1 for color contrast. The WCAG 2.1 contrast ratio that Theme Builder targets for content and UI variables is 3:1. This ratio determines the contrasts between brighter and darker screen colors and how they relate to the user interface. The first digit shows the level of bright colors, and the second digit shows the relative level of dark colors. The 3:1 threshold provides optimal visibility to visually challenged users. For more information, see the W3C Recommendation site for WCAG 2.1.

The total number of accessibility violations are indicated on the red numbered badge () alongside the Accessibility inspector panel.

手順

1. From the Editor page, access the accessibility violations in one of the two ways listed in the following table.

   Option	Description
   From Accessibility inspector	Select the Accessibility inspector icon to display a list of components with accessibility errors. A red badge displays the number of accessibility issues within your theme. Select the Accessibility warning symbol to view a description of the warning for the component state you want to improve. Select the pencil icon next to the component state that you want to improve. 注: The Component Editor page appears and the configurable style panel displays the editable hooks available for the selected component.
   From the Component styles menu	Select the Editing tab. Select a component that displays the accessibility warning symbol. From the configurable style panel, select the accessibility warning symbol to view a description of the warning. As indicated in the warning message, you can select the pencil icon to improve the contrast issue. 注: The Component Editor page appears and the configurable style panel displays the editable hooks that are available for the selected component.

2. Select the accessibility warning symbol in the Component Editor to obtain more information for fixing the issue.

   

3. Select from the link in the warning to fix the contrast issue.
   The color picker opens.

   注:

   You can select the Hide inaccessible choices slider within the color picker to limit the color choices to those colors identified as accessible, based on Web Content Accessibility Guidelines (WCAG) guidelines.
4. オプション: Select the undo symbol to revert your changes back to the original color, if needed.

   

5. When you complete your changes and the accessibility warning symbol is no longer visible, select Save changes.
   For example, after you select a color that passes the contrast ratio violation, the warning symbol turns green in the color picker.