WCAG 2.0 form fields for Gravity Forms

Description

This plugin is an add-on for the Gravity Forms (affiliate link) plugin. If you don’t yet own a license for Gravity Forms – buy one now! (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

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

This plugin requires the Gravity Forms plugin, installed and activated

Install plugin from WordPress administration or upload folder to the /wp-content/plugins/ directory

Activate the plugin through the ‘Plugins’ menu in the WordPress administration

The radio, checkbox and repeater list fields will now be automatically modified so that they meet the accessibility requirements.

FAQ

Installation Instructions

This plugin requires the Gravity Forms plugin, installed and activated

Install plugin from WordPress administration or upload folder to the /wp-content/plugins/ directory

Activate the plugin through the ‘Plugins’ menu in the WordPress administration

The radio, checkbox and repeater list fields will now be automatically modified so that they meet the accessibility requirements.

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’.

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.

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.

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!

1.2.9

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 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

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.