Vertical Temperature Slider Example: Duplicative screen reader text following label

[jscholes]

In the Vertical Temperature Slider Example, a textual representation of the current value is rendered inside the SVG before the element with role="slider". IN the following example markup, the text is "25.0°C" (the default at page load):

<div id="id-temp-label" class="label">Temperature</div>
<svg role="none" class="slider-group" ...>
	<text class="temp-value" x="28" y="35">25.0°C</text>
	<rect class="rail" x="60" y="47" width="8" height="300" rx="5" aria-hidden="true"></rect>
	<g role="slider" .../>
	...
/svg>

The <text> element with class="temp-value" is exposed to screen readers, meaning that users:

• Hear the value twice, once from this text and once from the aria-valuetext attribute on the semantic slider element; and
• have to move their screen reader cursor passed the text that is of no use to them.

For example, here's a speech log from NVDA with speaking of command keys enabled, starting from just before the label:

down arrow
Temperature
down arrow
25.0°C
down arrow
slider 25.0 degrees Celsius

In addition, it's not clear why the slider visually shows "°C" as the unit of measurement, while the aria-valuetext attribute explicitly expands it to "degrees Celsius". Either all users should be expected to understand the common "°C" notation, or it should be spelled out for everyone. Giving screen reader users more explanation encourages inequitable over-labelling, has a disproportionate impact in braille, etc.

CC @IsaDC, @mcking65

[css-meeting-bot]

The ARIA Authoring Practices (APG) Task Force just discussed Issue 3257 - Potential bug with vertical temperature slider.

The full IRC log of that discussion

