[wp-trac] [WordPress Trac] #47141: Radio and checkbox labels rely on implicit association

[WordPress Trac]

#47141: Radio and checkbox labels rely on implicit association
-------------------------+-------------------------------------------------
 Reporter:  anevins      |      Owner:  (none)
     Type:  defect       |     Status:  new
  (bug)                  |
 Priority:  normal       |  Milestone:  Awaiting Review
Component:  Media        |    Version:
 Severity:  normal       |   Keywords:  has-screenshots needs-patch
  Focuses:               |  wpcampus-report
  accessibility          |
-------------------------+-------------------------------------------------
 Moved from the WPCampus accessibility report issues on GitHub, see
 https://github.com/WordPress/gutenberg/issues/15300

 * **Severity:**
  * Low
 * **Affected Populations**:
  * Motor Impaired
  * Cognitively Impaired
 * **Platform(s)**:
  * Windows - Dragon
 * **Components affected**:
  * Edit Media
  * Media Dialog

 **Issue description**
 In both the "Featured Image" dialog and the Edit Media page, form
 inputs are wrapped in label elements without explicit association.

 Some combinations of browser and assistive technologies do not reliably
 support implicit association (for example, browsers used with Dragon
 Naturally Speaking), and so for affected users, the label text may not
 be announced with the field it relates to.

 **Issue Code**
 {{{
     <!-- Edit Media -->


     <div id="imgedit-save-target-159" class="imgedit-save-target">


         <fieldset>


             <legend><strong>Apply changes to:</strong></legend>


             <label class="imgedit-label">


             <input type="radio" name="imgedit-target-159" value="all"
 checked="checked"> All image sizes</label>


             ...


         </fieldset>


     </div>





     <!-- Media Dialog -->


     <div tabindex="0" data-id="159" class="attachment-details save-ready
 needs-refresh">


         <h2>Attachment Details ... Saved ...</h2>


         <div class="attachment-info">...</div>


         <label class="setting" data-setting="url">


             <span class="name">URL</span>


             <input type="text" value="http://142.93.114.99/wp-
 content/uploads/2019/01/this-is-fine.jpg" readonly="">


         </label>


          ...


     </div>
 }}}

 **Remediation Guidance**
 Use for and id attributes to explicitly associate each `<label>` with its
 field.

 **Recommended Code**
 {{{
     <!-- Edit Media -->


     <div id="imgedit-save-target-159" class="imgedit-save-target">


         <fieldset>


             <legend><strong>Apply changes to:</strong></legend>


             <label for="imgedit-radio-1"  class="imgedit-label">


                 <input id="imgedit-radio-1" type="radio" name="imgedit-
 target-159" value="all" checked="checked">


                 All image sizes


             </label>


             ...


         </fieldset>


     </div>





     <!-- Media Dialog -->


     <div tabindex="0" data-id="159" class="attachment-details save-ready
 needs-refresh">


         <h2>Attachment Details ... Saved ...</h2>


         <div class="attachment-info">...</div>


         <label for="imgedit-url" class="setting" data-setting="url">


             <span class="name">URL</span>


             <input id="imgedit-url" type="text"
 value="http://142.93.114.99/wp-content/uploads/2019/01/this-is-fine.jpg"
 readonly="">


         </label>


          ...


     </div>
 }}}

 **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-74 in Tenon's report

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/47141>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform