ADA Compliance Made Simple for Construction Websites Original URL: https://darrenslaughter.co/ada-compliance-made-simple-for-construction-websites/ Capture: 20250809135505 Your website should work for everyone who wants to book your crew—whether they navigate with a mouse, a screen‑reader, or a single switch button. Fixing accessibility gaps isn’t a mystery or a mountain of legal jargon. Follow the ten checkpoints below and you’ll cover the core requirements that matter most to homeowners and to the Americans with Disabilities Act (ADA). Table of Contents Toggle 1. Text Alternatives for Every Image 2. Keyboard‑Only Navigation 3. Color Contrast at 4.5:1 or Better 4. Scalable Text and Layout 5. Clear, Consistent Headings 6. Descriptive Link Text 7. Form Field Labels and Error Messages 8. Skip Links and Landmarks 9. Captions and Transcripts for Media 10. Assertive Testing and Ongoing Checks Putting It All Together: A One‑Week Action Plan The Payoff Beyond Compliance Final Checklist (Print & Pin Near Your Monitor) 1. Text Alternatives for Every Image Why it matters Screen‑reader users can’t “see” that gorgeous roof replacement photo unless you describe it. Do it now Write 1‑2 concise sentences in the alt attribute explaining what a sighted visitor learns at a glance. Skip “image of” or “picture of.” Start with the substance: “New charcoal‑gray architectural shingle roof with white gutters.” 2. Keyboard‑Only Navigation Why it matters Visitors with mobility impairments tab through links and buttons. If they get trapped in a slider or pop‑up, they bail. Do it now Tab through every page. Ensure the focus outline is visible and logical (header → nav links → body content → footer). Add :focus CSS styling if your theme hides outlines—something as simple as outline:2px solid #000; . 3. Color Contrast at 4.5:1 or Better Why it matters Low‑contrast text blends into the background for users with low vision and on sun‑drenched job‑site tablets. Do it now Test foreground/background pairs with a free contrast checker. Adjust either color until the ratio hits 4.5:1 for body text and 3:1 for large headings. 4. Scalable Text and Layout Why it matters Some visitors bump browser zoom to 200 %. If your template crashes into a side scroll, they’ll leave. Do it now Use rem or em units for fonts and spacing, not fixed pixels. Verify that the layout reflows gracefully at 320 px wide (the width of many phone screens at 200 % zoom). 5. Clear, Consistent Headings Why it matters Screen‑reader users rely on heading structure (

→

→

) to skim the page—just like sighted readers scan bold headlines. Do it now One

per page (the main topic). Descend levels in order—never jump from

to

. Use headings for structure, not style; reserve bold spans for emphasis inside paragraphs. 6. Descriptive Link Text Why it matters “Click here” is meaningless when read out of context in a links list. Do it now Replace generics with action + destination: “Download our roofing warranty PDF” or “See cedar deck before‑and‑after gallery .” If you must repeat a link (“Learn more”), add aria-label="Learn more about kitchen remodels" . 7. Form Field Labels and Error Messages Why it matters Mis‑labelled contact forms block inquiries from assistive‑technology users—the opposite of the conversion boost you want. Do it now Pair each input with a visible