Make your Gravity Forms Accessible | Janel Lucia

Janel Lucia

web developer. ux designer. #a11y enthusiast.

Make your Gravity Forms Accessible

Accessibility, Wordpress

gravity forms accessibility blog post image

Top tips on making Gravity Forms Accessible

Gravity Forms is a very user friendly WordPress plugin with a lot of handy add ons that make it easy for a developer to offer people a multitude of functionality. It tracks all forms sent and any user can easily navigate the dashboard. However it’s not accessible in any way, and it appears they have no plans on making the plugin accessible any time soon! Which is a major bummer because Gravity Forms is currently a tabbing nightmare from hell! But have no fear, today we are going to fix that and you can continue to enjoy your favourite plugin and be responsible.

You could go and try contact form 7 since they offer a more accessible plugin (and it’s free) but it does not track your submitted forms and it’s always nice to have a backup since things sometimes get lost in the cloud.

I am not going to cover the usual best practices when using forms, such as how to organize the content or further elaborate on the point of not using (re)captcha, since I’m covering the gravity forms plugin specifically. Obviously, you will still want to follow best practices when creating all forms. But let’s dive right into this:

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.

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”

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). Instead use a text field (or box!) and make sure you label it correctly!

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 time you insert a new gravity form, you can do it through the gravity forms shortcode. For example:

gravityform id=1 tabindex=false

That’s it.

Add this Plugin

WCAG 2.0 form fields for Gravity Forms is a plugin that goes a long way towards making GF more accessible. And it’s super easy to use. I literally activated the plugin and didn’t have to do anything! Why Gravity Forms doesn’t implement this awesome plugin to their code is way beyond me, I mean why wouldn’t they? –check it out

WCAG 2.0 form fields for Gravity Forms

What exactly does this plugin do?

  • Wraps radio, checkbox and list (repeater) fields in a fieldset.
  • Improves form validation by displaying an on-page message that describes how many errors there were in the page. The message contains a list of the form fields with the errors, a description of the error and a link to the field.
  • Adds aria-describedby attributes for date and website fields – providing clear instructions for screen reader users of what

Test out your site!

Everything should be working fine and you should no longer get stuck in the tabbing quicksand from hell that Gravity Forms once was. It’s a great plugin, it’s great on the user-friendly side, but is still lacking in accessibility. However, If you follow these easy steps you can enjoy the functionality and still offer fully accessible sites.

Do you use Gravity Forms and what tricks do you have to make it accessible? Comment below.

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *