Web Accessibility: WCAG 2.2 for Beginners

Approximately 61 million adults in the United States live with a disability. Add millions more with vision impairments, motor limitations, or temporary disabilities. Accessible websites aren’t a nice-to-have – they’re a necessity and in many cases legally required.

In this article, I explain the WCAG 2.2 guidelines in plain terms, show what accessibility laws mean for you, and provide practical tips for implementation.

What Does Web Accessibility Mean?

Accessibility (often abbreviated as a11y) means that websites and web applications can be used by everyone – regardless of physical or cognitive limitations.

Who Benefits from Accessibility?

Group	Examples	Barrier
Visually impaired	Blindness, color blindness, low vision	Images without alt text, poor contrast
Hearing impaired	Deaf, hard of hearing	Videos without captions
Motor impaired	Tremor, paralysis	Small click targets, no keyboard navigation
Cognitively impaired	Dyslexia, ADHD	Complex language, cluttered design
Temporarily impaired	Broken arm, bright sunlight	All of the above

Important: Accessibility helps everyone. Captions help people in noisy environments. Good contrast helps in bright sunlight. Simple language improves general comprehension.

WCAG 2.2: The International Standard

The Web Content Accessibility Guidelines (WCAG) are the international standard for web accessibility. Version 2.2 was published in October 2023 and is the current reference.

The Four Principles (POUR)

WCAG is based on four principles:

1. Perceivable Information must be presented so users can perceive it.

2. Operable All functions must be operable through various input methods.

3. Understandable Information and operation must be understandable.

4. Robust Content must work with various technologies (including assistive tools).

Conformance Levels

WCAG defines three conformance levels:

Level	Meaning	Requirement
A	Minimum	Basic accessibility
AA	Standard	Often legally required
AAA	Optimal	Highest accessibility

Recommendation: Aim for at least Level AA. It’s the legal standard and a good compromise between effort and benefit.

The Most Important WCAG 2.2 Criteria

1. Alternative Text for Images (1.1.1)

Every informative image needs a descriptive alt text.

<!-- Bad -->
<img src="team.jpg">

<!-- Good -->
<img src="team.jpg" alt="The webdienster.de team during a project meeting">

<!-- Decorative image (empty alt text) -->
<img src="decoration.jpg" alt="">

Tips for good alt text:

• Describe what’s visible in the image
• For graphics: State the information presented
• For buttons: Describe the function
• Decorative images: Empty alt text (alt="")

2. Color Contrast (1.4.3, 1.4.6)

Text must have sufficient contrast with the background.

Level	Normal Text	Large Text (18pt+)
AA	4.5:1	3:1
AAA	7:1	4.5:1

Testing tools:

• WebAIM Contrast Checker
• Colour Contrast Analyser

3. Keyboard Accessibility (2.1.1, 2.1.2)

All functions must be reachable by keyboard.

<!-- Bad: Not focusable -->
<div onclick="openMenu()">Menu</div>

<!-- Good: Naturally focusable -->
<button onclick="openMenu()">Menu</button>

<!-- Alternative with tabindex -->
<div role="button" tabindex="0" onclick="openMenu()"
     onkeypress="if(event.key==='Enter') openMenu()">Menu</div>

Checklist:

• Tab navigation works logically
• Focus is always visible
• No keyboard trap (user can leave element)
• Enter/Space activate interactive elements

4. Page Structure and Headings (1.3.1, 2.4.6)

Use semantic HTML and a logical heading hierarchy.

<!-- Bad -->
<div class="title">Main Heading</div>
<div class="subtitle">Subheading</div>

<!-- Good -->
<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Further Section</h3>

Rules:

• Only one H1 per page
• Don’t skip levels (H1 → H2 → H3)
• Headings describe the following content

5. Make Forms Accessible (1.3.1, 3.3.2)

<!-- Bad -->
<input type="text" placeholder="Email">

<!-- Good -->
<label for="email">Email Address</label>
<input type="email" id="email" name="email"
       aria-describedby="email-hint">
<span id="email-hint">We'll send you a confirmation.</span>

Form checklist:

• Every input field has a label
• Required fields are marked
• Error messages are understandable
• Errors are associated with the field

6. New Criteria in WCAG 2.2

Version 2.2 brings important new requirements:

Focus Not Obscured (2.4.11 AA): The focus indicator must not be completely hidden (e.g., by sticky headers).

Target Size Minimum (2.5.8 AA): Interactive elements must be at least 24x24 CSS pixels.

Accessible Authentication (3.3.8 AA): Authentication must not rely solely on cognitive tests (CAPTCHAs).

Accessibility Laws

Accessibility requirements vary by country, but many jurisdictions now require digital accessibility:

United States

• ADA (Americans with Disabilities Act): Courts have increasingly interpreted this to cover websites
• Section 508: Requires federal agencies to make their electronic content accessible
• State laws: Many states have additional requirements

European Union

• European Accessibility Act (EAA): Takes effect June 28, 2025
• Affects e-commerce, banking services, e-books, communication services

Who is Affected?

Most accessibility laws affect:

• E-commerce websites selling goods
• Banking services (online banking)
• E-books and e-readers
• Communication services
• Transportation services

What’s Required?

• Conformance with WCAG 2.1 Level AA (minimum)
• Documentation of accessibility measures
• Accessibility statement on the website

Practical Implementation Tips

1. Automated Testing

Start with automated tools:

# axe-core via npm
npm install @axe-core/cli
npx axe https://www.your-website.com

# Lighthouse in Chrome DevTools
# Open DevTools → Lighthouse → Accessibility

Important: Automated tests find only ~30% of issues. Manual testing is essential.

2. Manual Testing

Keyboard test:

1. Put away the mouse
2. Navigate through the page with Tab
3. Check: Is focus visible? Is the order logical?

Screen reader test:

• Windows: NVDA (free)
• Mac: VoiceOver (built-in)
• Listen to how your page is read aloud

3. Getting Started Checklist

• All images have alt text
• Color contrast at least 4.5:1
• Page is keyboard navigable
• Logical heading hierarchy
• Forms have labels
• Videos have captions
• Language is defined in HTML (<html lang="en">)

Conclusion: Accessibility is Quality

Accessible websites are better websites – for everyone. They’re better structured, more performant, and more SEO-friendly. The investment pays off:

• Reach larger audience
• Better SEO through semantic HTML
• Legal compliance
• Positive brand perception

Start with the basics and continuously improve. Perfection isn’t the goal – progress is the goal.

Next Steps:

• Test your website with the WAVE Tool
• Check your color contrasts
• Navigate your site using only the keyboard

Related Content

• Responsive Design - Mobile-first design with accessibility in mind
• SEO Optimization - Semantic HTML improves both accessibility and SEO
• Performance Optimization - Performance matters for screen readers too

---

Need help with accessible website design? Contact me for analysis and implementation consulting.