WCAG

What is WCAG? 

The Web Content Accessibility Guidelines (WCAG) are a standard that date back to early days of Sir Tim Berners-Lee's world wide web. In fact, the default styling of HTML elements perhaps familiar to you from a typical craigslist post or an academic research paper are compliant with the highest level of digital accessibility. 

Pictured: An excerpt of "professor-doctor" graphic design, using WCAG-conforming native HTML elements:  

If my website meets WCAG standards does that mean my website has to be ugly? 

No. Please liberate yourself from thinking digital accessibility is an enemy of design. Instead, designers and website owners are invited to enthusiastically meet the challenge of WCAG standards to exercise their considerable creative skills, expand their brand, open up to new solutions.  

What's the difference between WCAG 2.1 versus 2.2? 

W3C's official documentation on the changes (October 2023): https://www.w3.org/WAI/standards-guidelines/wcag/new-in-22/

Within each published version of WCAG are three flavors: A, AA, and AAA. 

Most websites in the U.S. are held to the AA standard, which generally satisfies legal and industry benchmarks and thus limits liability and meets a floor of universal user access. 

In plainer terms, on top of the existing standard the WCAG 2.2 updates ensure that: 

  • keyboard focus state is visible
  • dragging has a keyboard-accessible equivalent
  • "help" has a consistent location
  • user actions can be completed without a quick mind and nimble fingers

1. Visible keyboard focus state exists (AA)

In the '00s and '10s web designers insisted on removing visible keyboard focus to "keep the design clean." For developers forced to capitulate to this design requirement, the CSS :focus-visible pseudo-class can achieve a keyboard-only focus indicator. 

2. Visible keyboard focus state exists AND focused element is entirely visible (AAA)

This ensures that when assistive technology announces a focused element, the element is also visible on the page. The overwhelming majority of blind users have some vision; content announced by screenreaders should be viewable. 

3. Keyboard focus indicator has sufficient size and contrast (AAA)

Focus indicator rings must be at least 2 pixels thick and have a 3:1 color contrast ratio relative to the unfocused pixels. In most case this means a 3:1 color contrast ratio relative to the background color. 

The default blue ring used by most browsers is an excellent example of a conformant indicator: 

4. Dragging must have a simpler pointer alternative (AA)

A good example is a typical file upload dialog window that allows both "Drop files to upload" drag-and-drop target area and "Select Files" button options:

5. Minimum target size (AA)

Buttons and other pointer inputs must be a minimum 24 pixels x 24 pixels. Note that Google Lighthouse mobile scores rely on a 48 pixels x 48 pixels minimum tap target size. 

6. Consistent help location (A)

"Help" and "Chat" options are consistently placed throughout the website, often in the lower right corner of the page. 

7. No redundant user information entry (A)

Don't ask users to enter the same information twice in one session except where essential (e.g. confirming a password). 

8. No solving, recollection, or transcription requirement to log in (AA)

In most cases this is resolved by allowing password managers to enter passwords, and allowing paste operations into the password field. 

9. No object recognition requirement to log in (AAA)

In most cases this is addressed with alternate CAPTCHAs to Google neural net training ("select every photo with a bridge"), like audio CAPTCHAs.