Slider: Media Seek Slider example

[jongund]

I have created a new media seek example based on the discussion at the 20 April 2021 meeting to include the only the media seek slider to illustrate the use of aria-valuetext.

Features:

• Appends max value to aria-valuetext on focus, but not on change in value.
• Uses SVG graphics elements
• Increased size of clickable area on rail to change value with pointing device
• Has high contrast support
• Code to use APG coding practices
• Uses event.key
• Uses pointer events
• Uses the none role on SVG element
• Sets the CSS property forced-color-adjust to auto on the SVG elements.
• Using stroke-opacity and fill-opacity instead of transparent values for setting stroke and fill colors for the SVG rect used for focus ring for high contrast mode.

Preview media seek slider example

Review checklist

• Editorial review by @mcking65
• Functional review by @jongund
• Visual design review by @smhigley
• Accessibility review on Windows by @shirsha
• Accessibility review on MacOS by @jongund
• Accessibility review on iOS/iPadOS by @jongund
• Accessibility review on Android by @a11ydoer (Note Talkback problem in the comment)
• Code review by @jesdaigle
• Test review by @jesdaigle

---

Preview | Diff

[jongund]

@mcking65 @a11ydoer
This pull request is ready for review, it has already been partially reviewed in PR #1857.

[shirsha]

NVDA/Chrome in browse mode:

• Narrates the time duration text as real time. For example: 1:00 is narrated as "one o clock" instead of 1 min, 0:00 as "midnight".

• The slider is not narrated as interactive (i.e. clickable) element. It is narrated as Media Seek slider 3 Minutes 36 Seconds of 5 Minutes. When I remove role="none" from the <SVG> it is narrating it as clickable but this approach adds other issues like narrating the whole graphic as clickable. I checked native HTML input type="range" and the screenreader announced it as slider. So I am not worried with the current approach. Please let me know if you won't agree with me.

[jongund]

@shirsha
Thank you for the feedback. I updated the slider to initialize the total stars when the slider is initialized and when it loses focus.

[jscholes]

@jongund This is also looking good. On a previous pull request (which I think also had a volume slider), I mentioned that "Media Seek" is unnecessarily long as the label for the slider; the context of media playback is already obvious/implied. Any thoughts on changing it to just "Seek"?

[jesdaigle]

Code and test review are good. :)

[mcking65]

Final edits done to copy; This is an approving editorial review.

[shirsha]

The example looks good.
As mentioned earlier, all screen readers on windows are narrating the duration time text as real time. Trying to figure out how to address this issue as we can't use role="timer" and aria-label to say 1 minute instead of 1 O clock. Shall we add screen reader text instead? How does screenreader know it is real time or time represented in minutes?

[mcking65]

@shirsha commented:

The example looks good.

Thank you Siri. Now, could you please start a review from the files page of the PR, write that you reviewed accessibility on Windows, and check the approve option?

As mentioned earlier, all screen readers on windows are narrating the duration time text as real time. Trying to figure out how to address this issue as we can't use role="timer" and aria-label to say 1 minute instead of 1 O clock. Shall we add screen reader text instead? How does screenreader know it is real time or time represented in minutes?

Since that happens only for the static labels on the time markers and not for the actual value, I don't think there is an issue with understandability.

That said, this highlights a gap in ARIA, not a problem with the example. I am not aware of anyway to declare those strings as representing elapsed time rather than time of day.

I think this is a good example of a scenario where it would not be a good idea to put the burden of deciding what screen readers should say on content authors. Generally, we shouldn't encourage authors to fix every possible mispronunciation by force-feeding specific speech. Instead, content authors should be able to declare the semantics of the element and then let screen readers decide what to say. Since we don't have a way to tell screen readers what kind of elements those strings represent, voice synthesizers guess.

[mcking65]

@carmacleod @smhigley
Do you approve?

[a11ydoer]

Updated discussion on the media seek slider example on May 25 meeting minutes

[smhigley]

LGTM!

[jongund]

On macOS with VoiceOver the slider mostly works and the aria-valuetext property is read instead of a percentage or arai-valuenow, but the home and end keys do not set the minimim or maximum values. Home and end navigate to other parts of the page. With VoiceOver off, the Home and End keys set the minimum and maximum values. So this seems to be a VoiceOver issue, not anything the example can fix with markup changes.

[jongund]

@a11ydoer @mcking65
It looks like TalkBack has some implementation issues with the slider using aria-valuetext, but not anything we can fix with code changes to the example. A standard input[type=range] value can be changed with the volume controls, but a element with role=slider cannot, so some fundamental support issues need to be addressed. With TalkBack off, you can change the value with touch events or a bluetooth keyboard.