WCAG Guidelines — Accessibility Testing | Sabaoon Academy

The Web Content Accessibility Guidelines (WCAG) are the international standard for web accessibility. Published by the W3C, WCAG defines specific, testable criteria that determine whether web content is accessible.

WCAG Conformance Levels

WCAG has three conformance levels, each building on the previous:

Level	Description	Typical Requirement
A	Minimum accessibility	Legal baseline
AA	Addresses major barriers	Industry standard target
AAA	Highest level of accessibility	Aspirational, not required

Most organizations aim for WCAG 2.2 Level AA compliance. This is the standard referenced by most accessibility laws worldwide.

Key Success Criteria by Category

Text Alternatives (1.1)

Every non-text element needs a text alternative.

Ctrl+Enter

HTML

CSS

Preview

Adaptable Content (1.3)

Content structure must be programmatically determinable.

Ctrl+Enter

HTML

CSS

Preview

Distinguishable Content (1.4)

Make it easy for users to see and hear content.

Ctrl+Enter

HTML

CSS

/* SC 1.4.3 Contrast (Minimum) - Level AA */
/* Normal text: 4.5:1 contrast ratio */
/* Large text (18pt+ or 14pt bold): 3:1 contrast ratio */

/* Bad: insufficient contrast */
.low-contrast {
color: #999999;           /* Gray on white = 2.85:1 */
background-color: #ffffff;
}

/* Good: sufficient contrast */
.high-contrast {
color: #595959;           /* Darker gray on white = 7:1 */
background-color: #ffffff;
}

/* SC 1.4.4 Resize Text - Level AA */
/* Text must be resizable to 200% without loss of content */
/* Use relative units, not fixed pixels */

/* Bad */
.fixed-text {
font-size: 14px;
line-height: 18px;
width: 400px;
}

/* Good */
.flexible-text {
font-size: 0.875rem;
line-height: 1.5;
max-width: 40ch;
}

/* SC 1.4.11 Non-text Contrast - Level AA */
/* UI components and graphics need 3:1 contrast */

/* Bad: light border on input */
.input-low {
border: 1px solid #cccccc; /* 1.6:1 against white */
}

/* Good: visible border */
.input-good {
border: 1px solid #767676; /* 4.54:1 against white */
}

Preview

Keyboard Accessible (2.1)

All functionality must be available via keyboard.

Ctrl+Enter

HTML

CSS

Preview

Enough Time (2.2)

Users must have enough time to read and use content.

Ctrl+Enter

HTML

CSS

Preview

Navigable (2.4)

Help users find content and determine where they are.

Ctrl+Enter

HTML

CSS

Preview

WCAG Testing Checklist

Level A Checks (Must Have):
[  ] All images have appropriate alt text (1.1.1)
[  ] Content structure is conveyed through markup (1.3.1)
[  ] Color is not the only visual means of conveying info (1.4.1)
[  ] All functionality is keyboard accessible (2.1.1)
[  ] No keyboard traps exist (2.1.2)
[  ] Skip navigation link is provided (2.4.1)
[  ] Page has a descriptive title (2.4.2)
[  ] Link purpose is determinable from text (2.4.4)
[  ] Language of page is specified (3.1.1)
[  ] Input errors are identified and described (3.3.1)
[  ] HTML validates without significant errors (4.1.1)

Level AA Checks (Should Have):
[  ] Captions are provided for live audio (1.2.4)
[  ] Color contrast meets 4.5:1 for text (1.4.3)
[  ] Text can resize to 200% without loss (1.4.4)
[  ] Multiple ways to find pages (2.4.5)
[  ] Headings and labels are descriptive (2.4.6)
[  ] Focus is visible (2.4.7)
[  ] Consistent navigation (3.2.3)
[  ] Error suggestions are provided (3.3.3)

Key Takeaways

WCAG 2.2 Level AA is the standard target for most organizations
The POUR principles map to four WCAG categories (Perceivable, Operable, Understandable, Robust)
Each success criterion is testable with specific pass/fail conditions
Start with Level A compliance, then work toward AA
Use semantic HTML first -- it handles many criteria automatically

Next, you will learn how to test with screen readers, the most important assistive technology for accessibility testers.