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.

The objective of this site is to help you, the developer:

• Understand basic accessibility concepts and why they are important
• Learn how to test for accessibility against internationally-recognized Web Content Accessibility Guidelines (WCAG) standards using:
  • automated in-browser software
  • manual techniques using just a keyboard
  • manual techniques using screen reader software and a keyboard
• Identify and interpret the meaning of common accessibility guideline violations
• Repair WCAG violations

This educational resource is introductory in nature and written with UIC developers in mind. As such, this site is not comprehensive and currently does not have information on ARIA, Mobile accessibility, Document accessibility (e.g. PDF, DOCX), or Testing techniques for Linux or Windows platforms.

Please note, this resource cannot:

• Guarantee any level of expertise or competence in the area of accessibility, nor any level of compliance for a particular site, application, or disability upon application of knowledge gained from its instruction. This site does not quality as a substitute for instruction-based accessibility training.
• Ensure its content covers the latest standards, best practices, platforms, browsers, assistive technologies, devices, or use cases related to web accessibility.
• Vouch for the efficacy of any third-party resources or tools mentioned or recommended.
• Provide solutions for specific accessibility issues.

As is true with most of the existing web, accessibility standards and their many related topics are constantly evolving and adapting to the ever-changing modern technological landscape. Stay up to date! Developers using this resource are encouraged to continue to educate themselves on the subject, consider the user consuming their content, advocate for inclusivity, and seek advice from the community or peers when in doubt. Speaking of community: UIC developers, say hi to us in MS Teams!

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.