Accessibility Basics (WCAG in Plain English)

Accessibility means your website works for everyone — including people who use screen readers, keyboard navigation, or have low vision. It is also the law for many organizations.

01_what_is_wcag

1. What Is WCAG?

WCAG stands for Web Content Accessibility Guidelines. It is published by the W3C (the organization that sets web standards) and defines what an accessible website looks like. Most U.S. federal agencies and universities are legally required to meet at least WCAG 2.1 Level AA.

WCAG is organized around four principles, remembered with the acronym POUR:

  • Perceivable — Content must be presentable in ways users can perceive (e.g., alt text for images).
  • Operable — Interface components must be operable with a keyboard, not just a mouse.
  • Understandable — Content and navigation must be understandable (e.g., clear language, consistent menus).
  • Robust — Content must work reliably with assistive technologies like screen readers.
02_alt_text

2. Alt Text for Images

Every meaningful image must have an alt attribute describing its content. Screen readers read this text aloud to blind or low-vision users.

<!-- Meaningful image — describe what it shows -->
<img src="chart.jpg" alt="Bar chart showing enrollment increased 40% from 2022 to 2024">

<!-- Decorative image — empty alt tells screen reader to skip it -->
<img src="divider.png" alt="">

If the image contains text (like a poster or screenshot), include that text word-for-word in the alt attribute.

03_color_contrast

3. Color Contrast

Low-contrast text is the single most common accessibility failure. WCAG Level AA requires:

  • 4.5:1 ratio for normal body text.
  • 3:1 ratio for large text (18pt+ or 14pt bold).

Test your color combinations at webaim.org/resources/contrastchecker before finalizing your design. Enter the hex codes for your text color and background — the tool tells you instantly whether you pass or fail.

Also: never use color alone to convey information. A red/green status indicator means nothing to a colorblind user. Pair it with a label ("Error" / "Success") or an icon.

04_semantic_html

4. Semantic HTML

Semantic HTML uses elements that describe their meaning, not just their appearance. Screen readers use semantic structure to announce the page layout to users.

Instead of... Use... Because...
<div class="nav"><nav>Screen readers announce "navigation"
<div class="header"><header>Identifies the page header landmark
<div class="btn"><button>Keyboard operable; announces as button
<b>Heading</b><h2>Heading</h2>Communicates hierarchy, not just bold style
05_keyboard_nav

5. Keyboard Navigation

Some users cannot use a mouse — they navigate entirely with a keyboard. Test your site by unplugging your mouse and using only:

  • Tab — Move to the next focusable element (links, buttons, inputs).
  • Shift + Tab — Move backward.
  • Enter — Activate a link or button.
  • Arrow keys — Navigate within menus or form elements.

You should be able to reach every link and button on your page via keyboard. If any element is unreachable, it is inaccessible. The focused element should always have a visible focus outline — do not remove the default outline in CSS without replacing it with a custom visible style.

06_quick_checklist

6. Quick Pre-Submission Checklist

  • Every image has a meaningful alt attribute (or alt="" if decorative).
  • Text contrast passes 4.5:1 at webaim.org/resources/contrastchecker.
  • The page has exactly one <h1>.
  • Headings are in order — no skipping from H1 to H4.
  • All links have descriptive text — no "click here."
  • The page is navigable by keyboard alone (Tab through everything).
  • Language is declared: <html lang="en">.