Introduction to WCAG

Introduction to WCAG


Like most governments, we follow the Web Content Accessibility Guidelines (WCAG). WCAG rules are rated as either level A (basic), AA (intermediate), or AAA (advanced).

Everything on City of Chicago’s websites must reach AA level. We aim for AAA when we can, but it’s not always possible because of strict requirements.

We’re not going to go through every single rule; check out the WCAG reference for specific requirements and help. At the top level, their categories form the acronym POUR: Perceivable, Operable, Understandable, and Robust.


Perceivable

Users must be able to see or hear all content, and non-text content needs a text alternative.

This means images need alt text, videos need captions, and audio needs transcripts, as a start.

It also means text needs to be easy to read against the background color. If you're using colors other than black and white, use a color contrast checker tool to make sure it's okay.

 

Operable

Users must be able to interact with all elements necessary to operate the website.

For a lot of users, that means mouse and touch interactions work okay, with big enough buttons and links. Some users will prefer different input methods, so make sure to test pages with your keyboard. You should be able to get to every link, button, form field, and menu on your page with the tab and arrow keys. You can interact using the enter key and spacebar.

 

Understandable

Site design and layout must be consistent, and language must be simple.

Make sure it's easy for users to navigate and find what they're looking for. Follow patterns and organize your content in a logical way.

Edit your text before publishing and use a reading level tool to make sure it's good for a broad audience. We generally want to aim for eighth grade or lower.

 

Robust

Site and content must follow web standards and maximize compatibility with different browsers, devices, and assistive technologies.

Make sure to test pages on mobile as well as desktop, and try a few different browsers to make sure everything looks right and works.