[wp-trac] [WordPress Trac] #47149: Tab structure does not use tab semantics

[WordPress Trac]

#47149: Tab structure does not use tab semantics
-------------------------+-------------------------------------------------
 Reporter:  anevins      |      Owner:  (none)
     Type:  defect       |     Status:  new
  (bug)                  |
 Priority:  normal       |  Milestone:  Awaiting Review
Component:  Media        |    Version:
 Severity:  normal       |   Keywords:  needs-screenshots needs-patch
  Focuses:               |  wpcampus-report
  accessibility          |
-------------------------+-------------------------------------------------
 Moved from the WPCampus accessibility report issues on GitHub, see:
 https://github.com/WordPress/gutenberg/issues/15287

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

 **Issue description**
 In the "Featured Image" modal dialog, two links are used to switch
 views (between the "Media Library" and the "Upload Files" panels).
 These are coded as links with redundant href attributes ("#"),
 which is not semantically valid, and does not convey the
 currently-active link to assistive technologies.

 The choice of button vs link has a significant effect on user
 expectations for assistive technology users: links convey the
 expectation that the browser will navigate to a different location or
 page, which standard buttons do not. The difference also affects what
 keys can be used within assistive technologies to navigate between the
 elements, and which page summaries the element appears in (for example,
 it won't show up in a list of all form elements on the page).

 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="media-router">


         <a href="#" class="media-menu-item active">Upload Files</a>


         <a href="#" class="media-menu-item">Media Library</a>


     </div>
 }}}

 **Remediation Guidance**
 The visual presentation of the content within the "Featured Image"
 dialog is a tab panel. Using the [tab panel pattern]
 (https://www.w3.org/TR/wai-aria-practices-1.1/#tabpanel) will give the
 elements proper roles, and using `aria-selected` will allow users of
 assistive technologies to know which tab is currently selected.

 **Recommended Code**
 {{{
     <div role="tablist" class="media-router">


         <button role="tab" aria-selected="true" class="media-menu-item
 active">Upload Files</button>


         <button role="tab" class="media-menu-item">Media Library</button>


     </div>
 }}}

 **Relevant standards**
 * 1.3.1 Info and Relationships (Level A) https://www.w3.org/TR/WCAG20
 /#content-structure-separation-programmatic
 * 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-58 in Tenon's report

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