a11y Standards — WCAG, ARIA, and Section 508 Explained

In this tutorial, you will learn about a11y standards. We cover key concepts, practical examples, and best practices to help you master this topic.

Key Accessibility standards include WCAG (Web Content Accessibility Guidelines) for content, ARIA (Accessible Rich Internet Applications) for custom widgets, and Section 508 for US federal procurement Compliance.

What You'll Learn

You will learn the three major accessibility standards that govern web accessibility: WCAG for content, ARIA for rich internet applications, and Section 508 for government procurement.

Why It Matters

Standards define what accessible means. Without them, every organization would have a different interpretation. Standards give you a clear target to aim for and a way to measure progress.

Real-World Use

DodaTech products are built against WCAG 2.2 AA, use ARIA for custom components like the scan results tree view in Durga Antivirus Pro, and maintain Section 508 compliance documentation for government procurement.

flowchart TD
  A[Accessibility Standards] --> B[WCAG]
  A --> C[ARIA]
  A --> D[Section 508]
  A --> E[EN 301 549]
  B --> F[Web Content Accessibility Guidelines]
  B --> G[POUR principles, 86 success criteria]
  C --> H[Roles, States, Properties]
  C --> I[For custom JavaScript widgets]
  D --> J[US federal procurement]
  D --> K[References WCAG 2.0 AA]
  E --> L[EU standard for ICT]
  E --> M[References WCAG 2.1 AA]

WCAG — Web Content Accessibility Guidelines

WCAG is the international standard for web accessibility, developed by the W3C Web Accessibility Initiative (WAI). The current version is WCAG 2.2, published in October 2023.

WCAG is organized around four principles (POUR) with 13 guidelines and 86 success criteria at three conformance levels.

POUR Principles

• Perceivable — Information and user interface components must be presentable to users in ways they can perceive
• Operable — User interface components and navigation must be operable
• Understandable — Information and the operation of the user interface must be understandable
• Robust — Content must be robust enough to be interpreted reliably by a wide variety of user agents including assistive technologies

ARIA — Accessible Rich Internet Applications

ARIA is a W3C specification that defines a set of HTML attributes for making dynamic web content accessible. ARIA provides roles, states, and properties that assistive technologies can use.

When to Use ARIA

Use ARIA when native HTML semantics are insufficient. For example, custom select boxes, tree views, tab panels, and modals need ARIA to communicate their purpose to screen readers.

First Rule of ARIA

Do not use ARIA if a native HTML element already provides the semantics you need.

<!-- Correct: native button, no ARIA needed -->
<button>Save settings</button>

<!-- Correct: custom widget needs ARIA -->
<div role="tabpanel" aria-labelledby="tab1" id="panel1">
  <p>Security settings content</p>
</div>

Section 508

Section 508 of the Rehabilitation Act requires US federal agencies to procure, develop, maintain, and use electronic and information technology that is accessible. The 2018 refresh incorporated WCAG 2.0 Level AA.

Who Section 508 Applies To

Federal agencies, organizations receiving federal funding, and contractors selling to the government.

Other Standards

EN 301 549

The European standard for ICT accessibility, referenced by the European Accessibility Act. Version 3.2.1 references WCAG 2.1 Level AA.

ISO 9241-171

Ergonomics of human-system interaction — guidance on software accessibility.

// Check which standards apply to your project
function applicableStandards(region, sector) {
  const standards = [];
  if (sector === 'government' || sector === 'contractor') {
    standards.push('Section 508 (US)');
    standards.push('EN 301 549 (EU, if applicable)');
  }
  if (region === 'US') standards.push('ADA Title III');
  if (region === 'EU') standards.push('EN 301 549');
  if (region === 'Canada') standards.push('AODA');
  if (region === 'UK') standards.push('Equality Act 2010');
  standards.push('WCAG 2.2 AA (recommended baseline)');
  return standards;
}

console.log(applicableStandards('US', 'contractor'));

Expected output:

['Section 508 (US)', 'EN 301 549 (EU, if applicable)', 'ADA Title III', 'WCAG 2.2 AA (recommended baseline)']

Common Mistakes

1. Thinking WCAG is the Only Standard

WCAG is the most common, but ARIA, Section 508, and regional laws also apply depending on your context.

2. Using ARIA When Native HTML Works

A button with role button adds noise. Native button elements already expose the button role, keyboard interaction, and focus management.

3. Confusing WCAG Versions

WCAG 2.2 supersedes 2.1 and 2.0. Content conforming to 2.2 also conforms to 2.1. Always target the latest version.

4. Ignoring Section 508 for Non-Government Work

If you sell to companies that sell to the government, they will require Section 508 compliance from you.

5. Treating Standards as a Ceiling

Meeting the standard is the minimum. Great accessibility goes beyond minimum compliance.

6. Not Knowing Which Standards Apply

Research your region, your customers, and your sector. The worst time to discover a standard is during a lawsuit or lost contract.

7. Forgetting That Standards Evolve

WCAG 2.3 is in development. ARIA 1.3 adds new roles. Keep current by monitoring W3C publications.

Practice Questions

1. What are the three main accessibility standards covered in this lesson?

WCAG (Web Content Accessibility Guidelines), ARIA (Accessible Rich Internet Applications), and Section 508 of the Rehabilitation Act.

2. What is the first rule of using ARIA?

Do not use ARIA if a native HTML element already provides the semantics you need.

3. What version of WCAG does Section 508 reference?

WCAG 2.0 Level AA, as updated in the 2018 Section 508 refresh.

4. How many success criteria does WCAG 2.2 have?

86 success criteria across 13 guidelines and three conformance levels.

5. Challenge: Identify which accessibility standards apply to your organization or project. Create a compliance roadmap document.

FAQ

Mini Project

Create a standards compliance checklist for your project. List WCAG 2.2 AA, Section 508, and ARIA requirements. Mark each item as applicable, not applicable, or in progress.

What's Next

Understand the difference between a11y vs Usability to avoid a common point of confusion. Then explore a11y Myths that prevent teams from adopting accessibility.