The Components Editor Accessibility pane

The Components Editor provides automatic accessibility checking of your page content as you work on it. Any issues detected, along with options for fixing them, are detailed in the accessibility pane on the right of the editor.

If you need more editing space, select the Collapse sidebar button to minimise the accessibility pane:

To expand it again, select the Expand sidebar button:

Check a page's accessibility status

Any issues detected while you work on your page are detailed in the Accessibility pane on the right of the editor. The Components Editor uses a "traffic light" system to indicate the presence of detected accessibility issues:

Accessibility issues present

Your page contains errors that you should definitely fix before publishing. This kind of error can cause problems with accessibility technologies like screen readers, for example. Use the Highlight button next to an issue to see where it occurred, along with a summary of the problem.

Potential accessibility issues to address

The page potentially has issues that could cause accessibility problems for users. Use the Highlight button next to an issue to see where it occurred, along with a summary of the problem.

Automated check passed

The automated checker has detected no accessibility issues with your page. Note, however, that it's not possible to automatically detect all issues, so some manual checking is recommended - see our accessibility checklist.

Pause automatic accessibility checks

On larger pages, the frequency of automatic accessibiliy checks may impact performance. To suspend automatic checking, select the Pause live accessibility audits button in the top right corner of the Accessibility pane. Select the Resume live accessibility audits button to resume automatic checking. SiteBuilder will also run a check if you attempt to Publish your page.

Fix detected accessibility issues

1. Scroll down to the error description in the accessibility pane, where you see a summary of the issue and suggested options for fixing it:

   

   Note: Where more than one of the same type of issue is found, there is a separate Highlight button for each instance.

2. Select Highlight below the explanatory text. The editor scrolls to the relevant content on the page and displays a box around it:

   

3. Fix the issue as suggested. The accessibility pane automatically updates as you make changes.

   Tip: Select the Re-check accessibility now button in the top right of the accessibility pane to manually refresh the accessibility status.

4. When you've finished, select Publish.

   Note: if you select Publish on a page with detected accessibility issues, a warning pop-up is displayed, giving you the option to Publish anyway or Go back and fix the issues:

   

Check accessibility on old visual editor pages

1. Browse to the page you want to check for accessibility issues.

2. Go to Edit > Edit centre content or Edit right content, as appropriate:

   

3. In the old visual editor, select the Page audit button in the toolbar:

   

   If you're using the raw editor, select the Accessibility audit button:

   

4. A pop-up appears to inform you about the progress of the check. When it's complete, SiteBuilder displays a report of any issues detected on the page:

   

5. Select Close to close the report. A report icon is displayed on the page next to non-accessible content:

   

6. When you've addressed the issues, re-run the report by selecting the Page audit button, then Refresh in the audit report pop-up:

   

7. Once all accessibility issues have been resolved, select Publish.

Related articles

• Check pages for errors
• Convert pages to the Components Editor