Accessibility Basics for Roofing Websites

Raftervio sells website design to roofing contractors. This guide explains the topic first and mentions our service only where it fits.

Why accessibility matters for a roofer

Your customers include older homeowners, people with low vision, people with tremors that make small buttons hard to tap, people who use screen readers and people who simply have a cracked phone screen in bright sunlight. An accessible site lets all of them read your services, find your number and request an inspection. It is good service, and it reduces legal risk.

What the Department of Justice says

In March 2022 the Department of Justice published guidance on web accessibility and the ADA. It says "Title III prohibits discrimination against people with disabilities by businesses open to the public," and that the ADA's requirements "apply to all the goods, services, privileges, or activities offered by public accommodations," including those offered on the web.¹

On technical standards, the guidance says: "The Department of Justice does not have a regulation setting out detailed standards." It describes existing standards, including the Web Content Accessibility Guidelines (WCAG) and Section 508 standards, as helpful guidance, and says businesses can choose how they make their websites accessible.¹ A notice on the page adds that it does not reflect later requirements for state and local governments published in April 2024, which apply to public entities rather than private contractors.¹

This is a plain-language summary, not legal advice. If you have received a demand letter or complaint, speak to an attorney.

WCAG in brief

WCAG is published by the W3C. Version 2.2 is the current recommendation. It is organized around four principles: content must be perceivable, operable and understandable, and it must work reliably with assistive technologies.² Each guideline has testable success criteria at levels A, AA and AAA. Many organizations aim for level AA.

You do not need to read the whole standard to make real progress. The checklist below covers the issues that matter most on a typical roofing website.

The practical checklist

Text and contrast

• Body text large enough to read comfortably on a phone
• Strong contrast between text and background, especially on photos and colored buttons
• No text inside images, such as phone numbers or offers in a banner graphic
• Pages still usable when someone zooms in or increases text size

Images

• Descriptive alt text on meaningful photos: "Replaced valley flashing on a cedar shake roof"
• Empty alt text on purely decorative images so screen readers skip them
• Before and after pairs described so the difference is clear without seeing it

WCAG requires a text alternative for non-text content, with exceptions such as decoration.²

Forms

• A visible label for every field, rather than placeholder text that disappears
• Clear error messages that say what is wrong and how to fix it
• Errors that do not erase what the person already typed
• No time limits that rush people
• A submit button that says what it does

Keyboard and focus

• Every link, button and form field reachable with the Tab key
• A visible focus outline so keyboard users can see where they are
• Menus that open and close with the keyboard
• A "skip to main content" link at the top

Tap targets

WCAG 2.2 success criterion 2.5.8 sets a minimum target size of 24 by 24 CSS pixels for most interactive controls, with listed exceptions.² Bigger is better for the main call and quote buttons.

Media and motion

• Captions on videos with speech
• No autoplaying video with sound
• Respect for the reduced motion setting on devices

Common problems on roofing sites

Testing your own site

1. Unplug your mouse and try to request a quote with the keyboard only
2. Turn on your phone's screen reader (VoiceOver or TalkBack) and listen to your homepage
3. Zoom the browser to 200 percent and check that nothing is cut off
4. Run a free automated checker; it catches some issues, though not all
5. Ask someone who uses assistive technology to try your site, if you can

Overlays and quick fixes

Some products promise to make a site accessible by adding a script. They may help with some settings, but they cannot fix missing labels, unclear content or broken keyboard access in your underlying code. Treat them as an add-on at most, not a substitute for building the site properly.

An accessibility statement

Publishing a short statement that explains your approach, known limitations and how to report a problem shows you take it seriously and gives people a way to reach you. Our own accessibility statement is an example.

Accessibility on a budget

You do not need a large budget to make meaningful progress. Most of the fixes above cost nothing but attention when a site is built or updated. A sensible order for an existing roofing site:

1. Phone number and quote form first. Make the number real text with a tap-to-call link, give every form field a visible label and make sure errors are explained in words.
2. Contrast on the homepage. Check headline and button text over photos. A darker overlay often fixes it in minutes.
3. Alt text on service page photos. Describe what each photo shows, in plain language.
4. Keyboard pass. Tab through the homepage and contact page and fix anything you cannot reach or cannot see.
5. Documents. Turn the most important PDFs, such as warranty terms, into web pages.

Each step helps real customers immediately, and each one is easier to maintain once it is part of how you update the site.

When you hire a designer

Ask any web designer how they handle accessibility before you sign. Useful questions include which WCAG level they aim for, how they test forms with a keyboard and screen reader, whether they check contrast on text over photos and whether they will fix accessibility problems found after launch. Vague answers such as "the theme is accessible" are a warning sign, because accessibility depends on how content and forms are built, not only on the theme.