Embedded form accessibility: Google Forms, Jotform, Typeform and other form builders

How to make embedded quote, booking and intake forms from form builders usable for everyone: iframe titles, real labels, choices and ratings, errors and confirmations, CAPTCHA, theme contrast and what the vendor controls.

Lots of small businesses don't build their own forms. They embed one from a form builder such as Google Forms, Jotform, Typeform, Wufoo, Microsoft Forms or a form plugin, for quotes, bookings, intake, applications and surveys. The embed sits on your page, so to a customer it's your form, and if they can't fill it in, they can't reach you. The good news is that most of the common barriers come from settings and wording you control. Here's what to check.

1. Give the embedded form a name

Most builders embed with an iframe. Give the iframe a short title that says what the form is, so screen reader users know what they've landed in, and put a visible heading above it. (WCAG 4.1.2)

<h2 id="quote-heading">Request a free quote</h2>
<iframe src="https://forms.example.com/your-form-id" title="Request a free quote form" width="100%" height="900"></iframe>
<p>Prefer not to use the form? Call 918-555-0100 or email [email protected].</p>
<!-- example form address, number and email; use your real details -->

2. Real labels, not placeholder text

Some form themes show the question only as grey text inside the box, which disappears as soon as someone starts typing and is often too pale to read. Turn on visible field labels in the builder's settings, write each question as a full label ("Your email address"), and mark required fields in words, not only with a red asterisk. (WCAG 3.3.2, WCAG 1.3.1)

If you can edit the HTML, this is the pattern to aim for:

<label for="q-email">Your email address (required)</label>
<input id="q-email" name="email" type="email" autocomplete="email" required>
<label for="q-details">What do you need help with? (optional)</label>
<textarea id="q-details" name="details"></textarea>

3. Choices, ratings and file uploads

Group related choices with a question that is read out with them (a fieldset and legend in HTML; in a builder, put the question in the field's label, not in a separate text block above it). Avoid star or emoji ratings that only work with a mouse, give scales words at both ends ("1 = not likely, 5 = very likely"), and say which file types and sizes an upload accepts before someone picks a file. (WCAG 2.1.1, WCAG 1.3.1)

<fieldset>
  <legend>Best time to call you (required)</legend>
  <label><input type="radio" name="time" value="morning" required> Morning, 8 am to noon</label>
  <label><input type="radio" name="time" value="afternoon"> Afternoon, noon to 5 pm</label>
</fieldset>
<label for="q-file">Photo of the problem (optional, JPG or PNG, up to 10 MB)</label>
<input id="q-file" name="photo" type="file" accept=".jpg,.jpeg,.png">

4. Errors and the thank-you message

Submit the form with a required field empty. The error should say in words what to fix next to the field, not just turn the box red, and keyboard focus should not get lost. After a successful submit, the confirmation should be text that is announced or that focus moves to, and it should say what happens next ("We'll reply within one business day"). (WCAG 3.3.1, WCAG 4.1.3)

<p role="status">Thanks, we've got your request. We'll reply by email within one business day.</p>
<!-- example wording; promise only what you actually do -->

See accessible form error messages.

5. One-question-at-a-time and multi-page forms

Conversational forms that show one question per screen can work well, but test them with a keyboard: can you go back, does focus land on the new question, and is the progress ("Question 3 of 8") written in text? On long multi-page forms, keep answers when someone goes back, warn before a session times out, and don't ask for the same information twice. (WCAG 2.4.3, WCAG 3.3.7)

6. CAPTCHA and spam protection

Puzzle and image CAPTCHAs block some people completely. Where your builder offers a choice, prefer invisible or checkbox-style spam protection, or a honeypot field, over picture puzzles, and always give another way to reach you. (WCAG 3.3.8) See logins and CAPTCHAs.

7. Theme colours, size and mobile

Brand themes often use pale grey labels, thin borders that are hard to see, or white text on a light button. Check label and button contrast (4.5:1 for normal text), make sure field borders and the keyboard focus outline are visible (3:1), and try the form at 200% zoom and on a phone. See the contrast checker guide and mobile, zoom and tap targets.

8. What the vendor controls

The code inside the embed belongs to the form builder, so some problems can only be fixed by them. Test your form with a keyboard, ask the vendor for its accessibility documentation (often a VPAT), and if something can't be fixed in settings, consider a simple form on your own site or give a phone and email alternative next to the embed. Don't describe the form as "fully accessible" unless you have checked it. See what a VPAT is.

Common mistakes

The iframe has no title, so it's announced only as "frame".
Questions shown only as placeholder text.
Required fields marked only with a red asterisk or red border.
Star, emoji or slider ratings that need a mouse.
A picture-puzzle CAPTCHA with no other way to get in touch.
A thank-you message that appears silently and isn't announced.
A brand theme with pale labels and no visible focus outline.

A 15-minute check you can do today

Using only Tab, Shift+Tab, Enter and Space, fill in and submit your form. Can you always see where you are?
Submit it with a required field empty. Does the error say what to fix, in words?
Start typing in a field. Can you still see the question?
Zoom to 200% on a laptop and open the page on a phone. Is anything cut off?
Check there's a phone number or email next to the form.

What a scan can and can't check here

Our scan is automated, so it finds only part of the barriers on the pages it visits: a missing iframe title, unlabelled fields and buttons, low contrast and similar code problems. Content inside a third-party embed may not be fully checked, and no automated tool can submit your form, judge whether your wording makes sense or tell you how it sounds in a screen reader. Use the 15-minute check above as well.

This is general technical guidance, not legal advice, and it doesn't certify compliance with the ADA or any law, or protect against claims.

Want the fixes written for you?

Start with a free homepage snapshot. The $149 Fix-Pack scans up to 10 pages and gives copy-paste fixes for your platform within 48 hours, with a 14-day refund promise. See a sample report first.

This is general technical guidance, not legal advice, and it does not certify compliance with the ADA or any law.

Related guides

All guides

This guide is general technical information, not legal advice. Following it does not certify ADA or any legal compliance. Automated checks find only part of accessibility barriers.

Check your own site, then decide

Free homepage snapshot. Your top 3 issues in about a minute. No signup, no card.
$149 Fix-Pack, if you want the full list. Up to 10 pages scanned, issues ranked by impact, copy-paste fixes for your platform, delivered within 48 hours, plus one re-scan after you apply them.

Get my free snapshot Order the Fix-Pack – $149

14-day refund promise. See a sample report first. A technical report, not legal advice; automated checks find only part of accessibility barriers.