# WCAG and accessibility law

> Understand WCAG, the POUR principles, conformance levels, and why laws like the European Accessibility Act make accessible design a legal requirement.

Source: https://uxspot.io/wcag-accessibility-law

<section id="what-is-wcag">
<h2>What is WCAG?</h2>
<p>You already know <a href="/a11y-importance" class="redirect">why accessibility matters</a> — designing for the full range of human abilities makes products better for everyone. This article covers the other half of the story: the standard that defines what "accessible" actually means, and the laws that now require it.</p>
<p class="blockquote">WCAG stands for the Web Content Accessibility Guidelines — the international standard for accessible digital content, maintained by the W3C.</p>
<p>Think of WCAG as a shared checklist that designers, developers, lawyers, and procurement teams can all point to. Instead of arguing about whether a checkout flow "feels" accessible, teams can test it against specific, written criteria. <strong class="highlight">WCAG turns accessibility from a matter of opinion into a matter of evidence.</strong> If your product renders content on a screen, WCAG is the yardstick it will be measured against.</p>
<ul>
<span>keywords</span>
<li>#WCAG</li>
<li>#W3C</li>
<li>#Standards</li>
</ul>
</section>
<section id="pour-principles">
<h2>The POUR principles</h2>
<p>WCAG is organized around four principles, remembered by the acronym POUR. Every specific guideline in the standard rolls up into one of these four ideas.</p>
<div id="perceivable">
<h3>Perceivable</h3>
<p>Users must be able to perceive your content with at least one of their senses. <strong class="highlight">If information only exists in one form — an image, a color, a sound — anyone who can't access that form is locked out.</strong></p>
<p><strong>Alt text on images</strong> gives screen reader users the same information a sighted user gets from a product photo or chart.</p>
<p><strong>Captions on video</strong> make spoken content available to deaf and hard-of-hearing users, and to anyone watching in a noisy café.</p>
<p><strong>Sufficient color contrast</strong> ensures text stays readable for users with low vision or color blindness — and for everyone using a phone in sunlight.</p>
</div>
<div id="operable">
<h3>Operable</h3>
<p>Users must be able to operate every control. Many people navigate entirely with a keyboard, a switch device, or voice commands rather than a mouse or touchscreen.</p>
<p><strong>Keyboard access</strong> means every action — opening a menu, submitting a form, closing a dialog — works without a pointer.</p>
<p><strong>Visible focus indicators</strong> show keyboard users where they are on the page, the way a cursor shows a mouse user.</p>
<p><strong>No time traps</strong> means users can extend or turn off time limits, like a checkout session that expires mid-purchase.</p>
</div>
<div id="understandable">
<h3>Understandable</h3>
<p>Content and interfaces must make sense. A form a user can technically reach but cannot figure out is still a failure.</p>
<p><strong>Clear error messages</strong> tell users what went wrong and how to fix it — "Enter your card's expiry date as MM/YY" instead of "Invalid input."</p>
<p><strong>Predictable navigation</strong> keeps menus and controls in consistent places, so users don't relearn the interface on every page.</p>
<p><strong>Labeled inputs</strong> make sure every field says what it wants, both visually and to <a href="/assistive-tech" class="redirect">assistive technology</a>.</p>
</div>
<div id="robust">
<h3>Robust</h3>
<p>Content must work reliably across browsers, devices, and assistive technologies — including ones that don't exist yet.</p>
<p><strong>Semantic markup</strong> means using real buttons, headings, and lists in code instead of styled generic elements, so assistive technology knows what each thing is.</p>
<p><strong>Proper names and roles</strong> ensure a custom component, like a star rating widget, announces itself correctly rather than as a mystery cluster of icons.</p>
</div>
<ul>
<span>keywords</span>
<li>#Perceivable</li>
<li>#Operable</li>
<li>#Understandable</li>
<li>#Robust</li>
</ul>
</section>
<section id="conformance-levels">
<h2>Conformance levels: A, AA, AAA</h2>
<p>Every WCAG guideline is assigned one of three levels. <strong>Level A</strong> is the floor: failing these criteria means some users are completely blocked. <strong>Level AA</strong> adds requirements like adequate color contrast and visible focus states. <strong>Level AAA</strong> is the most demanding tier, and some of its criteria aren't achievable for every kind of content.</p>
<p class="blockquote">Level AA is the conformance bar that most laws, regulations, and contracts point to.</p>
<p>AA is the pragmatic middle: strict enough to remove the most serious barriers, realistic enough to apply to virtually any product. <strong class="highlight">When a policy, contract, or lawsuit says a product "must be WCAG compliant," it nearly always means Level AA.</strong></p>
<ul>
<span>keywords</span>
<li>#LevelA</li>
<li>#LevelAA</li>
<li>#Conformance</li>
</ul>
</section>
<section id="wcag-22">
<h2>What WCAG 2.2 added</h2>
<p>WCAG 2.2, published in October 2023, didn't rewrite the rules — it extended them, and the additions read like a summary of where modern interfaces still fail people.</p>
<p>In spirit, WCAG 2.2 strengthened four areas. <strong>Focus visibility:</strong> the keyboard focus indicator must be genuinely visible, not hidden behind sticky headers or styled into invisibility. <strong>Dragging alternatives:</strong> anything done by dragging — reordering a list, adjusting a slider — needs a simple tap or click alternative for users with limited motor control. <strong>Target sizes:</strong> touch targets need enough room that users with tremors or larger fingers can hit them reliably. <strong>Reducing cognitive burden:</strong> don't make users re-enter information you already asked for, and don't lock login behind puzzles that memory or transcription problems make impossible.</p>
<p>The direction of the standard is clear: each version demands less precision, less memory, and less effort from the user.</p>
<ul>
<span>keywords</span>
<li>#WCAG22</li>
<li>#FocusVisibility</li>
<li>#TargetSize</li>
</ul>
</section>
<section id="the-law">
<h2>The legal shift</h2>
<p>For years, accessibility lived in the "nice to have" column of most product roadmaps. Two major legal frameworks have ended that era.</p>
<div id="eaa">
<h3>The European Accessibility Act</h3>
<p>The European Accessibility Act (EAA) became enforceable on June 28, 2025. It requires private-sector products and services sold in the EU — e-commerce, banking, transport booking, and more — to be accessible. <strong class="highlight">The EAA applies to non-EU companies too: if you sell into the European market, your product falls under it.</strong></p>
<p>This is a significant expansion: earlier accessibility laws mostly targeted government websites, while the EAA reaches directly into everyday commercial products. A checkout flow that keyboard users can't complete is no longer just a UX flaw — in the EU, it's a compliance failure.</p>
</div>
<div id="us-ada">
<h3>The US context</h3>
<p>In the United States, the Americans with Disabilities Act (ADA) has been applied to websites through years of litigation. Courts have repeatedly treated inaccessible business websites as a form of discrimination, and lawsuits over inaccessible sites — retail, restaurants, banking — are a routine legal risk for companies operating in the US.</p>
<p>No single US law names WCAG for all private websites, but in practice, settlements and demand letters use WCAG Level AA as the benchmark. The safest position is the same on both sides of the Atlantic: meet the standard.</p>
</div>
<ul>
<span>keywords</span>
<li>#EAA</li>
<li>#ADA</li>
<li>#Compliance</li>
</ul>
</section>
<section id="for-designers">
<h2>What this means for designers</h2>
<p><strong class="highlight">Accessibility has moved from a professional virtue to a professional requirement — and much of the responsibility lands at the design stage, not in code review.</strong> Practically, that means building accessibility into your everyday workflow:</p>
<p><strong>Annotate your designs.</strong> Mark focus order, input labels, and heading structure in your mockups so developers don't have to guess.</p>
<p><strong>Check contrast and target sizes early.</strong> Verifying color contrast and touch target dimensions at the mockup stage costs minutes; fixing them after launch costs sprints.</p>
<p><strong>Test with assistive-tech users.</strong> Include people who use screen readers, keyboard navigation, or magnification in your <a href="/usability-testing" class="redirect">usability studies</a>, not just as an afterthought.</p>
<p>On auditing: automated checkers only catch a fraction of real problems — mostly mechanical ones, like missing alt attributes or low contrast. <strong class="highlight">A manual pass with just a keyboard, and another with a screen reader, will surface issues no automated tool can find</strong> — a focus order that jumps around the page, a button that announces itself as "unlabeled."</p>
<p>Finally, treat unresolved accessibility issues as debt. Like technical debt, it compounds: every inaccessible component gets copied into new features. Unlike most technical debt, it carries legal exposure and excludes real people from your product every day it exists. Paying it down early is cheaper in every sense.</p>
<ul>
<span>keywords</span>
<li>#Annotations</li>
<li>#Auditing</li>
<li>#AccessibilityDebt</li>
</ul>
</section>
<section id="takeaways">
<h2>Takeaways</h2>
<p class="blockquote">WCAG defines what accessible means; the law now defines when you must meet it.</p>
<p>Learn the four POUR principles, design to Level AA as your default bar, and remember that the European Accessibility Act and ADA litigation have made accessible design a requirement of shipping products — in the EU, the US, and anywhere your users are.</p>
</section>