Age verification with fallback for non-javascript enabled browsers

[DVogel]

How do you handle an age verification workflow? I am currently working on a brewery website that needs to ask a simple question, "Are you 21 or older?".

This seems to be simply a matter of displaying a modal pop-up with a yes and no button which could easily be handled in jquery. But what if the user has javascript turned off?

Another possible solution is to have a splash page then redirect based on the answer, but wouldn't this have a dramatically negative effect on SEO?

Then of course there is the issue of setting a cookie for future visits by the user. Is there a recommended expiry for the cookie?

I apologize for the incoherent flow of ideas, it's my brain dump and I'm still not really sure I've encapsulated the entirety. Any help and ideas are greatly appreciated.

Thxs

[Lynda-S · Accepted solution]

Here is how I have handled age verification workflows before that satisfied the bank that approved a merchant account for the site.

I am using the Foundation Framework so upon page load I have the modal open up and they have two options. I am Enter - I am 18+ or Exit - I am Under 18. (Exit takes them to Google.) If they hit enter the modal closes.

I don't worry too much about javascript being enabled, however, you can handle it two ways.

1) Display a CSS modal that won't allow them to use the site unless they enable JS. Which may turn off some people if they have to enable JS. or 2) Simply provide an alert bar at the top of the site that says "This site works best with JavaScript enabled. You must be 21+ to use this site."

I would avoid the splash screen, I have never liked them, and there are many reasons to not use them, SEO included.

For cookies I set a session cookie. I have the age verification in my template so it appears on ANY page that the person enters (this was a requirement by the bank for a merchant account). The cookie is good as long as that session is open. The one exception to this is when a person goes to a secure URL (IE: site-name.worldsecuresystems.com) you would see the pop-up again because cookies do not transfer cross-domain. To work around this I used a little JS to not show a cookie for the secure URL. In my sites case the secure URL was only on the checkout page thus you were already in the site before you see this page so the age verification isn't needed on that page.

For better understanding here is the code I used for age verification. As a note my code is for the Foundation Framework but you can modify it to work with your site's code. I am using jQuery Cookie for handling cookies.

HTML:

<div id="age" data-reveal data-options="close_on_background_click: false" class="reveal-modal medium">

      <h2 class="text-center">Age Verification for [Site Name]</h2>

      <h3 class="bold text-center">You must be at least 18 years of age to access this website.</h3>

  <div class="row">

     <div class="small-6 columns">

        <h3 class="text-center"><a href="http://www.google.com/">Under 18</a></h3>

        <p class="text-center">I am under 18.</p>

     </div>

     <div class="small-6 columns">

        <h3 class="text-center"><a class="close-modal">18+ (Enter)</a></h3>

        <p class="text-center">I am 18+ years old.</p>

     </div>

  </div>

</div>

JS:

var domain = window.location.host

var noAge = 'site-name.worldsecuresystems.com'

    if(domain === noAge) {

        //DO NOTHING

    } else {

        if($.cookie('site-name-age') === undefined) {

            $('#age').foundation('reveal', 'open');

        }

    }

    $( ".close-modal" ).on( "click", function() {

        $('#age').foundation('reveal', 'close');

        $.cookie('site-name-age', '1', {path:'/'});

    });

Hope this helps!

[DVogel]

Lynda

Thank you for your detailed explanation. I will be implementing your solution on the site.

Thxs,

~David

[TheBCMan]

Without javascript... tricky... that means no cookies.... Assuming you could do CSS, you are going to need to do something like this:

Modal - Pure CSS (no Javascript) - CodePen

Ask the question in the modal, yes or no, if they answer NO hide all the content on the page because you wont be able to re-direct the URL without using javascript.

[Lynda-S]

Very nice example of a CSS modal. Learned something new looking at the pen. =>

[DVogel]

@TheBCMan - Another great answer!

Thxs,

~David

[TheBCMan]

DVogel: No worries, just note that Lynda's example uses Javascript, not sure if your no javascript is still a requirement.