[wp-trac] [WordPress Trac] #47148: Insufficient labelling and inappropriate nesting of form controls

[WordPress Trac]

#47148: Insufficient labelling and inappropriate nesting of form controls
-------------------------+-------------------------------------------------
 Reporter:  anevins      |      Owner:  (none)
     Type:  defect       |     Status:  new
  (bug)                  |
 Priority:  normal       |  Milestone:  Awaiting Review
Component:  Media        |    Version:
 Severity:  minor        |   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/15288

 * **Severity**:
  * Low
 * **Affected Populations**:
  * Blind
  * Low-Vision
  * Cognitively Impaired
 * **Platform(s)**:
  * Windows - Screen Reader
  * Windows - ZoomText
  * Mac - VoiceOver
  * Android - TalkBack
  * iOS - VoiceOver
 * **Components affected**:
  * Media Dialog

 **Issue description**
 In the "Featured Image" modal dialog's "Media Library" tab, users
 can choose an image to be the featured image; this is presented as a
 series of checkbox elements which, once checked, show a button to
 uncheck inside the custom checkbox element.

 This button is in the Tab order, however its only name is "Deselect",
 it doesn't tell the user what is being deselected. Users must infer
 what this button does from context, and may wonder why it's next to
 seemingly-ordinary checkboxes which themselves are natively
 unselectable.

 The button role of these buttons does not convey that the user is
 checking or unchecking an item, and their placement inside the
 checkbox elements is semantically confusing, and may be functionally
 confusing since one focusable element is nested inside another.

 Screen reader users hear that a list is present, yet find that they
 cannot navigate by list-items.

 **Issue Code**
 {{{
     <ul tabindex="-1" class="attachments ui-sortable ui-sortable-disabled"
 id="__attachments-view-53">


         <li tabindex="0" role="checkbox" aria-label="Marianne_Williamson"
 aria-checked="true" ... class="...">


             <div class="...">


                 <div class="thumbnail">


                     <div class="centered">


                         <img src="...this-is-fine-300x200.jpg"
 draggable="false" alt="">


                     </div>


                 </div>


             </div>


             <button type="button" class="check" tabindex="0">


                 <span class="..."></span>


                 <span class="screen-reader-text">Deselect</span>


             </button>


         </li>


         ...


     </ul>
 }}}

 **Remediation Guidance**
 Allow the list semantics to remain available by not overriding the
 `<li>` elements' native list-item roles.

 Remove the `<button>` inside the checkbox and allow the original
 checkbox itself to be hidden and shown (perhaps styled with the custom
 checkmarks and "-" symbols, using the :before pseudo-element, as
 used in other checkboxes); hiding elements with opacity still allows
 speech recognition and screen readers to perceive the checkbox as though
 it were visible. The alt attribute inside the image will be able to
 label the checkbox if it's inside the `<label>` element.

 The checkbox now can offer both the image name and its state together in
 one unit, allowing users to always know what they are deselecting.

 **Recommended Code**
 {{{
     <fieldset>


         <legend class="screen-reader">Media options result</legend>


         <ul tabindex="-1" class="attachments ui-sortable ui-sortable-
 disabled" id="__attachments-view-53">


             <li ... class="...">


                 <input type="checkbox" id="data_159">


                 <label for="data_159">


                     <img src="...this-is-fine-300x200.jpg"
 draggable="false" draggable="false" alt="Marianne_Williamson">


                 </label>


             </li>


             ...


         </ul>


     </fieldset>





     li {


         position: relative;


     }


     li>input {


         position: absolute;


         opacity: 0;


         ...


     }


     li input+label img {


         ...


     }


     li input:focus+label img {


         /* styles for focussed input */


         /* include an actual outline in addition to box-shadow for high
 contrast users */


     }


     li input:checked {


         opacity: 1;


     }


     li input:checked:focus,


     li input:checked:hover {


         /* change from checkmark to dash */


     }


     li input:checked+label img {


         ...


     }
 }}}

 **Relevant standards**
 * 1.3.1 Info and Relationships (Level A) https://www.w3.org/TR/WCAG20
 /#content-structure-separation-programmatic

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

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