Gravity Forms Accessible Checkboxes

In this tutorial, we will focus on improving the accessibility of checkbox fields in Gravity Forms.

By default, Gravity Forms lacks accessibility features for checkboxes, which can create barriers for users with disabilities.

We will address this issue by adding a fieldset and legend specifically to checkbox fields.

This enhancement will significantly enhance the accessibility and usability of checkbox inputs within Gravity Forms.

/**
 * By default, Gravity Forms isn't accessible. This function adds a fieldset and legend to checkbox fields.
 *
 * @param  mixed $content
 * @param  mixed $field
 * @param  mixed $value
 * @param  mixed $lead_id
 * @param  mixed $form_id
 * @return void
 */
function add_fields_wrapper( $content, $field, $value, $lead_id, $form_id ) {
	if ( 'checkbox' === $field->type ) {
		$content = str_replace_first( '<label', '<legend><label', $content );
		$content = str_replace_first( '</label>', '</label></legend>', $content );
		$content = '<fieldset>' . $content . '</fieldset>';
	}
	return $content;
}
add_filter( 'gform_field_content', 'add_fields_wrapper', 10, 5 );

This function is hooked into the gform_field_content filter, which allows you to modify the HTML content of Gravity Forms fields.

It takes the existing field content, checks if the field type is a checkbox, and then modifies the content by adding a <fieldset> element around it. Additionally, it wraps the field label with a <legend> element to provide a descriptive label for the group of checkboxes.

To use this code snippet, you can add it to your theme’s functions.php file or include it in a custom plugin. Once added, it will automatically apply the modifications to the checkbox fields in your Gravity Forms, making them more accessible.