Title: WCAG 2.0 form fields for Gravity Forms
Author: ovann86
Published: <strong>January 28, 2015</strong>
Last modified: April 24, 2019

---

Search plugins

![](https://ps.w.org/gravity-forms-wcag-20-form-fields/assets/banner-772x250.png?
rev=1734686)

This plugin **hasn’t been tested with the latest 3 major releases of WordPress**.
It may no longer be maintained or supported and may have compatibility issues when
used with more recent versions of WordPress.

![](https://ps.w.org/gravity-forms-wcag-20-form-fields/assets/icon-128x128.png?rev
=1734679)

# WCAG 2.0 form fields for Gravity Forms

 By [ovann86](https://profiles.wordpress.org/ovann86/)

[Download](https://downloads.wordpress.org/plugin/gravity-forms-wcag-20-form-fields.zip)

 * [Details](https://wordpress.org/plugins/gravity-forms-wcag-20-form-fields/#description)
 * [Reviews](https://wordpress.org/plugins/gravity-forms-wcag-20-form-fields/#reviews)
 *  [Installation](https://wordpress.org/plugins/gravity-forms-wcag-20-form-fields/#installation)
 * [Development](https://wordpress.org/plugins/gravity-forms-wcag-20-form-fields/#developers)

 [Support](https://wordpress.org/support/plugin/gravity-forms-wcag-20-form-fields/)

## Description

> This plugin is an add-on for the Gravity Forms plugin. If you don’t yet own a 
> license for Gravity Forms – [buy one now](https://rocketgenius.pxf.io/dbOK)! (
> affiliate link)

**What 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 format is required for the field.
 * Adds aria-describedby attributes for fields that have failed validation – providing
   clear instructions for screen reader users of what the field error is. Description
   used is the default validation message for the field, or if set, the validation
   message for the field.
 * Disables the Gravity Forms configured tabindex – this stops users from being 
   able to tab between fields and on-page links.
 * Changes links in the form body, such as field descriptions or HTML fields, so
   they open in a new window. A title is added or appended to any existing title
   for screen reader users which reads ‘this link will open in a new window’.
 * Improved file upload field – wrapped in field set, clearly identifies to screen
   reader users if any file size of file type restrictions have been set of the 
   field.
 * Improved field instructions – if a description has been provided for the field,
   the field is ‘described by’ the description, using the aria-describedby attribute

> See a demo of this plugin at [demo.itsupportguides.com/gravity-forms-wcag-20-form-fields](http://demo.itsupportguides.com/gravity-forms-wcag-20-form-fields/)

**How to I use the plugin?**

Simply install and activate the plugin – no configuration required.

**Have a suggestion, comment or request?**

Please leave a detailed message on the support tab.

**Let me know what you think**

Please take the time to review the plugin. Your feedback shows the need for Gravity
Forms to meet the WCAG 2.0 requirements natively, and will help me understand the
value of this plugin.

**Please note:**

 * Accessibility is a complicated topic and sometimes there are different opinions
   on how to best achieve an accessible website. Accessible forms are even harder
   to achieve, with many different approaches. If you have a suggestion, comment
   or request please leave a detailed message on the support tab.
 * This plugin does not cover other aspects of accessibility, such as content order,
   clear instructions, colour contrast etc.
 * You will need to ensure that your websites theme is accessible.

**Disclaimer**

_Gravity Forms is a trademark of Rocketgenius, Inc._

_This plugins is provided “as is” without warranty of any kind, expressed or implied.
The author shall not be liable for any damages, including but not limited to, direct,
indirect, special, incidental or consequential damages or losses that occur out 
of the use or inability to use the plugin._

## Screenshots

 * [[
 * Shows the improved validation message that is displayed when the form page contains
   errors. Validation message describes how many errors there were on the page and
   a list of the fields and errors. Each error is a link to the field. This message
   gets the browsers ‘focus’ when it is loaded – allowing screen reader users easy
   access to the information.
 * [[
 * Shows list field with ‘buttons’ instead of images to add and delete rows – buttons
   are styled like the previous images but are keyboard accessible.

## Installation

 1. This plugin requires the Gravity Forms plugin, installed and activated
 2. Install plugin from WordPress administration or upload folder to the `/wp-content/
    plugins/` directory
 3. Activate the plugin through the ‘Plugins’ menu in the WordPress administration
 4. The radio, checkbox and repeater list fields will now be automatically modified
    so that they meet the accessibility requirements.

## FAQ

  I still see errors on my form

Whilst this plugin goes a long way to taking a Gravity Form towards WCAG 2.0 compliance,
there are still some things that haven’t been looked at yet.

If you’re having troubles or even better know a solution, please leave a detailed
message on the support tab.

I am aware of three issues that are yet to be resolved – duplicate ID’s for checkbox
lists, duplicate ID’s for multi-page form wrappers (the hidden pages have the same
ID), and duplicate ID’s for the ‘Save and continue later’ link/button.

  Opening links in new windows – isn’t that bad practice?

Typically forcing links to open in a new window is bad practice, both from a usability
and accessibility point of view. However when it comes to forms there is reason 
enough to do this – if the user clicks on the link they are taken away from the 
form – loosing any data they may have provided.

This plugin uses jQuery to modify the form once the browser has loaded it, any links
in the form are changed to open in a new window (target=’_blank’), then a title 
is added (or appended to the existing title) which reads ‘this link will open in
a new window’.

This is the [H33: Supplementing link text with the title attribute](http://www.w3.org/TR/WCAG20-TECHS/H33.html)
technique.

Why not use the [C7: Using CSS to hide a portion of the link text](http://www.w3.org/TR/2014/NOTE-WCAG20-TECHS-20140916/C7)
technique?

I’m concerned it would have a negative consequence on SEO, because:

 1. Search engines may down-rate your website, thinking you’re attempting the black
    hat practice of stuffing a page with keywords that may not have any relevance to
    the content.
 2. Search engines may index the links with the hidden text. For example, ‘document
    title this link will open in a new window’ instead of ‘document title’.

I’m willing to be convinced otherwise. But my goal is to make a Gravity Form accessible
for everyone – which needs to take into account how it affects search engines.

  How is the plugin tested

The plugin is tested using screen-reader software JAWS and the latest version of
Internet Explorer, Firefox and Chrome.

The plugin is developed using the latest version of Gravity Forms. The plugin may
work in previous versions but could have mixed results. Only the latest version 
of Gravity Forms can be supported.

The aim of the plugin is to make forms created using Gravity Forms have valid HTML
and comply with WCAG 2.0 – level AA.

Each change the plugin makes to a Gravity Form has been decided through research
into best practice for usability and accessibility.

  How do I disable the tabindex on the validation message

I DO NOT recommend removing the tabindex.

After considered research I am of the belief that tabindex with a value of =-1 is
perfectly fine, and infact quite helpful in making critical messages such as a validation
message appear immidately for screen reader users.

With that said, if you want to disable it you can add this code to your theme’s 
functions.php file, below the starting <?php line.

    ```
    add_action('itsg_gf_wcag_disable_tabindex', function () {
        return true;
    });
    ```

## Reviews

![](https://secure.gravatar.com/avatar/fbe9d8b8e3580ba760b7af40d117c0ce53d495ca80c80d0f35a1878971b6eca5?
s=60&d=retro&r=g)

### 󠀁[Very helpful](https://wordpress.org/support/topic/very-helpful-809/)󠁿

 [Manny (emanweb)](https://profiles.wordpress.org/emanweb/) January 25, 2020

Thanks a lot for making this plugin. Very useful for people with disabilities.

![](https://secure.gravatar.com/avatar/58b9303756240a6d84e68e12383a3a92f016cc2f14ad2f06ab94a7c33b95a614?
s=60&d=retro&r=g)

### 󠀁[Excellent. A critical addition to Gravity Forms.](https://wordpress.org/support/topic/excellent-a-critical-addition-to-gravity-forms/)󠁿

 [jamieschmid](https://profiles.wordpress.org/jamieschmid/) December 4, 2019

Thank you for this plugin. It should be in GF by default — I am genuinely curious
why such an established plugin is not WCAG 2.0 compliant out of the box – it doesn’t
take anything away, and only adds usability.

![](https://secure.gravatar.com/avatar/cc37f56ad1364c97a49a202748f99f4aadebd01b752e73bafaa21ed952379961?
s=60&d=retro&r=g)

### 󠀁[Awesome plugin, this should be native to Gravity Forms](https://wordpress.org/support/topic/awesome-plugin-this-should-be-native-to-gravity-forms/)󠁿

 [thewebtailors](https://profiles.wordpress.org/thewebtailors/) September 3, 2019

Thank you so much for creating and maintaining this plugin!

![](https://secure.gravatar.com/avatar/e375f8b274badb1c1c5d360299feaba06ec1658a48a3fe983d77ca149b93b15c?
s=60&d=retro&r=g)

### 󠀁[Perfect](https://wordpress.org/support/topic/perfect-4740/)󠁿

 [certainlyakey](https://profiles.wordpress.org/certainlyakey/) January 18, 2018

Hopefully vanilla Gravity Forms will slowly move in this direction.

![](https://secure.gravatar.com/avatar/10fbb9e69ca54a0ebc65f78d4c7a02e13e4fcbdaff4f8612eac13c3b9b82fbe5?
s=60&d=retro&r=g)

### 󠀁[Install it. Everywhere.](https://wordpress.org/support/topic/install-it-everywhere-2/)󠁿

 [Emma Edgar Valcq](https://profiles.wordpress.org/emmaee/) June 28, 2017

When tasked with making a site ADA compliant, every little change is a headache.
When I went through the WAVE tester on a page with a Gravity Form I freaked out 
a little and had no idea how I was going to fix it. Then I found this plugin… It
worked instantly, and perfectly. Nothing to configure or set up. If you’re on the
fence, don’t be. Just pull the plug, don’t think about it. You’re wasting your time.
It works. A HUGE THANK YOU to the developers. I don’t know what I would have done
without this plugin!

![](https://secure.gravatar.com/avatar/eb1b0ec9e2e2cb7adad0a1ea5463be81925d5362014520ee56513e5b056a4da1?
s=60&d=retro&r=g)

### 󠀁[Brilliant](https://wordpress.org/support/topic/brilliant-804/)󠁿

 [yitwail](https://profiles.wordpress.org/yitwail/) April 21, 2017

Great plugin, tremendous time saver. 🙂

 [ Read all 12 reviews ](https://wordpress.org/support/plugin/gravity-forms-wcag-20-form-fields/reviews/)

## Contributors & Developers

“WCAG 2.0 form fields for Gravity Forms” is open source software. The following 
people have contributed to this plugin.

Contributors

 *   [ ovann86 ](https://profiles.wordpress.org/ovann86/)

“WCAG 2.0 form fields for Gravity Forms” has been translated into 8 locales. Thank
you to [the translators](https://translate.wordpress.org/projects/wp-plugins/gravity-forms-wcag-20-form-fields/contributors)
for their contributions.

[Translate “WCAG 2.0 form fields for Gravity Forms” into your language.](https://translate.wordpress.org/projects/wp-plugins/gravity-forms-wcag-20-form-fields)

### Interested in development?

[Browse the code](https://plugins.trac.wordpress.org/browser/gravity-forms-wcag-20-form-fields/),
check out the [SVN repository](https://plugins.svn.wordpress.org/gravity-forms-wcag-20-form-fields/),
or subscribe to the [development log](https://plugins.trac.wordpress.org/log/gravity-forms-wcag-20-form-fields/)
by [RSS](https://plugins.trac.wordpress.org/log/gravity-forms-wcag-20-form-fields/?limit=100&mode=stop_on_copy&format=rss).

## Changelog

#### 1.7.2

 * Fix: resolve conflict with Gravity Forms 2.4.7 “Added accessibility enhancements”.
   The combination of this plugin and Gravity Forms 2.4.7 or higher would break 
   the list field add and remove buttons
 * Maintenance: improved targetting for making links in forms open in a new window

#### 1.7.1

 * Fix: Improve PHP 7.2 compatibility – use ‘__return_false’ instead of create_function

#### 1.7.0

 * Maintenance: review targeting for field changes and what changes are made to 
   fields.
 * Maintenance: removed unnecessary changes that GravityForms now natively does.

#### 1.6.0

 * Fix: make radio ‘other’ option accessible by applying hidden label to both the
   radio and input fields.
 * Maintenance: remove redundant aria-required changes, now provided natively in
   Gravity Forms.
 * Maintenance: Change how plugin detects if Gravity Forms is installed and active.

#### 1.5.1

 * Fix: resolve issue with radio field ‘other’ option displaying inconsistently.
 * Fix: resolve issue with validation (error) message not correctly display the 
   number and list of failed fields.

#### 1.5.0

 * Maintenance: Updates for Gravity Forms 2+
 * Maintenance: Move JavaScript from footer to separate file
 * Maintenance: Add minified copies of JavaScript and CSS files

#### 1.4.6

 * Fix: Add support for left and right label placement
 * Maintenance: Move JavaScript out of page footer to its own file.
 * Maintenance: Move CSS file to \css\ plugin directory.

#### 1.4.5

 * Maintenance: Updates to better support translation.
 * Maintenance: General tidy up of code, working towards WordPress standards.

#### 1.4.4

 * Fix: Resolve issue with radio fields not being wrapped in a fieldset.
 * Fix: Remove default Gravity Forms validation message from appearing (‘There was
   a problem with your submission. Errors have been highlighted below.’).
 * Fix: Resolve issue with field HTML changes not applying when the label contains
   an HTML encodable character, e.g. a quote (‘).
 * Fix: Resolve issue with list of linked errors in validation message when an error
   message contained a link.
 * Maintenance: Enqueue JavaScript later to help ensure it does not load before 
   jQuery has loaded.

#### 1.4.3

 * Fix: Resolve issue with loading entry ‘Print’ page.
 * Fix: Resolve ‘$_SERVER[‘HTTP_REFERER’] undefined’ error message which appeared
   in limit circumstances.
 * Maintenance: Changed several ‘else’ statements to ‘elseif’ to provide a very 
   slight improvement with the PHP execution time.
 * Maintenance: Pass translatable text in JavaScript function through json_encode()
   to prevent potential security issues through a XSS (cross site scripting) exploit.
   This is a security precaution.
 * Maintenance: Added blank index.php file to plugin directory to ensure directory
   browsing does not occur. This is a security precaution.
 * Maintenance: Added ABSPATH check to plugin PHP files to ensure PHP files cannot
   be accessed directly. This is a security precaution.

#### 1.4.2

 * Fix: Resolve issue with ‘Save and Continue Later’ link opening a new blank window.

#### 1.4.1

 * Maintenance: Refining code responsible for wrapping the name field in a fieldset.

#### 1.4.0

 * Fix: Resolve additional close fieldset on single file upload fields.
 * Fix: Resolve issue with aria-described by applying on date fields.
 * Feature: Name field now wrapped in a fieldset.
 * Feature: Email field now wrapped in a fielset when ‘Enable Email Confirmation’
   enabled.
 * Feature: Address field now wrapped in a fieldset.
 * Feature: Added action hook to disable tabindex=-1 on validation error message.

#### 1.3.0

 * FEATURE: Add support for multisite WordPress installations.

#### 1.2.11

 * Maintenance: change plugin name from ‘Gravity Forms – WCAG 2.0 form fields’ to‘
   WCAG 2.0 form fields for Gravity Forms’
 * Maintenance: change constructor so plugin load is delayed using the ‘plugins_loaded’
   action – this ensures the plugin loads after Gravity Forms has loaded and functions
   correctly.
 * Maintenance: resolve various PHP errors that were appearing in debug mode, but
   did not affect functionality.

#### 1.2.10

 * Fix: change field layout for radio and checkboxes to allow a checkbox/radio field
   to not use a fieldset if only one option exists.

#### 1.2.9

 * Fix: resolve undeclared variable issue in fieldset conditions (change $fieldtype
   to $field_type).
 * Fix: resolve issue with radio fields incorrectly being marked as required – each
   item in the radio field was being marked as required (using aria-required=true)
   when only the fieldset should have been. Reference: http://stackoverflow.com/
   questions/8509481/aria-required-in-a-radio-group= 1.2.8
 * Fix: resolve issue with radio field ‘other’ option not including a label. Added
   screen-reader only labels for radio and input field assigned to ‘other’ option.
 * Fix: resolve issue with jQuery script loading before jQuery was available. Moved
   to footer using wp_footer action.

#### 1.2.8

 * Feature: add condition to exclude links with a class of ‘target-self’ from opening
   in a new window.

#### 1.2.7

 * Fix: fixed error in code for date field – resulting in on screen PHP error messages
   or the field not appearing.

#### 1.2.6

 * Feature: field description now included in a fields ‘aria-describedby’ attribute–
   giving screen reader users easy access to the fields description when jumping
   through fields and skipping page content.
 * Feature: wrap single file upload field in a field set – providing screen reader
   users with the label of the upload field – instead of hearing ‘browse’ they will
   hear the title of the field followed by ‘file upload’
 * Feature: add ‘accept’ attribute to single file upload field, providing screen
   reader users a list of accepted file types when they select the file upload fields
 * Feature: add screen reader only text below single file upload fields, providing
   screen readers users a human understandable description of the file type and 
   file size restrictions placed on the field (if specified for the field)
 * Maintenance: removed HTML ‘required’ attribute that was being applied by plugin–
   this was causing issues. Will be restored once this has been resolved. aria-required
   still applied to required fields, which is widely supported by assistive technologies.

#### 1.2.5

 * ** REMOVED ** Feature: change ‘Save and continue’ link to a button. This provides
   better accessibility by providing ‘Save and continue’ as a form field – making
   it listed along side with the ‘Previous’, ‘Next’ and ‘Submit’ buttons when a 
   screen reader user lists all form fields. e.g. JAWS + F5.

#### 1.2.4

 * Fix: required checkbox and radio fields missing ‘required’ asterisk since version
   1.2.2.

#### 1.2.3

 * Feature: links in form body, such as field descriptions or HTML fields, will 
   be made to open in a new window. A title is added or appended to any existing
   title for screen reader users which reads ‘this link will open in a new window’.

#### 1.2.2

 * Enqueue stylesheet instead of directly printing to page.
 * Replace i18n slug with slug string instead of class reference.
 * Fix text strings for internationalization.
 * Fix bug with failing to be inserted.
 * Add ARIA live attribute to form validation error
 * Remove JS alert to avoid redundant notifications with ARIA

#### 1.2.1

 * Fix: added condition so that ‘required’ attributes are only added for fields 
   on current page.

#### 1.2.0

 * Fix: changed links in validation message to be relative to the current page –
   allowing the links to work regardless of where the form is being loaded
 * Fix: changed validation alert so that HTML ‘new line’ 
    is replaced with JavaScript‘
   new line’ /n
 * Fix: added condition to column and field changing functions so that they only
   function on the front end – not in the Gravity Forms forms builder
 * Maintenance: improved how date format instructions are built.
 * Feature: ‘list’ field image buttons (add new row, delete row) are not keyboard
   accessible. Added to to replace with actual buttons they are keyboard accessible.
 * Feature: add aria-describedby for website field – ‘enter a valid website URL 
   for example http://www.google.com’
 * Fix: un-did ‘required’ attribute for checkbox field – it unduly made ALL checkboxes
   required, rather than just one.
 * Maintenance: moved CSS to its own file.

#### 1.1.0

 * Feature: added aria-describedby for date fields – providing screen reader users
   with the instructions on how to type into the field, for example ‘must be dd/
   mm/yyyy format’
 * Feature: added screen reader only words for required fields – providing screen
   reader users with the word ‘required’ in addition to the default star
 * Feature: added aria-describedby for fields that have failed validation – making
   it easier for screen reader users to determine why a field has failed validation
 * Feature: improved validation message. Message now reads ‘There were 2 errors 
   found in the information you submitted.’ and is followed by a list of each field
   that did not pass validation. Each item in the list is a clickable link, taking
   the user directly to the field.
 * Feature: added browser alert if form did not pass validation. If the form did
   not pass validation, the first thing the user should see or hear is ”There were
   2 errors found in the information you submitted.’ followed by the list of errors.
   When the user clicks past the alert the browsers focus is taken to the on screen
   validation message and links to errors.

#### 1.0.3

 * Maintenance: fix php closing tag to resolve version number not appearing in WordPress
   Plugin Directory.

#### 1.0

 * First public release.

## Meta

 *  Version **1.7.2**
 *  Last updated **7 years ago**
 *  Active installations **5,000+**
 *  WordPress version ** 5.0 or higher **
 *  Tested up to **5.1.22**
 *  Languages
 * [Dutch](https://nl.wordpress.org/plugins/gravity-forms-wcag-20-form-fields/),
   [English (Canada)](https://en-ca.wordpress.org/plugins/gravity-forms-wcag-20-form-fields/),
   [English (UK)](https://en-gb.wordpress.org/plugins/gravity-forms-wcag-20-form-fields/),
   [English (US)](https://wordpress.org/plugins/gravity-forms-wcag-20-form-fields/),
   [Finnish](https://fi.wordpress.org/plugins/gravity-forms-wcag-20-form-fields/),
   [French (France)](https://fr.wordpress.org/plugins/gravity-forms-wcag-20-form-fields/),
   [German](https://de.wordpress.org/plugins/gravity-forms-wcag-20-form-fields/),
   [Spanish (Chile)](https://cl.wordpress.org/plugins/gravity-forms-wcag-20-form-fields/),
   and [Spanish (Spain)](https://es.wordpress.org/plugins/gravity-forms-wcag-20-form-fields/).
 *  [Translate into your language](https://translate.wordpress.org/projects/wp-plugins/gravity-forms-wcag-20-form-fields)
 * Tags
 * [accessibility](https://wordpress.org/plugins/tags/accessibility/)[gravity forms](https://wordpress.org/plugins/tags/gravity-forms/)
   [usability](https://wordpress.org/plugins/tags/usability/)[wcag](https://wordpress.org/plugins/tags/wcag/)
 *  [Advanced View](https://wordpress.org/plugins/gravity-forms-wcag-20-form-fields/advanced/)

## Ratings

 5 out of 5 stars.

 *  [  11 5-star reviews     ](https://wordpress.org/support/plugin/gravity-forms-wcag-20-form-fields/reviews/?filter=5)
 *  [  0 4-star reviews     ](https://wordpress.org/support/plugin/gravity-forms-wcag-20-form-fields/reviews/?filter=4)
 *  [  0 3-star reviews     ](https://wordpress.org/support/plugin/gravity-forms-wcag-20-form-fields/reviews/?filter=3)
 *  [  0 2-star reviews     ](https://wordpress.org/support/plugin/gravity-forms-wcag-20-form-fields/reviews/?filter=2)
 *  [  0 1-star reviews     ](https://wordpress.org/support/plugin/gravity-forms-wcag-20-form-fields/reviews/?filter=1)

[Your review](https://wordpress.org/support/plugin/gravity-forms-wcag-20-form-fields/reviews/#new-post)

[See all reviews](https://wordpress.org/support/plugin/gravity-forms-wcag-20-form-fields/reviews/)

## Contributors

 *   [ ovann86 ](https://profiles.wordpress.org/ovann86/)

## Support

Got something to say? Need help?

 [View support forum](https://wordpress.org/support/plugin/gravity-forms-wcag-20-form-fields/)

## Donate

Would you like to support the advancement of this plugin?

 [ Donate to this plugin ](https://www.itsupportguides.com/donate/)