Steps to WCAG 2.1 AA Compliance: The Complete Guide for Those Aiming for Accessibility Level AA

Summary

• The significance and scope of WCAG 2.1 AA
• Key success criteria (contrast, navigation, forms, etc.)
• Implementation points and concrete code samples
• How to use automated and manual testing tools
• Building a continuous improvement PDCA cycle

1. What Is WCAG 2.1 AA? Significance and Scope

Web Content Accessibility Guidelines (WCAG) 2.1 is the international standard for measuring web content accessibility. Level AA is positioned as the core criteria that ensure “a diverse range of users, including people with disabilities, can use the site practically.”

• Why aim for AA?
  • It’s the baseline required by laws and guidelines (e.g., Japan’s Act for Eliminating Discrimination against Persons with Disabilities, EU’s European Accessibility Act).
  • From a business perspective, it helps reduce user churn and improve SEO.
• Scope of AA
  • Text contrast, distinguishable links
  • Full functionality via keyboard navigation
  • Display of clear error messages during form input
  • Text alternatives for video and audio content

2. Main AA Success Criteria and Key Points

2.1 Contrast Ratio (1.4.3 Contrast (Minimum))

• Criterion: At least 4.5:1 for normal text; at least 3:1 for large text (18pt or larger, or bold 14pt or larger).
• How to check: Use browser extensions like “Contrast Checker” or Figma plugins for automatic calculation.

2.2 Keyboard Accessibility (2.1.1 Keyboard)

• Criterion: All functionality must be operable via the Tab key and other keyboard methods.
• Key point: Make focus visible (explicit :focus styles).

2.3 Landmarks and Navigation (1.3.1 Info and Relationships / 2.4.1 Bypass Blocks)

• Criterion: Structure content with headings (<h1>–<h6>), clarify roles with ARIA landmarks.
• Key point: Use <nav>, <main>, <aside>, and <footer> appropriately.

2.4 Forms and Error Handling (3.3.1 Error Identification / 3.3.3 Error Suggestion)

• Criterion: Provide clear instructions and suggestions for correction on errors.
• Key point: Use aria-describedby and role="alert" for screen reader compatibility.

3. Implementation Points and Sample Code

3.1 Contrast-Friendly CSS

body {
  background-color: #FFFFFF;
  color: #333333; /* Contrast ratio 14:1 */
}
a {
  color: #0066CC; /* Link accent color with at least 4.5:1 */
}
button {
  background-color: #0055AA;
  color: #FFFFFF; /* Button text ratio 5.8:1 */
}

3.2 Visible Keyboard Focus

:focus {
  outline: 3px solid #FFA500; /* Highly visible orange */
  outline-offset: 2px;
}

3.3 ARIA Implementation in Forms

<label for="email">Email Address <span aria-hidden="true">*Required</span></label>
<input
  type="email"
  id="email"
  name="email"
  required
  aria-required="true"
  aria-describedby="email-error"
/>
<span id="email-error" role="alert" style="color:#D9534F;">
  Please enter a valid email address.
</span>

4. Testing Methods and Tool Usage

1. Automated Testing

   • axe-core (Chrome extension)
   • Lighthouse (built into Chrome DevTools)

2. Manual Testing

   • Keyboard navigation check: Use Tab/Shift+Tab to traverse all elements
   • Screen reader test: Verify reading order with NVDA (Windows) or VoiceOver (Mac)

3. Usability Testing

   • Conduct participatory tests with users with disabilities to uncover real issues

5. Continuous Improvement and the PDCA Cycle

1. Plan
   • Set accessibility policies and goals (e.g., 95% pass rate in automated tests before release).
2. Do
   • Integrate accessibility checks into the development process (add to code review checklist).
3. Check
   • Perform regular internal audits and collect user feedback.
4. Act
   • Add newly discovered issues to the backlog, prioritize, and resolve.

By cycling through this process, you can maintain AA-level quality even after release.

6. Who Benefits? Specific Advantages

• Frontend Engineers: Follow implementation guidelines to reduce bugs and improve maintainability.
• UI/UX Designers: Integrate AA criteria into design systems to build reusable components.
• Web Directors: Define clear goals in requirements gathering to reduce development delays.
• QA/Testers: Use checklists to increase testing efficiency and reliability of quality assurance.
• End Users (people with disabilities, seniors): Enjoy a comfortable and accessible web experience.

7. Conclusion: AA Compliance as the Foundation of an Inclusive Web

WCAG 2.1 AA compliance is not just a technical requirement but a common language for realizing “a web open to everyone.”

• Implement each criterion—contrast, keyboard accessibility, forms—reliably.
• Combine automated and manual tests to ensure quality.
• Use the PDCA cycle for ongoing improvements.

We hope this guide helps you achieve AA level in your project and build a user-friendly website for a diverse audience.