# Accessible by Default: What WCAG Compliance Actually Requires From Your Frontend Accessibility gets treated as either irrelevant ("we're a small business, this doesn't apply to us") or terrifying ("we could get sued"). Neither reaction is that useful. Here's what WCAG actually asks for, in plain terms, and what it looks like to build for it from the start rather than bolting it on later. *Note: this is a practical, non-legal explanation. If you have specific legal compliance obligations, consult a lawyer familiar with accessibility law in your jurisdiction — this article won't tell you whether you're at legal risk.* ## What WCAG actually is WCAG (Web Content Accessibility Guidelines) is a set of testable criteria for making web content usable by people with disabilities — visual, auditory, motor, and cognitive. It's organized around four principles, often remembered as **POUR**: - **Perceivable** — can users perceive the content, regardless of how they access it (screen reader, low vision, color blindness)? - **Operable** — can users operate all interactive elements without a mouse, or with assistive devices? - **Understandable** — is the content and navigation predictable and clear? - **Robust** — does the content work correctly with assistive technologies, now and as they evolve? ## The failures I see most often In rough order of how often they show up on real client sites before an accessibility pass: 1. **Missing or meaningless alt text on images.** Either no alt attribute at all, or something unhelpful like `image1.jpg`, leaving screen reader users with no idea what the image shows. 2. **Color contrast that fails for low-vision users.** Light gray text on a white background looks "modern" but is genuinely unreadable for a meaningful share of visitors. 3. **Forms with no proper labels.** Placeholder text used as the only label, which disappears the moment someone starts typing and isn't reliably read by screen readers in the first place. 4. **Keyboard traps and unreachable elements.** Menus, modals, or dropdowns that only work with a mouse — someone navigating by keyboard alone (common for motor impairments) gets stuck or can't reach the element at all. 5. **No visible focus indicator.** When tabbing through a page with a keyboard, there's no visual sign of which element is currently focused, making keyboard navigation nearly unusable. ## A before/after example **Before:** a contact form with a placeholder reading "Your email" inside the input field, gray text on a white background, no visible label, and a submit button styled with a `