ADA Web Accessibility
Compliance

Provide text alternatives for any non-text content so it can be changed into other forms people need.

Common failures:

• •Images missing alt attributes entirely
• •Decorative images not marked with alt=""
• •Icon buttons (hamburger, close, search) with no accessible name

<img src="drip-emitter.jpg">

<img src="drip-emitter.jpg"
     alt="A drip emitter watering
     a rose bush">

Provide alternatives for time-based media — captions, transcripts, and audio descriptions.

Common failures:

• •Videos with no captions or auto-generated captions never reviewed
• •Live-streamed board meetings with no real-time captioning
• •Podcast episodes with no transcript

Create content that can be presented in different ways without losing information or structure.

Common failures:

• •Styled divs used instead of proper heading tags
• •Form inputs without associated label elements
• •Required fields indicated only by color with no programmatic indication

Make it easier for users to see and hear content — contrast, resize, spacing, and visual presentation.

Common failures:

• •Light gray text on white backgrounds — the single most common WCAG failure
• •Fixed-height containers that clip text at 200% zoom
• •Form input borders that blend into the background

<p style="color: #a8c8e8;
         background: #ffffff;">
  Light blue on white (2.1:1)
</p>

<p style="color: #2d5f8a;
         background: #ffffff;">
  Dark blue on white (6.8:1)
</p>

Make all functionality available from a keyboard — no mouse required.

Common failures:

• •Custom dropdowns, sliders, and carousels that only respond to mouse clicks
• •Modal dialogs that trap focus without cycling back to the beginning
• •onClick handlers on divs without keyboard event handlers or tabindex

Help users navigate, find content, and determine where they are.

Common failures:

• •No "skip to main content" link
• •CSS outline: none applied globally with no replacement focus style
• •Links that say only "Click here" or "Read more" with no context

<a href="/tips">Click here</a>

<a href="/tips">View water
  conservation tips</a>

Support various input methods beyond keyboard — touch, pointer, voice, motion.

Pages appear and operate in predictable ways — consistent navigation and identification.

Help users avoid and correct mistakes — labels, error messages, and confirmation steps.

Common failures:

• •Form fields with only placeholder text and no visible label
• •Validation errors shown only by turning the field border red
• •Login forms that block password managers or prevent pasting

<input type="email"
       placeholder="Email">

<label for="email">Email</label>
<input type="email" id="email"
       placeholder="you@example.com">

Maximize compatibility with current and future user agents, including assistive technologies.

Common failures:

• •Custom components (tabs, accordions, modals) built with divs and no ARIA roles
• •Toggle buttons missing aria-pressed state
• •Toast notifications that appear without role="status"

These are not testable success criteria — they define the rules for claiming conformance. Failing any one means the page does not conform.

Key implications:

• •No partial credit — one failure on a page means the page does not conform
• •Process-wide — a conforming homepage means nothing if the bill-pay flow is broken
• •Third-party content — embedded widgets, iframes, and ads count unless you claim partial conformance under 5.4
• •Non-interference — a broken overlay or auto-playing video can invalidate an otherwise conforming page

Practical notes:

• •Conformance claims are optional — courts care about actual accessibility, not self-declarations
• •The third-party exception is narrow — if you chose to embed it, you're responsible for vetting it
• •Publishing an accessibility statement (even without a formal claim) is a strong good-faith signal