#40707 closed defect (bug) (fixed)
Fix or consider to remove the mejs volume slider tooltip
Reported by: |
|
Owned by: |
|
---|---|---|---|
Milestone: | 4.8 | Priority: | normal |
Severity: | normal | Version: | |
Component: | Media | Keywords: | has-screenshots |
Focuses: | ui, accessibility | Cc: |
Description
The mediaelement player supports keyboard navigation through its controls and, when focusing the volume slider, it shows a tooltip:
The tooltip doesn't appear in Chrome because wp-mediaelement.css should reset also clip-path on focus. It's visible on all the browsers that don't support clip-path yet. I remember previous issues with this tooltip and maybe it's time to consider to improve its styling and positioning or consider to remove/hide it and provide better feedback if needed.
I'd say either the clip-path issue should be fixed (and the styling improved) or the tooltip should be removed entirely.
Noticed during the work done for the new media widgets developed on GitHub. More details and screenshots on the GitHub issue https://github.com/xwp/wp-core-media-widgets/issues/140 and related PR.
Milestoning for 4.8 because it's a bug and affects one of the new features landing in this release.
Attachments (1)
Change History (11)
This ticket was mentioned in Slack in #design by afercia. View the logs.
6 years ago
This ticket was mentioned in Slack in #core-media by joemcgill. View the logs.
6 years ago
This ticket was mentioned in Slack in #design by afercia. View the logs.
6 years ago
This ticket was mentioned in Slack in #accessibility by afercia. View the logs.
6 years ago
#6
@
6 years ago
See https://core.trac.wordpress.org/ticket/30281#comment:16
Seems the css class for the offscreen text came in with a mediaelement.js update and it was causing issues. The fix was to make the hidden text visible on focus, merged in [30907]. Worth noting I don't think this was the original intent for the hidden text. Also, this text is now inside an element with role=slider
and modern assistive technologies know how to interact with sliders.
However, the styling and positioning implemented in [30907] was meant to be this:
(actually, this is the tooltip on the duration slider and seems isn't there any longer, theres's another one on the volume slider, and one more on the video volume vertical slider).
Quickly discussed with the design team and the accessibility team. Seems this text is not meant to be revealed. My only guess it's there for historical reasons and today, it just acts as a fallback for old assistive technologies that don't support ARIA sliders. I'd be in favor of making it just visually hidden text, as revealing it on focus has proven to be very fragile and doesn't add a great value for accessibility.
#7
@
6 years ago
Worth noting mediaelement.js uses an aria-label="Volume Slider"
so any text inside of the volume slider gets overriden and the hidden text is not available to screen readers. This confirms it's still there as a fallback for (very) old assistive technologies that don't support aria-label and role=slider.
#8
@
6 years ago
40707.diff basically reverts [30907] to keep the offscreen text always visually hidden.
A couple screenshots of what happens on the frontend, with Twenty Seventeen:
To clarify, this is a mediaelement.js feature but revealing the text in a tooltip that appears on focus, it's something added by WordPress. Testing the demo on mediaelementjs.com, the hint text stays visually hidden: