[wp-trac] [WordPress Trac] #47137: Insufficient form semantics

[WordPress Trac]

#47137: Insufficient form semantics
-------------------------+-------------------------------------------------
 Reporter:  anevins      |      Owner:  (none)
     Type:  defect       |     Status:  new
  (bug)                  |
 Priority:  normal       |  Milestone:  Awaiting Review
Component:  Media        |    Version:
 Severity:  minor        |   Keywords:  needs-patch has-screenshots
  Focuses:  ui,          |  wpcampus-report
  accessibility          |
-------------------------+-------------------------------------------------
 Moved from the WPCampus accessibility report issues on GitHub, see
 https://github.com/WordPress/gutenberg/issues/15305

 * **Severity**:
  * Low
 * **Affected Populations**:
  * Blind
  * Cognitively Impaired
 * **Platform(s):**
  * All / Universal
 * **Components affected**:
 * Media Dialog

 **Issue description**
 The "Media Library" panel of the "Featured Image" modal dialog lists
 some filtering of options, a group of checkboxes, a sub-form of relevant
 meta-data, and a "Select" button. However there are no semantics which
 associate these controls together, nor give the orphan "Select" button
 any meaning relative to the selected checkbox/image.

 Additionally, a link taking users to a new window/tab with an editing
 form does not inform users that it opens a new window or tab.

 Semantic markup is vital for assistive technology users, to convey the
 structure and relationships between information. When appropriate
 semantic markup is not used, it may be more difficult for such users to
 understand what the content means, and to comprehend the structure that
 the visual presentation conveys.

 **Issue Code**

 {{{
     <div class="attachments-browser">...


         <div class="media-toolbar">


             <div class="media-toolbar-secondary">


                 <label for="media-attachment-date-filters" class="screen-
 reader-text">Filter by date</label>


                 <select id="media-attachment-date-filters" class
 ="attachment-filters">...</select>


             </div>


             <div class="media-toolbar-primary search-form">


                 <label for="media-search-input" class="screen-reader-
 text">Search Media</label>


                 <input type="search" placeholder="Search media items..."
 id="media-search-input" class="search">


             </div>


         </div>


         <ul tabindex="-1" class="..."><li ...>...</li></ul>


          ...


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


             <h2>Attachment Details  <span>...</span></h2>


                 <div class="attachment-info">


                     <div class="thumbnail thumbnail-image">...</div>


                         ...


                         <div class="dimensions">1820 × 1213</div>


                         <a class="edit-attachment"
 href="...&action=edit..." target="_blank">Edit Image</a>


                         <button type="button" class="...">Delete
 Permanently</button>


                     </div>


                 </div>


                 <label class="...">


                     <span...>URL</span>


                     <input type="text" value="...this-is-fine.jpg"
 readonly="">


                 </label>


                 ...


             </div>


             <form class="compat-item"></form>


             </div>


         </div>


         <div class="media-toolbar-primary search-form">


             <button type="button" class="...">Select</button>


         </div>


     </div>
 }}}

 **Remediation Guidance**
 Turn the form into an actual `<form>` element.

 Wrap `<fieldset>` tags (with accompanying `<legend>` elements)
 around groups of controls explaining what they are.

 Use the id on the `<form>` element with the form attribute
 on the "Select" button to designate this as the form's submit
 button.

 Add text to the "Edit" link that opens in a new window or tab,
 informing users that this will happen. When the form in the new
 tab/window is submitted, users should be brought back to the original
 form.

 **Recommended Code**

 {{{
     <div class="attachments-browser">...


         <form id="media_form">


         <fieldset class="media-toolbar">


         <legend class="screen-reader">Filter media options</legend>


             <div class="media-toolbar-secondary">


                 <label for="media-attachment-date-filters" class="screen-
 reader-text">Filter by date</label>


                 <select id="media-attachment-date-filters" class
 ="attachment-filters">...</select>


             </div>


             <div class="media-toolbar-primary search-form">


                 <label for="media-search-input" class="screen-reader-
 text">Search Media</label>


                 <input type="search" placeholder="Search media items..."
 id="media-search-input" class="search">


             </div>


         </fieldset>


         <fieldset>


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


             <ul tabindex="-1" class="..."><li ...>...</li></ul>


         </fieldset>


          ...


             <fieldset tabindex="0" data-id="159" class="attachment-details
 save-ready">


                 <legend>Attachment Details  <span>...</span></legend>


                 <div class="attachment-info">


                     <div class="thumbnail thumbnail-image">...</div>


                         ...


                         <div class="dimensions">1820 × 1213</div>


                         <a class="edit-attachment"
 href="...&action=edit..." target="_blank">Edit Image <span class
 ="screen-reader"> Opens in a new window</span></a>


                         <button type="button" class="...">Delete
 Permanently</button>


                         </div>


                     </div>


                     <label class="...">


                         <span...>URL</span>


                         <inputtype="text" value="...this-is-fine.jpg"
 readonly="">


                     </label>


                     ...


                 </div>


             </fieldset>


         </form>


         <div class="media-toolbar-primary search-form">


             <button form="media_form" type="button"
 class="...">Select</button>


         </div>


     </div>
 }}}

 **Relevant standards**
 * 1.3.1 Info and Relationships (Level A) https://www.w3.org/TR/WCAG20
 /#content-structure-separation-programmatic
 * 1.3.3 Sensory Characteristics (Level A) https://www.w3.org/TR/WCAG20
 /#content-structure-separation-understanding
 * 3.3.2 Labels or Instructions (Level A) https://www.w3.org/TR/WCAG20
 /#minimize-error-cues
 * 4.1.2 Name, Role, Value (Level A) https://www.w3.org/TR/WCAG20/#ensure-
 compat-rsv

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

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