← Go Back

WCAG (Web Content Accessibility Guidelines)

Definition

WCAG (Web Content Accessibility Guidelines) are a set of internationally recognized standards developed by the Web Accessibility Initiative (WAI) of the World Wide Web Consortium (W3C). These guidelines provide a comprehensive framework for making web content more accessible to people with disabilities, including visual, auditory, physical, speech, cognitive, language, learning, and neurological disabilities.

The guidelines are designed to be technology-agnostic, which means they can be applied to websites, applications, and digital content regardless of the technologies used to create them. WCAG serves as the primary global standard for web accessibility and has been adopted by many governments and organizations worldwide as the basis for their accessibility regulations and policies.

History and Versions

WCAG has evolved over time to address the changing nature of web technologies:

WCAG 1.0 (1999)

The initial release focused on HTML accessibility and introduced the concept of checkpoints.

WCAG 2.0 (2008)

A major revision that introduced the principles-based approach (POUR: Perceivable, Operable, Understandable, Robust) and established the three conformance levels (A, AA, AAA). WCAG 2.0 became an ISO standard (ISO/IEC 40500:2012) and is referenced in many legal requirements worldwide.

WCAG 2.1 (2018)

An extension of WCAG 2.0 that added 17 new success criteria focused on mobile accessibility, people with low vision, and people with cognitive and learning disabilities.

WCAG 2.2 (2023)

The newest version of WCAG, which adds 9 additional success criteria to address accessibility gaps, particularly for people with cognitive disabilities, low vision, and mobile device users.

WCAG 3.0 (In Development)

Currently under development with the working name "Silver," WCAG 3.0 aims to introduce a more flexible approach to accessibility measurement and a wider scope that includes more technologies and user needs.

Core Principles (POUR)

WCAG is organized around four fundamental principles, often referred to by the acronym "POUR":

1. Perceivable

Information and user interface components must be presentable to users in ways they can perceive.

Key concepts include:

  • Text alternatives for non-text content
  • Captions and alternatives for multimedia
  • Content that can be presented in different ways
  • Content that is easier to see and hear

2. Operable

User interface components and navigation must be operable by all users.

Key concepts include:

  • Full keyboard accessibility
  • Sufficient time to read and use content
  • Avoidance of content that could cause seizures
  • Navigable content with multiple ways to find pages
  • Input modalities beyond keyboard

3. Understandable

Information and the operation of the user interface must be understandable.

Key concepts include:

  • Readable and predictable text
  • Content that appears and operates in predictable ways
  • Input assistance to help users avoid and correct mistakes

4. Robust

Content must be robust enough to be reliably interpreted by a wide variety of user agents, including assistive technologies.

Key concepts include:

  • Compatibility with current and future user tools
  • Properly formed markup
  • Accessible names and roles for custom elements

Conformance Levels

WCAG defines three levels of conformance, representing increasing levels of accessibility:

Level A (Minimum)

The most basic level of accessibility. Sites that don't meet Level A criteria have significant barriers that prevent many people with disabilities from using them.

Example criteria:

  • Providing text alternatives for non-text content
  • Not using color alone to convey information
  • Making all functionality available from a keyboard
  • Avoiding content that flashes more than three times per second

The target level for most websites and the level referenced in most laws and policies. Level AA addresses significant barriers while being reasonably achievable for most websites.

Example criteria:

  • Providing captions for all live audio content
  • Ensuring sufficient color contrast (4.5:1 for normal text)
  • Allowing text to be resized up to 200% without loss of content or function
  • Providing multiple ways to find pages
  • Consistent navigation and identification

Level AAA (Enhanced)

The highest level of accessibility, which addresses more subtle barriers. Level AAA may not be achievable for all types of content and is typically targeted for websites serving specialized audiences.

Example criteria:

  • Providing sign language interpretation for all prerecorded audio
  • Higher contrast ratios (7:1 for normal text)
  • No time limits on activities
  • Context-sensitive help for more complex functionality
  • Providing a mechanism to identify pronunciation of words

Success Criteria Structure

Each WCAG success criterion follows a consistent structure:

  1. Number and Level: E.g., "1.1.1 Non-text Content (Level A)"
  2. Title: A brief description of what the criterion addresses
  3. Intent: An explanation of why the criterion is important
  4. Success Criterion Text: The actual requirement that must be met
  5. Sufficient Techniques: Methods that are sufficient to meet the criterion
  6. Advisory Techniques: Additional methods that enhance accessibility
  7. Failures: Common mistakes that cause accessibility barriers

Key Success Criteria Examples

Perceivable

1.1.1 Non-text Content (Level A)

All non-text content (images, icons, etc.) must have a text alternative that serves the equivalent purpose.

Implementation example:

<img src="logo.png" alt="Company Name - Home">

1.3.1 Info and Relationships (Level A)

Information, structure, and relationships conveyed through presentation must be programmatically determined or available in text.

Implementation example:

<label for="email">Email Address:</label>
<input type="email" id="email" name="email">

1.4.3 Contrast (Minimum) (Level AA)

Text and images of text must have a contrast ratio of at least 4.5:1 (3:1 for large text).

Implementation example:

/* Good contrast for normal text */
.text {
  color: #333333; /* Dark gray */
  background-color: #ffffff; /* White */
  /* Contrast ratio: 12.63:1 */
}

Operable

