Tips on Making Your Gravity Forms as Accessible as Possible

I’m currently using gravity forms and struggling with the accessibility of it. It sounds like there are no plans to make it accessible, but I know a lot of people use this plugin, so let’s make the best of it.

Why Gravity Forms?

I recognize that gravity forms is not fully accessible, so why use it?

The answer: it’s currently the most user-friendly plugin out there.

However, if you have know HTML and you have access to your config file, definitely check out setting up accessible forms using Contact Form 7.

Overall, gravity form isn’t too far off.

The only issues I’ve found have workarounds or will be implemented soon I hope (at least in terms of the output. No comment on the admin panel side of things). All detailed below.

Follow the Usual Best Practices

I am not going to cover the usual best practices when using forms, such as how to organize the content or further belabour the point of not using (re)captcha, since I’m covering specifically using the gravity forms plugin. Obviously, don’t forget them.

HTML5 Input Types

Turn on the ‘Output in HTML5′ under the settings page. Then use the most appropriate fields, especially those under the advance fields. You can make use of the newer input types, such as URL or email.

To help your users, you can use input masks wherever possible so that users don’t have to worry about entering data in a specific format, allowing the form to force it into the correct format.

If you want to support HTML5 elements pre-IE10, then make sure you’re running HTML5shiv, Modernizr, or something similar if it’s not built into your theme.

Avoid the “Presets”

I say use the most appropriate input so that you’re using HTML5 input types, but avoid the gravity form preset groups, such as ‘name’ (which inserts 2 (or more) fields for first and last names) or address (which adds all the standard postal address fields).

You also want to avoid the pricing fields, because

there is no proper one on one label-input relationship.

Thanks to Rian who pointed this out (in the comments).

Fieldset Improv

One of the accessibility techniques tells us that we should be using fieldset and legend to group related fields. The group might be a set of checkboxes, radio buttons, or logically related inputs (such as a mailing address).

Unfortunately, even though gravity forms provides an easy way to add multiple checkboxes and radio buttons as well as some preset groups, it doesn’t group the inputs in a fieldset and with a legend for the description.

However, you can do this manually. Gravity forms provides an “HTML Box” option where you can include the HTML you need, and because it simply inserts whatever you put in the box, your HTML elements do not need to be opened and closed in the same box (as long you can get it to properly validate).

In the “opening” HTML content box, include this code:

<fieldset class="gfieldset">
<legend>Fieldset Description</legend>
<ul>

And yes, the <ul> is necessary, because each gravity form “section” is in a <li> and if you don’t have the <ul>, your page either won’t validate and/or the browser will automatically close your <fieldset> for you.

Insert all the fields (or just the set of radio buttons or checkboxes)

</ul>
</fieldset>

Finally, because gravity forms will suddenly add bullet points to lists inside a HTML content box, add some CSS to your page to remove the list style type:

list-style-type:none;

The easiest way is probably to do it inline within each <ul> that you need it for, but if you want to do it with a CSS rule, then it’s just a tad more complicated because gravity forms has a lot of style rules, many which already have !important in them.

If you only have one or two forms, you can use the ID selector of the form, since that’s the easiest way.

#gform_1 .gfieldset ul li {
list-style-type: none !important;
}

If you prefer to have just one rule for all your forms, you can add the following CSS rule across the site:

body .gform_wrapper div.gform_body ul.gform_fields li.gfield.gfield_html .gfieldset ul li{
list-style-type: none !important;
}

Note that both still rely on your having the gfieldset class in the fieldset tag.

If you need further explanation on how to overwrite CSS rules, check out the W3C’s explanation of CSS priority level of selector.

Disabling TabIndex

If you include links anywhere in your form, they will be skipped when tabbing through the form because gravity forms inserts tabindex based solely on the input elements added through the gravity form widgets.

While you need to do this for every instance that you insert a gravity form, you can do it through the gravity forms shortcode. For example:

[gravityform id=1 tabindex=false]

That’s it.

If you want to do it for all forms and want to edit your functions.php file, then you can use the snippet of code provided by the help documentation on tabindex.

What’s Still Missing?

The only thing I haven’t been able to do is to add ARIA attributes to fields. The only one that needs adding pre-validation is aria-required for required fields. (Unless turning on the HTML5 output uses polyfill, in which case role=slide with aria-valuemin & aria-valuemax need to be added for range input.)

After validation, aria-invalid=true should be added for every field that has input not meeting its constraints and the ARIA role alert should be added to HTML element with the error message.

As per the using WAI-ARIA in HTML document, ARIA should not be explicitly set for any of the other input types unless in combination with the list element.

I submitted the request to the development team and this is the response I got:

This should be doable for us. I will look into what it will take to implement it. -Alex Cancado, Gravity Forms

Therefore, I’m hopeful that it will be added.

In the mean time, you could have a small piece of JavaScript that would insert the aria-required attribute (if not present) when the required attribute is present. The ones for the alert role and aria-invalid attributes are included in the examples of the documents linked above.

Conclusion

Gravity forms is great on the user-friendly side, but is still lacking in accessibility. However, I wrote this post because I know a lot of people are restricted in what they can access and what plugins they use.

Still, if you can edit your config file, I’d definitely suggest giving Contact Form 7 a try. (I’ll be doing that myself next week.)

8 thoughts on “Tips on Making Your Gravity Forms as Accessible as Possible

  1. Hi Cynthia,

    Thanks for posting this!
    Your solution for adding a fieldset and legend is a great one.

    Maybe you could add that with combination input fields, like the address, there is no proper one on one label-input relationship, so avoid adding those for an accessible form, better use a plain text field for that.
    This is also the case with the Name field. The option normal and extended don’t provide a one on one label-input relationship.
    Also the price (amount) input fields make a mess of this.

    Lately I discovered Contact Form 7, that plugin recently added accessible WAI-ARIA to the forms. And it gives you complete controle over the HTML you add.
    A second plus for this plugin is that the backend is accessible.

    But you are right, Gravity Forms is a great flexibel and user friendly plugin, it just needs some work.

    Kind regards,
    Rian Rietveld

    1. Thanks! I’ll be sure to update the post with your comments.

      Thanks for the Contact Form 7 info as well. I suppose it’s been some time since I last checked CF7, so it’s great to know that it’s become more accessible and flexible. I’ll definitely check it out.

  2. hey Cynthia,

    I just looked briefly at Visual Form Builder Pro, it seems actually quite good!
    No WAI-ARIA , but an good accessible backend.
    There is a demo you can try at http://demo.vfbpro.com

    The generated seems HTML good, although every tabel/input is put into list items, personally I don’t like that, but it’s not wrong.

    The plugin has a lot of options like Gravity Forms, as I can see it in a quick scan it can do about the same.

    There is hope ;)

Leave a Comment

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s