More Screen Reader Accessibility Compliant Forms

Here are basic modifications to get more screen reader friendly and HTML valid forms.

Step 1:
Login to cPanel and run File Manager.

Step 2:
Go to /wp-content/plugins/jetpack/modules/contact-form/ and edit grunion-contact-form.php file.

Step 3:
Go to line 3383 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 4:
Go to line 3402 and replace the following code:
return $field;
by this one:

$field .= "</fieldset>\n";
$field = preg_replace( '/for=\'[^\']+\'/i', '', $field );
return $field;

Step 5:
Go to line 3417 and do the same as Step 3.

Step 6:
Go to line 3429 and do the same as Step 4.

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

Step 8:
Save modifications, close file and it’s done.

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

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

• This topic was modified 5 years, 9 months ago by norlam.
• This topic was modified 5 years, 9 months ago by norlam.
• This topic was modified 5 years, 9 months ago by norlam.
• This topic was modified 5 years, 9 months ago by norlam.
• This topic was modified 5 years, 9 months ago by norlam.
• This topic was modified 5 years, 9 months ago by norlam.
• This topic was modified 5 years, 9 months ago by norlam.
• This topic was modified 5 years, 9 months ago by norlam.
• This topic was modified 5 years, 9 months ago by norlam.
• This topic was modified 5 years, 9 months ago by norlam.