Form controls are not grouped

[karlgroves]

Form controls are not grouped

• Severity: Low
• Affected Populations:
  • Blind
  • Low-Vision
  • Cognitively Impaired
• Platform(s):
  • All / Universal
• Components affected:
  • Tools and Options

Issue description

Within the Options dialog, individual controls are split into sections
with preceding heading text, however this grouping is not described
using form semantics and therefore not properly conveyed to assistive
technologies.

Splitting complex forms into fieldsets helps assistive technology users
to understand the grouping and relationships between similar fields.

Issue Code

    <!-- General -->


    <section class="edit-post-options-modal__section">


       <h2 class="edit-post-options-modal__section-title">General</h2>


       <div class="components-base-control edit-post-options-modal__option">


          <div class="components-base-control__field">


              <input class="components-checkbox-control__input" id="inspector-checkbox-control-0" type="checkbox" checked="" value="1">


              <label class="components-checkbox-control__label" for="inspector-checkbox-control-0">Enable Pre-publish Checks</label>


           </div>


       </div>


        ...


    </section>





    <!-- Document Panel -->


    <section class="edit-post-options-modal__section">


       <h2 class="edit-post-options-modal__section-title">Document Panels</h2>


       <div class="components-base-control edit-post-options-modal__option">


          <div class="components-base-control__field">


             <input class="components-checkbox-control__input" id="inspector-checkbox-control-2" type="checkbox" checked="" value="1">


             <label class="components-checkbox-control__label" for="inspector-checkbox-control-2">Permalink</label>


          </div>


       </div>


    </section>





    <!-- Advanced Panels -->


    <section class="edit-post-options-modal__section">


       <h2 class="edit-post-options-modal__section-title">Advanced Panels</h2>


       <div class="components-base-control edit-post-options-modal__option">


          <div class="components-base-control__field">


             <input class="components-checkbox-control__input" id="inspector-checkbox-control-6" type="checkbox" value="1">


             <label class="components-checkbox-control__label" for="inspector-checkbox-control-6">Custom Fields</label>  


          </div>


       </div>


    </section>

Remediation Guidance

Turn the wrapping elements into <fieldset> and the group name
elements into <legend>. The <legend> elements themselves can
also contain inner <h2> elements, in order to continue providing
the benefits of a headings structure while still providing a form group
structure.

Recommended Code

    <!-- General -->


    <fieldset class="edit-post-options-modal__section">


       <legend><h2 class="edit-post-options-modal__section-title">General</h2></legend>


       <div class="components-base-control edit-post-options-modal__option">


          <div class="components-base-control__field">


             <input class="components-checkbox-control__input" id="inspector-checkbox-control-0" type="checkbox" checked="" value="1">


             <label class="components-checkbox-control__label" for="inspector-checkbox-control-0">Enable Pre-publish Checks</label>


           </div>


       </div>


       ...


    </fieldset>





    <!-- Document Panel -->


    <fieldset class="edit-post-options-modal__section">


       <legend><h2 class="edit-post-options-modal__section-title">Document Panels</h2></legend>


       <div class="components-base-control edit-post-options-modal__option">


          <div class="components-base-control__field">


             <input class="components-checkbox-control__input" id="inspector-checkbox-control-2" type="checkbox" checked="" value="1">


             <label class="components-checkbox-control__label" for="inspector-checkbox-control-2">Permalink</label>


          </div>


       </div>


    </fieldset>





    <!-- Advanced Panels -->


    <fieldset class="edit-post-options-modal__section">   


       <legend><h2 class="edit-post-options-modal__section-title">Advanced Panels</h2></legend>


       <div class="components-base-control edit-post-options-modal__option">


          <div class="components-base-control__field">


             <input class="components-checkbox-control__input" id="inspector-checkbox-control-6" type="checkbox" value="1">


             <label class="components-checkbox-control__label" for="inspector-checkbox-control-6">Custom Fields</label>  


          </div>


       </div>


    </fieldset>

Relevant standards

• 3.3.2 Labels or Instructions
  (Level A)

Note: This issue may be a duplicate with other existing accessibility-related bugs in this project. This issue comes from the Gutenberg accessibility audit, performed by Tenon and funded by WP Campus. This issue is GUT-54 in Tenon's report

[melchoyce]

Full report screenshot:

[afercia]

Using fieldset and legends may definitely help. However, the group names should be changed as <legend> elements directly complement the checkbox labels.

For a good understanding of how <legend>s are supposed to be used, here's a very recommended article by Léonie Watson @LJWatson on the Gov.uk accessibility blog (powered by WordPress 🎉):
https://accessibility.blog.gov.uk/2016/07/22/using-the-fieldset-and-legend-elements/

[tellthemachines]

Closing as this one was fixed by #39176 which changed the old section markup to use fieldset and legend.