<jugglinmike> Topic: Issue 3257 - Potential bug with vertical temperature slider
<jugglinmike> github: https://github.com//issues/3257
<jugglinmike> Matt_King: The text of the value is exposed in two different ways in this slider
<jugglinmike> Matt_King: Because one of those pieces of text is outside of the slider, and because it is a value, the user has to press multiple down "arrow keys" to get into the slider
<jugglinmike> Matt_King: The first SVG element which contains the value (and says "degrees c"), but the aria-value text says "degrees Celsius". They don't agree with each other, and that was one part of the feedback
<jugglinmike> Matt_King: The question is: do we need both of these representations of the value?
<jugglinmike> Matt_King: And would it be possible to only have the representation of the value inside of the slider?
<jugglinmike> Matt_King: It doesn't seem like a good practice, from an accessibility standpoint, to have this duplication
<jugglinmike> jongund: In the original design, we only had the text outside of the slider. We added the value by the thumb so that folks with low-vision could see the value while they move it
<jugglinmike> Matt_King: How much zooming would someone have to do before they could no longer see the value that is right next to the thumb?
<jugglinmike> jongund: That's the one they will see?
<jugglinmike> Matt_King: I mean how much zooming will they need to do before they cannot see the value which is outside
<jugglinmike> jongund: I'm not sure
<jugglinmike> Matt_King: I'm just not certain that the justification is relevant in practice (rather than being purely theoretical)
<jugglinmike> Adam_Page: Depending on the context (e.g. the vertical position), I think it could be easy for the temperature value which is adjacent to the label to no longer visible
<jugglinmike> Matt_King: It's kind of like we have temperature, followed by the current value, followed by a thermometer (which also shows its value)
<jugglinmike> Jem: That's right
<jugglinmike> jongund: The label at the top is more traditional
<jugglinmike> jongund: We could put aria-hidden on the text
<jugglinmike> Matt_King: I've been really reluctant to use aria-hidden in that way
<jugglinmike> Matt_King: I'd prefer the duplicate text over aria-hidden
<jugglinmike> Matt_King: One could argue that it's decorative... But it's not a graphic--it's text!
<jugglinmike> Adam_Page: I'd vote to just kill the value at the top altogether. I'm not sure I see the usefulness in it
<jugglinmike> Adam_Page: The value in the handle is persistent, it's always there and always perceptible--not only in the moment of interaction, but also after the value has been set
<jugglinmike> Matt_King: What is the rationale for the label at the top?
<jugglinmike> jongund: I don't remember why. It was a while ago. It was probably a feature on other vertical sliders that we reviewed in the real world.
<jugglinmike> Jem: As a visual user, the justification for me is that it is easier to see what the temperature value is. I can see it as rendered by the thumb, but the label at the top is easier to understand
<jugglinmike> Matt_King: How do you move the thumb without seeing the value next to the thumb?
<jugglinmike> Matt_King: You have to be able to look at the thumb to move it, right?
<jugglinmike> jugglinmike: Well, you can move it using the keyboard
<jugglinmike> jugglinmike: In the ARIA-AT community group, there was some concern that the value which moves with the thumb could be difficult for users who prefer less motion
<jugglinmike> jongund: The color slider example has a value which appears alongside the thumb and moves with it as it changes
<jugglinmike> jongund: It's probably more uncommon to have the value next to the thumb. Maybe the value next to the thumb should only be there when you are interacting
<jugglinmike> Matt_King: That wouldn't address the issue for screen readers
<jugglinmike> Matt_King: I'm hearing that there are justifiable reasons for all the alternatives--that there are valid trade-offs here
<jugglinmike> Matt_King: I'm hearing consensus that there isn't a compelling reason to change this, and there are some potentially-compelling reasons not to change it
<jugglinmike> Matt_King: For some users, the value next to the thumb is useful. And for others, the value at the top provides greater accessibility
<jugglinmike> Adam_Page: I think the issue is based on the fact that visually, it is "11.9 C" and the value text is "11.9 Celsius"?
<jugglinmike> Matt_King: I don't think that's a major issue here. It's part of the question, but I don't think it's important
<jugglinmike> Matt_King: We could change the value text to match the visual text, but I don't think that's a bad practice for the value text to be more explicit (because you don't know how a screen reader is going to read "degrees C")
<jugglinmike> Jem: That's what we had for the calendar, too
<jugglinmike> s/Adam_Page:/CurtBellew:/
<jugglinmike> Matt_King: Screen readers can't de-dupe the value that is above because they don't know that it is a value
<jugglinmike> Matt_King: Theoretically, a screen reader could skip over the word "temperature" (although none of them do currently) because it knows the word "temperature" is part of the label
<jugglinmike> Matt_King: But the screen reader can't know that "25 degrees C" is part of the value
<jugglinmike> Matt_King: So it's kind of a semantically ambiguous element
<jugglinmike> Matt_King: But I don't think there's a reason for not having it
<jugglinmike> CurtBellew: When I try, VoiceOver represents them in the same way
<jugglinmike> Matt_King: Yeah, so does JAWS
<jugglinmike> Matt_King: It doesn't sound like we have compelling consensus for change, and there are more voices in this conversation saying "don't change it"
<jugglinmike> jugglinmike: But the color viewer slider only has a value that moves with the thumb. Shouldn't our decision apply to both patterns?
<jugglinmike> Adam_Page: And ditto for the multi-value slider I saw (which is also horizontal)
<jugglinmike> Adam_Page: Maybe we would justify this approach for a vertical slider specifically
<jugglinmike> CurtBellew: When I'm using the vertical slider on my phone, my thumb gets in the way. That's not the case with the horizontal slider
<jugglinmike> Adam_Page: I hear that. Although we could perhaps adjust the positioning of the vertical slider to account for that...
<jugglinmike> Matt_King: One approach I was imagining is that we don't have the value besides the thumb, and the value above is part of the slider itself (as a element hierarchy perspective)
<jugglinmike> Matt_King: The horizontal sliders have their value above the thumb--there's actual text above the thumb. It doesn't get duplicated when you read it, I'm assuming because it is a child of the slider element
<jugglinmike> Matt_King: Even if you wanted to show the value in two different places while the thumb was being moved on the vertical temperature slider, would it be possible to make the value that is above as a child of the slider?
<jugglinmike> jongund: That's pretty subtle. Would you tell people you did that intentionally for this purpose?
<jugglinmike> Matt_King: We do it for the horizontal slider for this reason
<jugglinmike> jongund: Yes, but we don't document that rationale
<jugglinmike> Matt_King: That's right. We could tell them
<jugglinmike> jongund: Or we could decide that we don't need to tell them. That's what we're doing now, after all
<jugglinmike> Matt_King: Coding-wise, would that be legit? To make the one that's above a child of the slider? Is there any reason that wouldn't work?
<jugglinmike> jongund: There's just an SVG "g" element, and only part of the slider components are in there (the focus ring, the thumb), I guess they all could be in there
<jugglinmike> Matt_King: The focus ring is tricky
<jugglinmike> jongund: the graphics for the rail are outside the SVG "g" element. I think from a coding practice, it would be cleaner for those to be inside
<jugglinmike> jongund: and it would be consistent--whether we tell people that's why we did it or not
<jugglinmike> Matt_King: I like that consistency, and I like that it could potentially solve this problem
<jugglinmike> Matt_King: Who wants to make an experimental pull request?
<jugglinmike> jongund: I can--unless somebody else wants to!
<jugglinmike> Matt_King: Hearing no other volunteers, then let's take jongund's offer
<jugglinmike> Jem: I'll assign jongund to the issue

[jongund]

Updated Vertical Slider Preview that fixes the redundant speaking of the temperature value