Home Service Website Accessibility: Quote Forms

Opening answer

Home services website accessibility starts with a simple test: can a visitor request a quote, call the business and see what the work looks like, using only a keyboard or a phone, without sighted help? A quote form with unlabeled fields fails that test. A phone link that shows only a phone icon fails it too, because a visitor who cannot see the icon gets no number. A before and after gallery that hides the job type and the room inside photos fails it as well. Fix the quote form first, then the phone link, then the gallery and the sticky header.

Quote forms: ask for job details in labeled fields

A home services quote form should ask for four groups of facts, in this order: contact details, service needed, job location and job details. Group each set under a clear group label, so a screen reader announces the group as the visitor moves through its fields. Label every control in words. A bare dropdown with no label, or a label that only says "Select", does not work. Give the job details field a label that states what to write, such as "Describe the job, including room, size and urgency", with any format instruction beside the field before the visitor types.

Error handling follows the WAI Forms Tutorial pattern, tied to WCAG 2.2 criteria 3.3.2 for labels or instructions, 3.3.1 for error identification and 3.3.3 for error suggestion. When a required field is empty, name the field in text beside it, such as "Phone number is required so the business can confirm the quote." When a phone number looks incomplete, suggest a fix in text. Move focus to the first error after a failed submission. Colour alone is never an error message, because a visitor who cannot perceive colour, and a screen reader user who never hears a colour change, get no information from a red border alone.

Keep the form short, and keep a phone fallback visible on the same page. A visitor who cannot complete a form field should see a phone number as text. That fallback is not a substitute for fixing the form, but it keeps a job request from being lost while a widget fault is fixed.

Phone links: show the number as text, name the link

A click to call link is a small pattern with a large effect on a trades site. The link text must be the phone number itself, in full, as visible text. A link that contains only a phone icon, or only the words "Call now", fails in two ways. A screen reader user hears "Call now" with no number, and a visitor who prints the page gets no number at all from an icon only link.

Name matters beyond the number. WCAG 2.2 criterion 2.4.4 asks for link purpose in context, and criterion 2.4.6 asks for descriptive headings and labels. A link that reads "Call for a quote" followed by the full phone number states both number and purpose, and it works when pulled out of context into a list of links. Use the same number text and link name on every page. Check target size as well: criterion 2.5.8 asks for pointer targets of at least 24 by 24 CSS pixels, with stated exceptions, and padding counts toward that size, so a padded link can pass where a bare icon fails.

Practice judging small header controls with the target size quiz, then test the real header on a phone. A sticky header that holds the phone link is useful, but only if it never covers the field a visitor is trying to complete. WCAG 2.2 criterion 2.4.11 asks that a component receiving keyboard focus is not entirely hidden by author created content. Set scroll padding to match the sticky header height.

Before and after galleries: text first, photos second

Before and after galleries are the proof page for a home services business, and they fail when the proof lives only in photos. A pair of photos with alt text such as "before" and "after" tells a screen reader user nothing about the job. Put the job facts in text beside each pair: service type, room, and what changed. Then give each photo alt text that matches its purpose under the WAI Images Tutorial: informative photos get a short description, decorative photos get an empty alt value, and a thumbnail that opens a larger photo names the photo it opens.

Do not use a photo as the only place where a service, a room or a result lives. Keep gallery controls keyboard usable, with named previous and next buttons, a visible focus indicator and a target size that meets criterion 2.5.8. If a gallery auto advances, give it a pause control that a keyboard user can reach.

Service pages need the same text first habit: service name, work description, job types in words and the quote form link belong in HTML text, not only inside a hero image or video. Put the headline as real text on the page, and use the image as a visual extra.

Sticky headers: test them with a keyboard, not only with a mouse

Sticky headers are common on trades sites because the phone link and quote button stay visible while a visitor scrolls. A sticky header causes three faults when it is not tested with a keyboard: it can cover the focused element entirely when the page scrolls to it, which fails criterion 2.4.11; it can cover the top of a section when an in page link jumps to it; and it can eat vertical space on a small phone screen, leaving little room for the quote form.

Test all three with a keyboard and a phone. Tab from the top of the page through the header to the quote form, watching where focus lands. Follow an in page link to a section, and check that the heading sits below the header, not behind it. If any step fails, adjust scroll padding, reduce the header height on small screens, or make the header collapse on scroll down, keeping the same phone link and quote button names in both states.

What Axeazy helps with on a home services site

Axeazy scans with 98 automated checks and fixes code in 14 categories, including form labels, link names, button names and keyboard tab order, per WCAG 2.2 and ADA guidance on web accessibility. That covers labeled quote fields, named phone links and tab order through a quote form. For a site with a GitHub repo, fixes arrive as a real pull request with a visible diff for the owner or developer to review and merge. Paid plans monitor weekly. A scan cannot fix the deep behavior of a complex custom widget, such as a custom date or time picker, so keep that limit in mind when a widget fault needs a provider fix.

Start with the free scan on Axeazy homepage, which takes about 60 seconds, is homepage only and needs no signup and no card. Then compare plans on Axeazy pricing, remembering that paid prices are shown at checkout and annual billing saves 20 to 25 percent. For a wider read, see best accessibility tools for small business and how to choose an accessibility tool, 10 criteria.

FAQ

What should a quote form ask first?

Contact details, service needed, job location and job details, in that order, each group labeled, each field labeled in words, with instructions beside the field before the visitor types.

Why is a phone icon alone not enough for a call link?

Because an icon carries no text number. A screen reader user hears the link name, not the icon, and a visitor who prints the page gets no number at all. Write the phone number as visible text inside the link, named with its purpose, such as "Call for a quote", plus the number.

How should before and after photos be described?

Put job facts in text beside each pair, such as service type, room and what changed, then give each photo alt text that matches its purpose. Never hide the only copy of a job fact inside a photo.

How do I test a sticky header for keyboard users?

Tab from the top of the page through the header to the quote form, watching where focus lands. Follow an in page link to a section, and check that the heading sits below the header, not behind it. Check the same steps on a phone.

Last checked and sources

Last checked: October 31, 2026.

Sources: WCAG 2.2 from the World Wide Web Consortium, ADA guidance on web accessibility from the Department of Justice, WAI Forms Tutorial, WAI Images Tutorial, Axeazy pricing page.

If the quote form and phone link are the first fixes, run the free scan on Axeazy capabilities to see the full list of scanned categories before choosing a plan.