2.1.1 Keyboard (Level A)

All functionality must be operable through a keyboard interface.

Implementation example:

// Custom button with keyboard support
document.getElementById('custom-button').addEventListener('keydown', function(e) {
  if (e.key === 'Enter' || e.key === ' ') {
    e.preventDefault();
    this.click();
  }
});

The purpose of each link can be determined from the link text alone or from the link text together with its programmatically determined context.

Implementation example:

<!-- Good link text -->
<a href="pricing.html">View pricing plans</a>

<!-- Instead of just "Click here" -->

Understandable

3.2.2 On Input (Level A)

Changing the setting of any user interface component does not automatically cause a change of context unless the user has been advised of the behavior before using the component.

Implementation example:

<!-- Good: Warns user before submission -->
<select id="country" onchange="updateRegion()">
  <option value="us">United States</option>
  <option value="ca">Canada</option>
</select>

<!-- Bad: Automatic submission without warning -->
<select id="country" onchange="this.form.submit()">

3.3.1 Error Identification (Level A)

If an input error is automatically detected, the item that is in error is identified and the error is described to the user in text.

Implementation example:

<label for="phone">Phone Number:</label>
<input type="tel" id="phone" aria-describedby="phone-error">
<p id="phone-error" class="error" role="alert" hidden>
  Please enter a valid phone number in the format XXX-XXX-XXXX
</p>

Robust

4.1.2 Name, Role, Value (Level A)

For all user interface components, the name and role can be programmatically determined; states, properties, and values can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies.

Implementation example:

<div role="tablist">
  <button id="tab1" role="tab" aria-selected="true" aria-controls="panel1">
    First Tab
  </button>
  <button id="tab2" role="tab" aria-selected="false" aria-controls="panel2">
    Second Tab
  </button>
</div>
<div id="panel1" role="tabpanel" aria-labelledby="tab1">
  First panel content
</div>
<div id="panel2" role="tabpanel" aria-labelledby="tab2" hidden>
  Second panel content
</div>

Testing and Evaluation

Automated Testing

Automated tools can check for many WCAG violations, but they typically can only identify about 20-30% of potential issues. Popular tools include:

  • Axe DevTools
  • Lighthouse
  • WAVE
  • IBM Equal Access Accessibility Checker
  • SiteImprove Accessibility Checker

Manual Testing

Comprehensive WCAG evaluation requires manual testing by people familiar with:

  • Assistive technologies (screen readers, etc.)
  • Keyboard-only navigation techniques
  • WCAG requirements and interpretations
  • Various disability scenarios

User Testing

The most valuable feedback comes from user testing with people who have disabilities, as they can identify real-world barriers that might be missed in technical evaluations.

Common Implementation Approaches

Technical Approach

  1. Audit and Planning: Identify current compliance level and create a remediation plan
  2. Fix Critical Barriers: Address Level A issues first
  3. Progressive Enhancement: Incrementally improve to Level AA
  4. Documentation: Maintain an accessibility statement and policy
  5. Continuous Integration: Include accessibility checks in development processes

Organizational Approach

  1. Policy Development: Create organizational accessibility standards
  2. Training: Educate teams about WCAG requirements
  3. Defined Roles: Assign responsibility for accessibility to specific team members
  4. Regular Testing: Schedule regular WCAG compliance checks
  5. Procurement Standards: Require WCAG compliance from vendors and third parties

WCAG has been adopted or referenced in accessibility laws and regulations worldwide:

  • United States: Americans with Disabilities Act (ADA) and Section 508 of the Rehabilitation Act
  • European Union: European Accessibility Act and EN 301 549
  • United Kingdom: Equality Act 2010
  • Canada: Accessibility for Ontarians with Disabilities Act (AODA)
  • Australia: Disability Discrimination Act
  • Many other countries: Various accessibility regulations

Most jurisdictions reference WCAG 2.0 or 2.1 Level AA as the required standard for compliance.

Benefits Beyond Accessibility

Implementing WCAG provides benefits beyond accessibility:

  1. Improved SEO: Many WCAG requirements align with search engine optimization best practices
  2. Mobile Optimization: Accessible sites often perform better on mobile devices
  3. Usability for All: Accessibility improvements benefit all users, not just those with disabilities
  4. Future-Proofing: Accessible websites are more adaptable to new technologies and devices
  5. Market Expansion: Accessible websites can reach the approximately 15% of the global population with disabilities

WCAG is part of a broader ecosystem of accessibility standards and initiatives:

  • WAI-ARIA (Accessible Rich Internet Applications): Extends HTML to improve accessibility of dynamic content and advanced user interface controls
  • ATAG (Authoring Tool Accessibility Guidelines): Guidelines for making content authoring tools accessible
  • UAAG (User Agent Accessibility Guidelines): Guidelines for browsers and media players
  • Section 508: U.S. federal regulations for electronic and information technology
  • EN 301 549: European accessibility requirements for ICT products and services

Conclusion

WCAG represents the global standard for web accessibility and provides a comprehensive framework for creating inclusive digital experiences. By following these guidelines, developers and organizations can ensure their web content is accessible to the widest possible audience, including people with disabilities. While achieving WCAG compliance requires ongoing commitment and attention to detail, the benefits—including improved user experience for all users, legal compliance, and expanded reach—make it a worthwhile investment for any digital product.

Related Terms