Skip to main content Skip to secondary navigation

How to use the Accessibility Checkers

Main content start

Stanford Web Services (SWS) is committed to providing a Stanford Sites environment that enables site owners to build and manage websites that are accessible to everyone and adhere to Stanford's online accessibility policy.

Stanford Sites provides two accessibility checkers

  1. CKEditor Accessibility Checker - for checking accessibility within the WYSIWYG editor
  2. Editora11y Accessibility Checker - for checking accessibility after saving the page

Both checkers identify errors that need review, as well as items that should be manually checked to determine if they meet accessibility standards.

These tools are slightly different and will identify different issues so using them both will help you catch a variety of accessibility issues.

CKEditor Accessibility Checker

The CKEditor Accessibility Checker can be used to review content in the Text Area Paragraph WYSIWYG editor before you save the page so you can immediately resolve accessibility issues.

To check for accessibility issues, on the right side of the WYSIWYG editor toolbar, click the Web Accessibility icon.

CKEditor Accessibility Checker icon

 

The checker’s dialog box shows the number of accessibility issues found. You can scroll through the issues to learn more about them. Click the Ignore button to skip issues. Use the X to close the dialog box.

CKEditor Accessibility Checker dialog box

A green Quick fix button will appear for some issues. See the example below. The accessibility checker flagged the table because it was missing headers. Clicking the Quick fix button added headers to the table and resolved the accessibility issue.

Editora11y Accessibility Checker dialog box

Editora11y Accessibility Checker

The Editora11y Accessibility Checker can be used to review content after a page has been saved. This checker will only run when a user with access to edit the content is logged in and viewing the page. The page does not have to be published. The checker will not display for visitors to the site who are not logged in.

When you’re logged into a site and have access to edit a page, you will see the Editora11y Web Accessibility icon in the lower right corner of your browser.

Editora11y Accessibility Checker icon

 

If you see an orange or red icon in the lower right corner of your browser, that means the checker has flagged potential accessibility issues on your page.

Editora11y Accessibility Checker alert icon

 

The red alert icon displays a count of the number of accessibility issues found.

To view the issues, click the icon then click Show.

The Editora11y dialog box allows you to view each issue by clicking Show next >.

If there are multiple issues, you can scroll through each of them and see more information

You can also see each issue highlighted and numbered on the page itself. Click the alert symbol or the question mark on each issue to view detailed information about it and how to fix it.

Additional Resources