Altwise

Email newsletter and SMS signup forms: accessible signup boxes and pop-ups

How to make the newsletter, discount pop-up and text-message signup forms on a small business website accessible: real labels, named buttons, announced success and errors, pop-ups that close with Escape, sticky bars that don't hide focus, and clear SMS consent text.

Almost every small business site has a "Join our list" box somewhere: a footer email field, a "Get 10% off" pop-up, a text-message club for a salon or brewery, or a church's weekly update signup. It's usually the smallest form on the site, so it gets the least care, and it often fails people who use a keyboard, a screen reader or a phone with large text. Around the holidays many businesses add pop-ups and text signups to grow their list, so it's a good time to check yours.

1. Give the email field a real label

A field that only has grey placeholder text like "Your email" loses its name as soon as someone starts typing, and some screen readers don't read placeholders at all. Use a visible label, or at minimum a label that screen readers can read, connected to the field (WCAG 3.3.2, WCAG 1.3.1). Add autocomplete="email" and type="email" so phones offer the right keyboard and can fill it in (WCAG 1.3.5).

<form action="/subscribe" method="post">
  <label for="nl-email">Email address</label>
  <input id="nl-email" name="email" type="email"
         autocomplete="email" required>
  <button type="submit">Join the newsletter</button>
  <p id="nl-status" role="status"></p>
</form>

2. A button that says what it does

An arrow icon or a paper-plane symbol as the only button content is read as just "button" by many screen readers. Use words such as "Join the newsletter" or "Sign up", or give an icon button an accessible name (WCAG 4.1.2). The button and field should be easy to tap on a phone, at least 24 by 24 CSS pixels (WCAG 2.5.8).

3. Announce success and errors

Many signup forms show "Thanks, you're in!" or "Please enter a valid email" in small text without moving focus, so screen reader users never hear it. Put the message in a status area like the role="status" paragraph above so it is announced (WCAG 4.1.3). Errors should say what went wrong in text, next to the field, not only by turning the border red (WCAG 3.3.1). See accessible form error messages.

4. Signup pop-ups that people can close

A "Get 10% off" pop-up should move keyboard focus into itself when it opens, keep focus there while it is open, close with the Escape key and a close button with a name like "Close", and send focus back where the person was (WCAG 2.4.3, WCAG 2.1.2). On phones, make sure the close button isn't off-screen when text is zoomed. Opening a pop-up the moment the page loads, or again on every page, interrupts screen reader and keyboard users the most; waiting until someone scrolls or showing it once is kinder. See cookie banners, pop-ups and chat widgets.

5. Sticky signup bars shouldn't hide focus

A signup bar fixed to the bottom of the screen can cover the link or field a keyboard user has just moved to. Check that the focused item stays at least partly visible (WCAG 2.4.11), and let people dismiss the bar.

6. Text-message (SMS) signups

Text clubs usually ask for a phone number and a consent checkbox. Label the phone field, use type="tel" and autocomplete="tel", and write the consent text as real text next to a real checkbox with its own label, not as tiny grey print or text inside an image (WCAG 1.4.3). Don't make the only way to join "text JOIN to 12345" shown inside a graphic; put it in text too. The consent rules for marketing texts and emails are a separate legal matter that this guide doesn't cover.

7. Embedded signup forms from email services

Many sites paste a signup form from an email marketing service. Some of those embeds are fine, but others have missing labels, low-contrast placeholder text or an unnamed button, and the style you add can make it worse. Test the embedded form on your own page with the checks below, and use the service's settings to add visible labels where it offers them. See embedded form builders.

8. Captchas and "prove you're human" steps

Spam protection on a newsletter box is reasonable, but a puzzle captcha can stop real people from joining. Prefer invisible checks or a hidden honeypot field. See login and captcha accessibility.

Common mistakes

A 5-minute check you can do today

  1. Find your signup box. Click into the field and start typing. Can you still tell what the field is for?
  2. Use only the Tab key to reach the field and the button, type an address and press Enter. Did it work, and could you see where focus was?
  3. Submit an empty or wrong address. Is the error written in words next to the field?
  4. If you have a pop-up, open it, press Escape, and check that focus returns to the page.
  5. Turn on VoiceOver or TalkBack, sign up with a test address, and listen for the thank-you message.

What a scan can and can't check here

Automated scans find only part of the barriers on the pages they visit. Our scan can flag form fields with no label, buttons with no accessible name and many contrast problems in a footer or signup bar. It can't fill in and submit your form, hear whether a success message is announced, test a pop-up that opens later or with a keyboard, or tell whether your site meets any law. Our Fix-Pack report lists what the scan found and how to fix each item.

Building signup forms and pop-ups for client sites? The agency 5-pack gives you five white-label reports ($499, use within 12 months).

This is general technical guidance, not legal advice, and it doesn't certify compliance with the ADA or any law, or protect against claims. Altwise isn't affiliated with any email marketing service, SMS platform or website builder.

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

  1. Free homepage snapshot. Your top 3 issues in about a minute. No signup, no card.
  2. $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.