Accessibility Auditor

Last Updated: 17 Dec 2015

The Edit+ for Squiz Matrix Accessibility Auditor tool runs an audit against the content of assets within your site, evaluating and detailing any found or potential accessibility issues, in accordance with WCAG 2.0 standards.

The Accessibility Auditor's comprehensive reporting of issues allows you to promptly address and resolve errors and warnings, providing accessible content for your users -- as defined by the World Wide Web Consortium (W3C)'s Web Content Accessibility Guidelines (WCAG) -- and to cater to a wider range of people with disabilities.

Accessing the Accessibility Auditor

5-0-0_open-accessibility-auditor.png
The Show Accessibility Auditor button

When in Preview Mode, the Accessibility Auditor will evaluate the accessibility of the content of the currently viewed page. To access the Accessibility Auditor, click on the Show Accessibility Auditor button, located to the right of the Mode Switcher in the Edit+ for Squiz Matrix tool bar, as shown in the figure to the right.

Clicking this button will display the Accessibility Auditor pop-up, which will evaluate the content of the page and display a summary outlining any issues discovered, as shown in the figure below.

5-0-0_accessibility-auditor-preview.png
The Accessibility Auditor in Preview Mode

When in Edit Mode, the Accessibility Auditor can be accessed via the Viper Content Editor to evaluate the accessibility of the content of a specific WYSIWYG Content Container. To access the Accessibility Auditor, click on the Accessibility Auditor icon; the Accessibility Auditor pop-up will appear, displaying a summary of the issues discovered, as shown in the figure below.

The Accessibility Auditor
The Accessibility Auditor in Edit Mode

Please note that the Accessibility Auditor, when used within Edit Mode, will only audit the content of the selected Content Container and not all content on the asset.

The Accessibility Report

When the Accessibility Auditor is first accessed, it will evaluate the content of your asset and provide a report on the following three categories of issues:

  • Errors: these issues must be addressed to meet the accessibility standards.
  • Warnings: these issues should be addressed to meet the accessibility standards (best practice).
  • Notices: these issues require manual checking and may need to be addressed to meet the accessibility standards.

You can modify the standard against which accessibility is audited upon in the Standards field, selecting either AAA or AAA WCAG 2.0 standards. By default, the Accessibility Auditor will initially check against WCAG2AA standards.

For more information on the standards that the Accessibility Auditor checks against, refer to the HTML CodeSniffer site.

Clicking the View Report button will provide an report of the issues found within the audited content, as shown in the figure below. You can specify which categories of issues to include in the accessibility report using the toggles available, below each issue notice. So, for example, you could choose to include only Errors within the accessibility report, or you could choose to include both Errors and Warnings.

The Accessibility Report list
The accessibility report list

The accessibility report will be displayed as a list of found accessibility issues, identified by their category colour.

Clicking on an issue will provide a report of the individual issue, outlining the Principle and Technique that the issue addresses within the WCAG 2.0 standards, as shown in the figure below. Clicking on these links will direct you to the appropriate WCAG 2.0 documentation.

The Principle and Technique accessibility links
The Principle and Technique accessibility links

When using the Accessibility Auditor tool within Preview Mode, each individual issue report will include a Code Snippet section displaying the section of code that the issue applies to, as shown in the figure below.

The Code Snippet section of the Accessibility Auditor
The Code Snippet section of the Accessibility Auditor

Clicking the Point to Element button in this section will display an icon pointing to the relevant element within the content of the page. Please note that in some cases, the Point to Element button will not be available as the relevant element may be hidden on the page.

Resolving and Dismissing Issues

When auditing the accessibility of content within Edit Mode, each issue report will include a Resolution section detailing the steps to resolving the relevant issue, as shown in the figure below.

The Resolution section of the Accessibility Auditor
The Resolution section of the Accessibility Auditor

Clicking the Point to Element button in this section will display an icon pointing to the relevant element within the content of the Content Container. Please note that, in some cases, the Point to Element button will not be available as the relevant element may be hidden on the container.

The Show in Source View button will display the Source Editor of the Content Container, highlighting the section of code that the issue applies to and allowing you to edit and apply changes to the code.

The Refresh Issue button will refresh the issue in the Accessibility Auditor. This is useful if you have made changes to fix a particular issue and want to check whether it has been resolved. If the issue has been resolved, the issue will be marked with a tick; if it has not, an error message will be displayed, as shown in the figure below.

An resolved issue and an unresolved issue
A resolved issue (left) and an unresolved issue (right) on the Accessibility Auditor

In some cases, additional fields may be available allowing you to resolve issues within the Accessibility Auditor, for example, adding a summary for a table, as shown in the figure below.

Additional fields in the Resolution section
Additional fields in the Resolution section

Use the available fields to address the issue and click the Apply Changes button. If the issue has been resolved, it will be marked with a tick.

You can dismiss individual Warning and Notice issues by clicking the Dismiss button at the bottom of the Accessibility Auditor, as shown in the figure below.

The Dismiss button
The Dismiss button

Please note that as Error issues require mandatory resolution, in accordance with WCAG 2.0 standards, these issues cannot be dismissed.


Previous Chapter Next Chapter