Contact Form: accessibility issues for checkbox and radio groups

[norlam]

EDIT 1: Update line numbers for Jetpack 8.8.2 EDIT 2: Also a bug report and a fix.

Hi,

To fill a form with a screen reader, each checkbox groups and each radio groups neede their own <fieldset> and <legend> HTML tags.

See https://webaim.org/techniques/forms/ for explanation and details.

Unfortunately, Jetpack Contact Form's don't do that.

To be valid, for content attribute must match an id content (not a 'name' one).

Following modifications to grunion-contact-form.php file seems to fix validity and accessibility problems.

STEP 1

Go to line 3408 and line 3440, and replace the following code: $field .= $this->render_label( '', $id, $label, $required, $required_field_text ); by this one:

$field = "<fieldset>\n<legend>\n";
$field .= $this->render_label( '', $id, $label, $required, $required_field_text );
$field .= "</legend>\n";

STEP 2

Go to line 3427 and line 3455 and replace the following code: return $field; by this one:

$field .= "</fieldset>\n";
$field = preg_replace( '/for=\'[^\']+\'/i', '', $field );    /* RegEx to strip out non relevant for attribute */
return $field;

STEP 3

Replace all cases of: "required aria-required='true'" by: "aria-required='true'" You will found 5.

STEP 4

Then, optionally, use the following CSS rule to override the fieldset styles:

.contact-form fieldset {
    border: none;
    padding: 0 !important;
}

[norlam]

@jeherve Two questions:

1) What's the next step? 2) What can I do to help my fix become a fix in the next Jetpack version?

Regards,

[jeherve]

If you'd like, you can open a Pull Request with your suggestion, so it can be reviewed. You can follow the instructions here to do so: https://github.com/Automattic/jetpack/blob/master/docs/pull-request.md

[kcarrandale]

Hi! What's the status of this fix? I just made a form today, and WAVE flagged that a group of checkboxes lacked fieldset and legend tags.

[jeherve]

@kcarrandale We have not started working on this, but we'll update this issue when we do.

[alexstine]

This is a basic feature of a form. Can this please get some attention? Accessibility should always be priority, not nice to have. You can see how this is an issue on the WordCamp US site.

https://us.wordcamp.org/2023/wcus-organizing-team/

Imagine hearing this.

Yes Yes Accessibility

There is no context to understand what these form controls relate to.

Thanks.