Age gate pop-up accessibility: "Are you 21?" checks that work with a keyboard and screen reader

How to make an age gate or age verification pop-up usable for keyboard and screen reader users on brewery, winery, liquor, vape and dispensary sites: a real dialog, labelled birth date fields, contrast, zoom, remembering the answer and a 5-minute check.

Breweries, wineries, distilleries, liquor stores, vape shops and dispensaries often put an "Are you 21 or older?" pop-up in front of the whole site. Because it blocks every page, an age gate that doesn't work with a keyboard or screen reader locks some customers out of everything: your hours, your menu, your events and your online store. This guide shows how to check yours and what a working one looks like. Whether you need an age gate at all, and what it must ask, depends on your state and your licence, so check those rules separately; this page only covers making the one you have usable.

1. Try it with a keyboard first

Open your site in a private window (so the gate shows again), put the mouse away and press Tab. You should be able to:

See where focus is from the first press, with a visible outline (WCAG 2.4.7).
Reach the "Yes" and "No" buttons, or the birth date fields, without first tabbing through the hidden page behind the gate (WCAG 2.4.3).
Answer with Enter or Space and land back at the top of the page, not stuck in the pop-up (WCAG 2.1.2).

If focus disappears behind the overlay, or the buttons are clickable images or plain divs that Tab skips, that's the fix list.

2. Make it a real dialog

The W3C's modal dialog pattern describes what screen reader and keyboard users expect: focus moves into the dialog when it opens, Tab stays inside it while it's open, and the dialog has a name. A small working version:

<dialog id="age-gate" aria-labelledby="age-title">
  <h2 id="age-title">Are you 21 or older?</h2>
  <p>You must be of legal drinking age to enter this site.</p>
  <button type="button" id="age-yes">Yes, I'm 21 or older</button>
  <button type="button" id="age-no">No</button>
</dialog>
<script>
  const gate = document.getElementById('age-gate');
  if (!localStorage.getItem('ageOk')) gate.showModal();
  document.getElementById('age-yes').addEventListener('click', () => {
    localStorage.setItem('ageOk', '1');
    gate.close();
  });
  document.getElementById('age-no').addEventListener('click', () => {
    location.href = 'https://www.responsibility.org/';
  });
</script>

The native <dialog> element opened with showModal() moves focus inside, keeps the page behind it inert, and gives you a named dialog without extra ARIA. Use real <button> elements with text that says what happens (WCAG 4.1.2). Swap the "No" destination for whatever page your rules or your brand prefer. Note that by default Escape closes a native modal dialog; if your rules require an answer before entry, handle the cancel event rather than leaving keyboard users with no way out of the page.

3. If you ask for a birth date, label every field

Three bare boxes with "MM", "DD" and "YYYY" placeholders disappear as soon as someone starts typing and are read inconsistently by screen readers. Give the group a visible legend and each box a visible label (WCAG 3.3.2), and add autocomplete tokens so browsers can fill them (WCAG 1.3.5):

<fieldset>
  <legend>Your date of birth</legend>
  <label for="dob-m">Month</label>
  <input id="dob-m" inputmode="numeric" autocomplete="bday-month" size="2">
  <label for="dob-d">Day</label>
  <input id="dob-d" inputmode="numeric" autocomplete="bday-day" size="2">
  <label for="dob-y">Year</label>
  <input id="dob-y" inputmode="numeric" autocomplete="bday-year" size="4">
</fieldset>

Avoid a calendar-only date picker that makes people page back 30 years one month at a time. If the date is rejected, say why in text next to the fields ("Please enter a 4-digit year") rather than only turning the boxes red; see accessible form error messages.

4. Contrast, zoom and phone screens

Age gates are often white text over a dark photo of a bar or a field of hops. Check the text and both buttons with the free colour contrast checker (4.5:1 for normal text, WCAG 1.4.3), and put a solid panel behind the words. Zoom to 200% and open the site on a phone: the "Yes" button must stay on screen and reachable, not pushed off the bottom of a fixed-height box (WCAG 1.4.10).

5. Remember the answer

Asking again on every page, or every time someone follows a link from your newsletter, multiplies the barrier. Store the answer (a cookie or local storage, as above) for a reasonable time your rules allow. If you also have a cookie banner, don't stack two pop-ups on top of each other; see cookie banners and pop-ups.

Platform notes

Shopify, Squarespace, Wix and WordPress: age gates usually come from an app, plugin or code snippet. Before you install one, open the vendor's demo and do the keyboard test in step 1. If the one you have fails, ask the vendor about keyboard and screen reader support, or replace it with the dialog above (test on a duplicate theme or staging copy first).
Third-party menus and shops: an embedded online menu or ordering widget may have its own age check. Test it too, and report problems to that vendor.

Common mistakes

Hiding the whole page with CSS but leaving it in the Tab order, so keyboard users tab through invisible links behind the gate.
"Yes" and "No" as images with no alt text, or as styled divs with only a click handler.
No visible focus outline on the dark overlay.
Adding aria-hidden="true" to the page but forgetting to remove it after the visitor answers, which leaves the whole site silent for screen readers.
Showing the gate on your accessibility statement and contact page too, with no other way to reach you. Put your phone number in the gate's text as well.

A 5-minute check you can do today

Open your site in a private window and answer the gate with only the keyboard.
Turn on your phone's screen reader (VoiceOver or TalkBack) and listen: does it announce the question and both buttons? See the 10-minute screen reader test.
Check the gate's text and buttons with the contrast checker.
Zoom to 200% and confirm the buttons are still visible.
Run the free snapshot on this page against your homepage.

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 unnamed buttons, unlabelled fields, missing alt text and many contrast problems, including on a gate that's in the page code. It can't tell whether focus is trapped or lost, whether the gate reappears on every page, or how it sounds in a screen reader, which is why the keyboard and screen reader checks above matter. It also can't tell you whether your age check meets alcohol, tobacco or cannabis rules, or whether your site meets any accessibility law.

Building sites for breweries, wineries or shops? 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.

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.