WCAG Level A Requirements

WCAG Level A: Essential Accessibility Requirements

Level A represents the minimum level of accessibility conformance. These 30 success criteria address the most fundamental barriers that would prevent users with disabilities from accessing content at all.

Why Level A Matters

Level A criteria are non-negotiable. Failing to meet these requirements means:

• Screen reader users may not be able to understand your content
• Keyboard users may get trapped or unable to navigate
• Users with seizure disorders could experience medical emergencies
• Assistive technology may not be able to interpret your pages

Perceivable Requirements (Level A)

1.1.1 Non-text Content

All non-text content must have a text alternative that serves the equivalent purpose.

Applies to:

• Images
• Icons
• Charts and graphs
• CAPTCHAs
• Audio and video

Implementation:

<!-- Informative image -->
<img src="ceo.jpg" alt="Sarah Chen, CEO of AccessibilityMonitor">

<!-- Functional image (icon button) -->
<button aria-label="Search">
  <svg aria-hidden="true">...</svg>
</button>

<!-- Decorative image -->
<img src="decorative-line.png" alt="" role="presentation">

<!-- Complex image -->
<figure>
  <img src="sales-chart.png" alt="Sales trends chart, details in table below">
  <figcaption>
    <table><!-- Data table with same info --></table>
  </figcaption>
</figure>

1.2.1 Audio-only and Video-only (Prerecorded)

Prerecorded audio-only content needs a text transcript. Prerecorded video-only content needs either a transcript or audio description.

<!-- Audio with transcript -->
<audio controls>
  <source src="podcast.mp3" type="audio/mpeg">
</audio>
<details>
  <summary>Transcript</summary>
  <p>Welcome to the AccessibilityMonitor podcast...</p>
</details>

1.2.2 Captions (Prerecorded)

All prerecorded audio content in synchronized media must have captions.

1.2.3 Audio Description or Media Alternative

Prerecorded video must have audio description or a full text alternative.

1.3.1 Info and Relationships

Information, structure, and relationships conveyed visually must be programmatically determinable.

Common Issues:

• Using <br> to create visual lists instead of <ul>
• Using bold text for headings instead of <h1>-<h6>
• Creating data tables without proper <th> elements

Correct Implementation:

<!-- Proper heading structure -->
<h1>Main Title</h1>
<h2>Section Title</h2>
<h3>Subsection Title</h3>

<!-- Proper data table -->
<table>
  <caption>Monthly Sales Data</caption>
  <thead>
    <tr>
      <th scope="col">Month</th>
      <th scope="col">Revenue</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">January</th>
      <td>$10,000</td>
    </tr>
  </tbody>
</table>

<!-- Proper form labeling -->
<label for="email">Email Address</label>
<input type="email" id="email" name="email">

1.3.2 Meaningful Sequence

The reading sequence must be programmatically determinable when it affects meaning.

1.3.3 Sensory Characteristics

Instructions must not rely solely on sensory characteristics like shape, color, size, or location.

Incorrect: "Click the green button" or "See the sidebar on the right"

Correct: "Click the Submit button (green, on the right)" or "See the Related Articles section in the sidebar"

1.4.1 Use of Color

Color must not be the only means of conveying information.

<!-- Bad: Color only indicates error -->
<input type="email" style="border-color: red">

<!-- Good: Color plus icon and text -->
<input type="email" aria-invalid="true" aria-describedby="email-error">
<span id="email-error">
  <svg aria-hidden="true"><!-- error icon --></svg>
  Please enter a valid email address
</span>

1.4.2 Audio Control

If audio plays automatically for more than 3 seconds, users must be able to pause, stop, or control volume.

Operable Requirements (Level A)

2.1.1 Keyboard

All functionality must be operable through a keyboard interface.

// Ensure custom interactive elements are keyboard accessible
element.addEventListener('keydown', (e) => {
  if (e.key === 'Enter' || e.key === ' ') {
    e.preventDefault();
    handleActivation();
  }
});

2.1.2 No Keyboard Trap

If keyboard focus can be moved to a component, focus must be able to be moved away using only the keyboard.

// Modal must allow escape to close
modal.addEventListener('keydown', (e) => {
  if (e.key === 'Escape') {
    closeModal();
    returnFocusToPreviousElement();
  }
});

2.1.4 Character Key Shortcuts

If single character key shortcuts exist, they must be able to be turned off, remapped, or only active on focus.

2.2.1 Timing Adjustable

If there's a time limit, users must be able to turn it off, adjust it, or extend it.

2.2.2 Pause, Stop, Hide

Moving, blinking, scrolling, or auto-updating content must be able to be paused, stopped, or hidden.

2.3.1 Three Flashes or Below Threshold

Content must not flash more than three times per second.

2.4.1 Bypass Blocks

A mechanism must be available to bypass repeated blocks of content.

<!-- Skip link -->
<body>
  <a href="#main" class="skip-link">Skip to main content</a>
  <header><!-- Navigation --></header>
  <main id="main"><!-- Main content --></main>
</body>

<style>
.skip-link {
  position: absolute;
  left: -9999px;
}
.skip-link:focus {
  position: static;
}
</style>

2.4.2 Page Titled

Web pages must have descriptive titles.

<title>Contact Us - AccessibilityMonitor</title>

2.4.3 Focus Order

Focus order must preserve meaning and operability.

2.4.4 Link Purpose (In Context)

The purpose of each link must be determinable from the link text or its context.

<!-- Bad -->
<a href="/article-123">Read more</a>

<!-- Good -->
<a href="/article-123">Read more about WCAG compliance</a>

<!-- Also acceptable: context provides purpose -->
<h2>WCAG Compliance Guide</h2>
<p>Learn about accessibility requirements. <a href="/article-123">Read more</a></p>

Understandable Requirements (Level A)

3.1.1 Language of Page

The default human language of each page must be programmatically determinable.

<html lang="en">

3.2.1 On Focus

Components must not initiate a change of context when they receive focus.

3.2.2 On Input

Changing a form control setting must not automatically cause a change of context unless the user is warned.

Robust Requirements (Level A)

4.1.1 Parsing

In HTML, elements must have complete start and end tags, be nested correctly, not contain duplicate attributes, and IDs must be unique.

4.1.2 Name, Role, Value

All user interface components must have accessible names and roles, and states/properties must be programmatically determinable.

<!-- Accessible custom checkbox -->
<div role="checkbox" 
     aria-checked="false" 
     aria-labelledby="checkbox-label"
     tabindex="0">
</div>
<span id="checkbox-label">Subscribe to newsletter</span>