How to Check Website Accessibility (WCAG)

Website accessibility (a11y) is not only a legal requirement in many countries but, above all, a best practice that expands your audience. In this article, I’ll show you how to quickly check your website’s compliance with WCAG guidelines.

What Is WCAG?

WCAG (Web Content Accessibility Guidelines) is an international set of guidelines for web content accessibility. The current version is WCAG 2.2, which defines three conformance levels:

Level	Description
A	Minimum - basic requirements
AA	Standard - required by most regulations
AAA	Advanced - highest level of accessibility

Most regulations (e.g., European Accessibility Act) require AA level.

Why Is Accessibility Important?

Legal Aspect

• EU: European Accessibility Act (EAA) from 2025
• US: ADA, Section 508
• UK: Equality Act 2010

Business Aspect

• 15% of the population has some form of disability
• Accessible websites have better SEO (alt texts, structure)
• Improved UX for all users

Technical Aspect

• Better HTML code
• Proper semantics
• Better keyboard navigation

Traditional Audit Methods

Manual Audit

Requires a WCAG expert who checks the site point by point. Time-consuming and expensive.

Lighthouse Accessibility

Built into Chrome DevTools, but:

• Requires running an audit
• Doesn’t show error context
• Limited checklist

axe DevTools

Popular extension, but:

• Separate tool from SEO audit
• Requires separate launch

UPER SEO Auditor - Accessibility Audit

The UPER SEO Auditor extension includes a built-in accessibility audit based on WCAG 2.2 Level A and AA.

What Categories Are Checked?

1. Images - alt text, decorative images
2. Headings - hierarchy, skipped levels
3. Links - link text, ambiguous links
4. Forms - labels, instructions
5. Language - lang attribute on html
6. ARIA - proper use of attributes
7. Keyboard - tabindex, focus
8. Contrast - text contrast ratio
9. Zoom - text in relative units

How to Run the Audit?

1. Open the page in your browser
2. Launch the UPER SEO Auditor panel
3. Go to the A11y (or Accessibility) tab
4. Results appear automatically

Check Categories

Images (WCAG 1.1.1)

Checked elements:

Check	Description	Impact
Missing alt	Image without alt attribute	Critical
Empty alt on linked image	Linked image without description	Serious
Alt = filename	Alt contains filename	Moderate
Long alt	Alt > 125 characters	Minor

How to fix:

<!-- ❌ Wrong -->
<img src="hero.jpg">
<img src="logo.png" alt="logo.png">

<!-- ✅ Correct -->
<img src="hero.jpg" alt="Team working in office">
<img src="logo.png" alt="Example Company Logo">

<!-- Decorative images -->
<img src="decoration.svg" alt="" role="presentation">

Headings (WCAG 1.3.1)

Checked elements:

Check	Description	Impact
Missing H1	Page without H1 heading	Serious
Multiple H1	More than one H1	Moderate
Skipped level	H2 → H4 (missing H3)	Moderate
Empty heading	Heading without text	Serious

Proper hierarchy:

<h1>Page Title</h1>
  <h2>Main Section</h2>
    <h3>Subsection</h3>
    <h3>Subsection</h3>
  <h2>Next Section</h2>
    <h3>Subsection</h3>

Links (WCAG 2.4.4)

Checked elements:

Check	Description	Impact
Ambiguous text	”Click here”, “More”	Moderate
Empty link	Link without text	Critical
Icon only	Link with only icon, no aria-label	Serious

Ambiguous texts to avoid:

• “Click here”
• “Read more”
• “More”
• “Here”
• “Link”

How to fix:

<!-- ❌ Wrong -->
<a href="/offer">Click here</a>
<a href="/blog"><i class="icon-arrow"></i></a>

<!-- ✅ Correct -->
<a href="/offer">View our offer</a>
<a href="/blog" aria-label="Go to blog">
  <i class="icon-arrow"></i>
</a>

Forms (WCAG 3.3.2)

Checked elements:

Check	Description	Impact
Missing label	Input without associated label	Critical
Missing id	Input without id (can’t associate label)	Serious
Placeholder as label	Only placeholder, no label	Moderate

Proper forms:

<!-- Method 1: label with for -->
<label for="email">Email</label>
<input type="email" id="email" name="email">

<!-- Method 2: wrapping label -->
<label>
  Email
  <input type="email" name="email">
</label>

<!-- Method 3: aria-label -->
<input type="search" aria-label="Search the site">

Page Language (WCAG 3.1.1)

Checked elements:

Check	Description	Impact
Missing lang attribute	<html> without lang	Serious
Invalid code	lang=“english” instead of “en”	Serious

Proper declaration:

<!DOCTYPE html>
<html lang="en">
<!-- for multilingual content -->
<p lang="es">Este párrafo está en español.</p>

ARIA (WCAG 4.1.2)

Checked elements:

Check	Description	Impact
Invalid role	role=“none” on interactive element	Serious
Missing aria-label	Element with role but no name	Moderate
aria-hidden on focusable	Hidden element accessible by keyboard	Critical

Keyboard (WCAG 2.1.1)

Checked elements:

Check	Description	Impact
Negative tabindex	tabindex < 0 on interactive element	Serious
High tabindex	tabindex > 0 (disrupts natural flow)	Moderate
onclick on div	Clickable elements without keyboard support	Serious

Color Contrast (WCAG 1.4.3)

Checked elements:

Check	Description	Impact
Low text contrast	Ratio < 4.5:1 for small text	Serious
Low large text contrast	Ratio < 3:1 for text ≥18px	Moderate

Required ratios:

• Small text (< 18px): 4.5:1
• Large text (≥ 18px bold or ≥ 24px): 3:1

Text Resizing (WCAG 1.4.4)

Checked elements:

Check	Description	Impact
font-size in px	Text in absolute units	Moderate
!important on font-size	Blocks user resizing	Moderate

Proper units:

/* ❌ Wrong */
body { font-size: 16px; }
h1 { font-size: 32px !important; }

/* ✅ Correct */
body { font-size: 1rem; }
h1 { font-size: 2rem; }

Audit Results

Accessibility Score

The extension calculates an accessibility score (0-100) based on:

• Critical - 25 points per issue
• Serious - 15 points
• Moderate - 5 points
• Minor - 1 point

Filtering Results

You can filter issues by:

• Category - images, links, forms
• Impact - critical, serious, moderate, minor
• WCAG criterion - 1.1.1, 2.4.4, etc.

Report Export

Audit results are included in PDF export:

• Accessibility section in the report
• List of issues with descriptions
• WCAG references
• Fix recommendations

What Automated Audit WON’T Check?

Automated tools detect about 30-40% of accessibility issues. Manual checking is needed for:

• Alt text relevance - do they describe the image content?
• Navigation logic - is focus intuitive?
• Audio/video content - are there captions/transcripts?
• Understandability - is the language simple?
• Consistency - is navigation consistent?

Summary

Accessibility audit in UPER SEO Auditor is a quick way to:

• Detect common issues - WCAG 2.2 Level A/AA
• Categorize problems by impact
• Understand context - what to fix and where
• Export results to PDF report

It’s a good starting point before a detailed expert audit.

Try UPER SEO Auditor and check your website’s accessibility.

Sources

1. WCAG 2.2 - W3C https://www.w3.org/TR/WCAG22/

2. Understanding WCAG 2.2 https://www.w3.org/WAI/WCAG22/Understanding/

3. European Accessibility Act https://ec.europa.eu/social/main.jsp?catId=1202

4. Web Accessibility Initiative (WAI) https://www.w3.org/WAI/