How to use the Accessibility Checkers
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
- CKEditor Accessibility Checker - for checking accessibility within the WYSIWYG editor
- 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.
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.
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
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.
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.
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.