Engineering WCAG 2.2 AA Compliance: A Technical Retrospective

WCAG: Making the internet more accessible

Centro Labs recently transitioned their LocalMate application to meet WCAG 2.2 Level AA standards. This engineering effort addresses the needs of approximately 15-20% of the population who navigate the web with disabilities through rigorous adherence to international standards.

Why This Matters

Designers and developers often build applications in controlled environments using high-end hardware and perfect lighting, which masks accessibility failures. In reality, failing to meet WCAG AA standards creates products that divide users, especially considering that a significant portion of the population experiences situational impairments, such as using devices in high-glare environments or with physical constraints like a sprained wrist.

Key Insights

• Body text must maintain a contrast ratio of at least 4.5:1 against its background to satisfy Success Criterion 1.4.3.
• Success Criterion 1.4.10 requires that websites remain usable at 400% zoom on a 1280px viewport without horizontal scrolling.
• Icon-only buttons require explicit aria-label attributes to provide semantic context for assistive technologies.
• Keyboard traps, where a tab-cycle becomes stuck in a loop, represent a critical failure that forces impaired users to refresh the page.
• AI Agents and tools like axe DevTools can automate the detection and correction of approximately 90% of common accessibility mistakes.

Working Examples

Example of providing accessible names for icon buttons and maintaining visible focus states.

<button aria-label="Send message">
  <svg><!-- Icon --></svg>
</button>

<style>
  /* Avoid outline: none to comply with 2.4.7 */
  button:focus {
    outline: 2px solid blue;
    outline-offset: 2px;
  }
</style>

Practical Applications

• Use Case: LocalMate removed minimum widths on input boxes and repositioned navigation to support 400% zoom without horizontal overflow. Pitfall: Using fixed-width containers that cause content to disappear or require horizontal scrolling at high zoom levels.
• Use Case: Implementing axe DevTools during local development to catch contrast and semantic errors before production. Pitfall: Removing default browser focus outlines (outline: none) which creates a keyboard trap and renders the site unusable for non-mouse users.

References:

• https://dev.to/aneshodza/wcag-making-the-internet-more-accessible-3484