[wp-trac] [WordPress Trac] #47142: Disabled fieldset does not convey the disabled state of controls

[WordPress Trac]

#47142: Disabled fieldset does not convey the disabled state of controls
-------------------------+-------------------------------------------------
 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:  ui,          |  wpcampus-report
  accessibility          |
-------------------------+-------------------------------------------------
 Moved from the WPCampus accessibility report issues on GitHub, see
 https://github.com/WordPress/gutenberg/issues/15299

 * **Severity**:
  * Medium
 * **Affected Populations**:
  * Blind
  * Low-Vision
  * Motor Impaired
  * Cognitively Impaired
 * **Platform(s)**:
  * All / Universal
 * **Components affected**:
  * Edit Media

 **Issue description**
 On the Edit Media page, when users haven't made any selections for
 cropping the image, the "Selection" legend is grayed-out to indicate
 that this section is disabled, and the inputs are meant to be disabled
 by use of the disabled attribute on the fieldset itself.

 The only visible clue that the fields are meant to be disabled is that
 the legend is a slightly lighter color; the fields themselves appear
 identical to enabled fields. The state is only revealed to users by a
 mouse user's inability to click inside, and a keyboard user's
 inability to focus them. Speech recognition software may indicate that
 the disabled fields are enabled when users call out fields by type.

 Additionally, the change of style is not even conveyed in IE11, in which
 the "Selection" legend looks identical to enabled groups.

 This can be confusing to users with cognitive disabilities and speech
 recognition users.

 **Issue Code**
 {{{
     <fieldset id="imgedit-crop-sel-159" class="imgedit-crop-sel disabled"
 disabled="">


         <legend>Selection:</legend>


         <div class="nowrap">


             <label><span class="screen-reader-text">selection width</span>


                 <input type="text" id="imgedit-sel-width-159" ...>


             </label>


             <span class="imgedit-separator">×</span>


             <label><span class="screen-reader-text">selection
 height</span>


                 <input type="text" id="imgedit-sel-height-159" ...>


             </label>


         </div>


     </fieldset>


     ...


     .imgedit-settings .disabled, .media-disabled {


         color: #a0a5aa;


     }
 }}}

 **Remediation Guidance**
 While the disabled attribute is allowed on `<fieldset>`
 elements, it should be avoided as the sole method of conveying disabled
 states, because it does not universally apply the disabled state to
 the fields in all assistive technologies.

 Instead, place the disabled attribute on the fields directly.

 Explicitly set the `<legend>` style changes with a legend
 selector so that it applies in all browsers, and style disabled controls
 to be more obviously disabled; the current slight difference in
 box-shadow is difficult to discern even for users without visual
 disabilities. Ideally, the styling would use opacity rather than
 color properties so that the difference is still visible in Windows
 High Contrast themes.

 Also ensure that the relationship between the `<label>` and
 `<input>` elements is explicitly defined using for and id
 attributes, for better compatibility with assistive technologies.

 **Recommended Code**
 {{{
     <fieldset id="imgedit-crop-sel-159" class="imgedit-crop-sel disabled">


         <legend>Selection:</legend>


         <div class="nowrap">


             <label for="imgedit-sel-width-159"><span class="screen-reader-
 text">selection width</span></label>


             <input disabled type="text" id="imgedit-sel-width-159" ...>


             <span class="imgedit-separator">×</span>


             <labelfor="imgedit-sel-height-159"><span class="screen-reader-
 text">selection height</span></label>


             <input disabled type="text" id="imgedit-sel-height-159" ...>


         </div>


     </fieldset>


     ...


     .imgedit-settings .disabled,


     .media-disabled,


     .disabled legend {


         color: #444;


         opacity: 0.5;


     }


     input.disabled,


     input:disabled,


     select.disabled,


     select:disabled,


     textarea.disabled,


     textarea:disabled {


         opacity: 0.5;


     }
 }}}

 **Relevant standards**
 * 1.3.3 Sensory Characteristics (Level A) https://www.w3.org/TR/WCAG20
 /#content-structure-separation-understanding

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

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