Title: More Screen Reader Accessibility Compliant Forms
Last modified: August 1, 2020

---

# More Screen Reader Accessibility Compliant Forms

 *  Resolved [norlam](https://wordpress.org/support/users/norlam/)
 * (@norlam)
 * [5 years, 9 months ago](https://wordpress.org/support/topic/more-screen-reader-accessible-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](https://wordpress.org/support/users/norlam/).
    -  This topic was modified 5 years, 9 months ago by [norlam](https://wordpress.org/support/users/norlam/).
    -  This topic was modified 5 years, 9 months ago by [norlam](https://wordpress.org/support/users/norlam/).
    -  This topic was modified 5 years, 9 months ago by [norlam](https://wordpress.org/support/users/norlam/).
    -  This topic was modified 5 years, 9 months ago by [norlam](https://wordpress.org/support/users/norlam/).
    -  This topic was modified 5 years, 9 months ago by [norlam](https://wordpress.org/support/users/norlam/).
    -  This topic was modified 5 years, 9 months ago by [norlam](https://wordpress.org/support/users/norlam/).
    -  This topic was modified 5 years, 9 months ago by [norlam](https://wordpress.org/support/users/norlam/).
    -  This topic was modified 5 years, 9 months ago by [norlam](https://wordpress.org/support/users/norlam/).
    -  This topic was modified 5 years, 9 months ago by [norlam](https://wordpress.org/support/users/norlam/).

Viewing 3 replies - 1 through 3 (of 3 total)

 *  Plugin Contributor [James Huff](https://wordpress.org/support/users/macmanx/)
 * (@macmanx)
 * [5 years, 9 months ago](https://wordpress.org/support/topic/more-screen-reader-accessible-compliant-forms/#post-13208968)
 * Would you please report that via [https://github.com/Automattic/jetpack/issues/new?template=feature_request.md](https://github.com/Automattic/jetpack/issues/new?template=feature_request.md)
   so you get credit?
 * We’d love to fix this up!
 *  Plugin Contributor [James Huff](https://wordpress.org/support/users/macmanx/)
 * (@macmanx)
 * [5 years, 9 months ago](https://wordpress.org/support/topic/more-screen-reader-accessible-compliant-forms/#post-13209036)
 * Oh, I see you have at [https://github.com/Automattic/jetpack/issues/16685](https://github.com/Automattic/jetpack/issues/16685)
 * Thanks!
 *  Thread Starter [norlam](https://wordpress.org/support/users/norlam/)
 * (@norlam)
 * [5 years, 9 months ago](https://wordpress.org/support/topic/more-screen-reader-accessible-compliant-forms/#post-13228236)
 * **EDIT 1: Update line numbers for Jetpack 8.8.**
    **EDIT 2: This is both a bug
   report and a fix.**
 * Hi,
 * To fill a form with a screen reader, each **checkbox groups** and each **radio
   groups** needs their own `<fieldset>` and `<legend>` HTML tags.
 * See [https://webaim.org/techniques/forms/](https://webaim.org/techniques/forms/)
   for explanation and details.
 * Unfortunately, Jetpack Contact Form’s don’t do that.
 * To be valid, the `for` content atribute 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 3407** 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 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**
 * Go to **line 3442** and do the same as **Step 1**.
 * **STEP 4**
 * Go to **line 3454** and do the same as **Step 2**.
 * **STEP 5**
 * Replace all cases of:
 * `"required aria-required='true'"`
 * by:
 * `"aria-required='true'"`
 * You will found 5.
 * **STEP 6**
 * Then, optionally, use the following **CSS rule** to override the fieldset styles:
 *     ```
       .contact-form fieldset {
       	border: none;
       	padding: 0 !important;
       }
       ```
   

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘More Screen Reader Accessibility Compliant Forms’ is closed to new replies.

 * ![](https://ps.w.org/jetpack/assets/icon.svg?rev=2819237)
 * [Jetpack - WP Security, Backup, Speed, & Growth](https://wordpress.org/plugins/jetpack/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/jetpack/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/jetpack/)
 * [Active Topics](https://wordpress.org/support/plugin/jetpack/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/jetpack/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/jetpack/reviews/)

 * 3 replies
 * 2 participants
 * Last reply from: [norlam](https://wordpress.org/support/users/norlam/)
 * Last activity: [5 years, 9 months ago](https://wordpress.org/support/topic/more-screen-reader-accessible-compliant-forms/#post-13228236)
 * Status: resolved