Roughly one in six people worldwide lives with a significant disability. On the web, that translates to visitors using screen readers, navigating with only a keyboard, zooming to 400 percent, or struggling with low-contrast text. Accessibility, often shortened to a11y, is the practice of building sites all of them can use. The good news: most accessibility failures come from a small set of common mistakes, and none of the fixes require special talent. This guide covers the principles behind the WCAG standard, the failures that show up on nearly every site, and a testing routine you can run without any budget. ## Why Accessibility Is Worth Your Time Beyond the ethical case, which is real, there are three practical arguments: * **It is a legal requirement in much of the world.** The Americans with Disabilities Act in the US, the European Accessibility Act, and similar laws elsewhere increasingly apply to websites. Accessibility lawsuits are common and settlements are expensive. * **It overlaps heavily with SEO.** Screen readers and search crawlers consume the same structure: headings, alt text, semantic HTML, link text. Fixing one improves the other. * **It helps everyone.** Captions serve people in loud cafes. High contrast serves phones in sunlight. Keyboard support serves power users. Clear language serves tired people, which is all of us. ## Understanding WCAG in Five Minutes The Web Content Accessibility Guidelines (WCAG) is the international standard, currently at version 2.2. It organizes requirements under four principles, abbreviated POUR: * **Perceivable**: users must be able to sense the content. Images need text alternatives, videos need captions, text needs sufficient contrast. * **Operable**: users must be able to work the interface. Everything must function with a keyboard, targets must be reachable, nothing may trap focus. * **Understandable**: content and controls must make sense. Clear labels, predictable navigation, helpful error messages. * **Robust**: content must work with assistive technologies, which mostly means valid, semantic HTML. Each requirement has a conformance level: A (minimum), AA (the standard target, referenced by most laws), and AAA (aspirational). Aim for AA. You do not need to memorize the document; the failures below cover the large majority of what audits find. ## The Eight Most Common Failures and Their Fixes ### 1. Insufficient color contrast The single most common failure on the web. Light gray text on white backgrounds fails constantly. WCAG AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold and up). You do not need to do the math: paste your foreground and background colors into our [Color Contrast Checker](/tools/color-contrast) and it reports the ratio and pass/fail per level. Check your body text, your muted "secondary" text (the usual offender), link colors, and button text. ### 2. Missing or useless alt text Every meaningful image needs an `alt` attribute describing its content or function: `alt="Bar chart showing sales doubling from 2024 to 2026"`, not `alt="chart"` or `alt="image123.png"`. Purely decorative images should have an explicitly empty `alt=""` so screen readers skip them. An image inside a link takes the link's purpose as its alt: `alt="Back to home"` rather than describing the logo's appearance. ### 3. Broken heading structure Screen reader users navigate by headings the way sighted users scan visually; a jumbled hierarchy is like a scrambled table of contents. The rules: exactly one `

` per page describing the page, levels never skip downward (an `

` section can contain `

`s, not jump to `

`), and headings are chosen by structure, never because a level "looks the right size". Style with CSS, structure with heading levels. ### 4. Divs and spans doing a button's job `
` is invisible to keyboards and screen readers. A real `

How to Make Your Website Accessible: A WCAG Guide for Beginners

Try These Tools