[wp-trac] [WordPress Trac] #47149: Tab structure does not use tab semantics
WordPress Trac
noreply at wordpress.org
Mon May 6 15:21:07 UTC 2019
#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
More information about the wp-trac
mailing list