Skip to main content Skip to navigation

Check accessibility of page content

As a public institution, the University has a legal obligation to make its web content accessible. SiteBuilder offers tools in both the Components Editor and the old visual editor that help you check the accessibility of your content.

At the top of the Current page tab, SiteBuilder displays a banner alerting you to any automatically-detected accessibility issues:

The 'Current page' tab, displaying an accessibility banner indicating issues to resolve

Important: It's not possible to automatically detect all issues, so some manual checking is also necessary, as the University is required to comply with accessibility legislation.

For more information on creating accessible websites, see our accessibility checklist.

In this article:

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:

The full-size Components Editor accessibility pane, with the 'Collapse sidebar' button highlighted

To expand it again, select the Expand sidebar button:

The minimised Components Editor accessibility pane, with the 'Expand sidebar' button highlighted

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:

The accessibility check for a page with a serious issue

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.

The accessibility check for a page with some possible issues

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.

The accessibility check for a page with no detected issues

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.

Important: It's not possible to automatically detect all issues, so some manual checking is also necessary, as the University is required to comply with accessibility legislation.

For more information on creating accessible websites, see our accessibility guidance and 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:

    An accessibility warning description, with the 'Highlight' button highlighted

    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:

    A highlighted error in the Components Editor

  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:

    The 'Accessibility issues' alert pop-up

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:

    The SiteBuilder 'Edit' menu, with the options to 'Edit centre content' and 'Edit right content' highlighted
  3. In the old visual editor, select the Page audit button in the toolbar:

    The old visual editor toolbar, with the 'Page audit' button highlighted

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

    The raw editor toolbar, with the 'Page audit' button highlighted

  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:

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

    An audit report icon displayed next to inaccessible 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:

    The 'Refresh' banner in a Page audit pop-up
  7. Once all accessibility issues have been resolved, select Publish.

Related articles