Post

wcag aa 2 standards

Posted
By Daniel Florido
2 min read

Ideally, web accessibility would be considered a part of the build rather than a feature. As work developers we could build accessibility into templates so it’s there to begin with rather than an afterthought. Here’s the proof set of guidelines we going to build into our temp late so that Websites are accessible to everyone as they should be.

WCAG (Web Content Accessibility Guidelines)

WCAG is structured under four principles, known as POUR:

  • Perceivable
  • Operable
  • Understandable
  • Robust

Level AA conformance includes all A and AA criteria, which address the following:

Text Alternatives for Non-Text Content

  • Alt text on images

Captions for Multimedia

  • Captions on videos so people can read without sound.

Color Contrast

  • Minimum contrast ratio of 4.5:1 for text

Keyboard Navigability

All Interactive Elements Must Be Reachable via Keyboard

This includes:

  • Links (<a>)
  • Buttons
  • Form inputs
  • Modal dialogs
  • Dropdowns
  • Tabs
  • Menus
  • Accordions

Default Keys:

  • Tab: Move focus forward
  • Shift + Tab: Move focus backward
  • Enter / Space: Activate selected item
  • Arrow Keys: Navigate within menus, sliders, tabs (if implemented)

Focus Indicators

  • A visible indicator must show when an element is focused via keyboard. Clearly highlight the selected element on screen, this would mean placing a prominent border around the selected element.

Consistent Navigation

Consistent navigation means that recurring navigation components (like menus, links, search bars, footers, and sidebars) appear in the same relative order and location throughout a website or application.

This allows users—especially those with disabilities—to learn and rely on predictable patterns when interacting with content.

Error Identification and Suggestions

Ensure that users—especially those with disabilities—can:

  • Understand
  • Locate
  • Correct errors

…when they interact with forms or input fields.

Responsive/Resizable Text and Layout

Web content must remain readable and usable when:

  • Users zoom up to 200% in their browsers (e.g., Ctrl/Cmd + or -)
  • Font sizes are increased via custom stylesheets or OS/browser settings
  • Viewport sizes change (desktop ↔ tablet ↔ mobile)

The layout should adapt, not break, under these conditions.

Remediation (Code & Content)

Key changes may include:

  • HTML/CSS: Ensure semantic tags (e.g., <nav>, <header>, <main>) are used properly. Add ARIA attributes as needed.
  • Forms: Use <label> elements and aria-describedby to help screen readers.
  • Media: Add captions, transcripts, and audio descriptions.
  • Navigation: Ensure tab order and focus visibility are logical and clear.
  • Design: Adjust color schemes to meet contrast minimums; ensure readability and responsiveness.
  • JavaScript & Widgets: Make dynamic elements accessible (ARIA roles, keyboard handlers, focus management).
  • PDFs & Documents: Ensure linked files are accessible or offer accessible alternatives.

Automated Testing

Tools like:

  • Axe DevTools
  • WAVE by WebAIM
  • Lighthouse (built into Chrome)

…can quickly identify common issues, such as missing alt text or low contrast.

b. Manual Testing

Includes:

  • Keyboard-only navigation testing
  • Screen reader testing (e.g., NVDA, JAWS, VoiceOver)
  • Zoom and text-resize testing
  • Color contrast checks

c. Content Review

Audit all:

  • Text
  • Images
  • Videos
  • Forms
  • Interactive content

…for clarity, accessibility, and proper semantic markup.

Level AA is typically the standard referenced in most accessibility legislation, such as:

  • ADA (Americans with Disabilities Act, U.S.)
  • DDA (Disability Discrimination Act, Australia)
This post is licensed under CC BY 4.0 by the author.