About

If you're new to the concept of web accessibility, start with the "Topics" section of this site. We have an overview page that explains the importance of web accessibility, a page with concepts to help you understand how it is applied, and a page that summarizes the various testing methods.

To learn how to test accessibility, see the "How to test" section of this site. Use the guides and cheat sheets to evaluate just how accessible your site is, right in your browser.

If you just want to test your skills, you'll want to go straight to the "Exercises" section, which contains exercises for the four testing methods: Automated, Visual Inspection, Keyboard, and Screen reader. Each exercise page has a specific number of accessibility errors coded onto it, identified by a heading containing a hint (e.g. "What's wrong with this image?") and a question mark button that - when expanded - identifies the issue, cites the applicable WCAG Success Criteria, and (in some cases) provides code examples that would resolve the issue.

Code snippet plugin

This site relies on the WPCode code snippet plugin, which is available for use only by Network Administrators (aka Super Admins). The plugin manages all code examples, all custom HTML, CSS, and JavaScript necessary for site functionality and aesthetics, and a majority of the non-custom informational content as well (for the sake of consistency). In the WPCode area of the dashboard you’ll find these vital global snippets:

1. a file containing all global custom styling for this site (CUSTOM.css),
2. the script for handling the question mark hint icons (hint-box.js), and
3. the 1.29.0 version of PrismJS, which renders code examples (prism.js and prism.css).

Important note: revision history is currently not being saved by the plugin, so caution is strongly advised when editing code snippets.

Code snippet shortcode implementation

With a few exceptions (listed in the paragraph below), all pages on this site use WPCode shortcodes, and in the the same way. Each snippet of custom code is rendered in a Text Block component by pasting in its shortcode, and the Text Block’s level 2 heading is set to viewable on the front end for hierarchical purposes. For example, the “How to use this site” Text Block component used on this very page uses this format; if it weren’t for the custom icon and styling for the question mark hint icon, a shortcode wouldn’t have been necessary.

And what are the exceptions? The four “Exercise” pages don’t follow the format described above. These pages have their shortcodes pasted into a single Text Block, with the h2 hidden from view in the component settings. Note that each of these shortcodes contains code for the Exercise question mark hint icon and its accompanying hint box.