Talkback not reading aria-valuetext on an input type=range [175917355]

Fixed

Bug

[AOSP] assigned

adexe s nau

Status Update

No update yet.

Description

jn...@gmail.com

created issue #1

Dec 18, 2020 11:59PM

Steps to reproduce the problem (including sample code if appropriate).
- Run https://codepen.io/jnurthen/pen/qBajpGz
- Enable Talkback, navigate to the "with valuetext" picker
- change the value using the volume up/down keys
The value is read as a % and aria-valuetext is ignored
The aria-valuetext value should be read.

Version - Android 10 - Nokia 6.1

Comments

vi...@google.com <vi...@google.com> Dec 21, 2020 05:21AM

Assigned to vi...@google.com.

vi...@google.com <vi...@google.com> #2Dec 21, 2020 10:46AM

Thank you for reporting this issue. For us to further investigate this issue, please provide the following additional information:

Android build
Which Android build are you using? (e.g. PPP5.180610.010)

We tested this bug on Pixel devices and observed, it says:
"a% with valuetext slider".
Please confirm if you have also observed the same.

Android bug report (to be captured after reproducing the issue)
For steps to capture a bug report, please refer:

https://developer.android.com/studio/debug/bug-report#bugreportdevice

Screen record of the issue
Please capture screen record or video of the issue using following steps:
adb shell screenrecord /sdcard/video.mp4
Subsequently use following command to pull the recorded file:
adb pull /sdcard/video.mp4
Attach the file to this issue.

Note: Please avoid uploading directly to the issue using attachments. Please upload to google drive and share the folder to android-bugreport@google.com, then share the link here.

wo...@gmail.com <wo...@gmail.com> #3Dec 21, 2020 06:53PM

Android Build: 00WW_4_15C_SP02
Yes - it says (for example) "50% (pause) with value text (pause) slider"

vi...@google.com <vi...@google.com> #4Dec 22, 2020 01:28PM

Thanks for the above inputs. Could you please clarify the expected output.

jn...@gmail.com <jn...@gmail.com> #5Dec 22, 2020 06:45PM

I would expect it to read the value of aria-valuetext not the % as the author has specifically determined that this is the value that should be read. So in the example above it would read "5000 (pause) with value text (pause) slider"

Often in these cases the value is not even numeric. For example 2 of the sliders at https://w3c.github.io/aria-practices/examples/slider/slider-2.html (although these are ARIA sliders so I wouldn't expect them to work with Talkback until AOM is implemented)

vi...@google.com <vi...@google.com> #6Dec 23, 2020 11:18AM

We’ve shared this with our product and engineering teams and will continue to provide updates as more information becomes available.

ja...@gmail.com <ja...@gmail.com> #7Mar 24, 2021 04:43PM

W3C ARIA APG working group is creating the slider examples with role slider. According to multiple talkback testing reports, role slider does not work in reading the slider value or the changed value.

Review/talkback testing results comments:

https://github.com/w3c/aria-practices/pull/1746#issuecomment-774498523
https://github.com/w3c/aria-practices/pull/1746#pullrequestreview-600408013
https://github.com/w3c/aria-practices/pull/1755#issuecomment-778638021
https://github.com/w3c/aria-practices/pull/1755#issuecomment-782607921
https://github.com/w3c/aria-practices/pull/1746#issuecomment-784788395
https://github.com/w3c/aria-practices/pull/1746#issuecomment-787642775
https://github.com/w3c/aria-practices/pull/1746#issuecomment-787662740
I had video recording of talk back for the example in the issue. But I cannot find it. sorry.

Related ARIA APG slider role PR

vi...@google.com <vi...@google.com> #8Aug 25, 2021 02:16PM

Status: Won't Fix (Not Reproducible)

Marking as Won't Fix since this seems to be an issue with the site used for testing and not Chrome.

al...@google.com <al...@google.com> #9Aug 25, 2021 03:58PM

Status: Assigned (reopened)

Comment has been deleted.

Message last modified on Aug 25, 2021 04:10PM

al...@google.com <al...@google.com> #10Aug 25, 2021 04:13PM

I deleted my comment because of a mistake in expected/actual. Update coming shortly.

al...@google.com <al...@google.com> #11Aug 25, 2021 04:15PM

The initial report says the value text is ignored, but comment 2 and comment 3 indicate the following update should be made:

Actual: “50% (pause) with value text (pause) slider”
Expected: “50000 (pause) with valuetext (pause) slider”
(The "50000" is the aria-valuetext" and "with valuetext" is the label of the control).

I agree that we aren't matching ARIA usability expectations. Using aria-valuetext needs to override any reporting of a number or percentage.
For example, a slider could be used for "low", "medium", "high" or days of the week. The percentage would not make sense.
Please reference

https://www.w3.org/TR/wai-aria-1.2/#aria-valuetext
"If aria-valuetext is specified, assistive technologies SHOULD render that value instead of the value of aria-valuenow." (the current slider value is equivalent to aria-valuenow).

Note: the reporter in this case is the chair of the ARIA WG, so he knows what he's talking about. Please don't close without further discussion from an engineer.

bo...@gmail.com <bo...@gmail.com> #12Aug 25, 2021 06:09PM

Tested this with TalkBack 9.1 and Chrome 92.0.4515.159 (both latest versions as far as I could tell) and can confirm that the error is still present - input type range is still announcing values in percents. It's even happening for "barebones" input type range;

<label for="d">Select your donation from 100$ to 1000$</label> <input id="d" type="range" step="100" min="100" max="1000" value="100">

This bug is preventing usage of input type range for many other scenarios that need other ranges than 0-100%

Other screen-readers (on PC and iPhone) pronounce the values provided by developers.

Test page with 2 input type range examples : https://jsfiddle.net/mdu8903f/1/ (full page: https://jsfiddle.net/mdu8903f/1/show)

vi...@google.com <vi...@google.com> #13Oct 5, 2021 06:56AM

Could you please re-test the bug on Chrome version 96.0.4657.0 and above and share your feedback.

bo...@gmail.com <bo...@gmail.com> #14Oct 5, 2021 07:42AM

Re-tested with latest Google Chrome Canary and it seems that bug still persist - TalkBack is still announcing percents instead of values.

tested with https://codepen.io/jnurthen/pen/qBajpGz - all sliders announced %
tested with my example on https://jsfiddle.net/mdu8903f/1/show - both sliders announced %

Chrome Canary 96.0.4659.3

OS: Android 9; SM-G950F Build/PPR1.180610.011

Talkback 9.1 (12.1.0.397273305)

al...@google.com <al...@google.com> #15Oct 5, 2021 04:16PM

@mschillaci, see comment 14. Was this fixed in Canary yet?

ms...@google.com <ms...@google.com> #16Oct 5, 2021 04:27PM

Some of the example sliders in Comment #14 are numeric ranges, those should announce both the label and the value/percentage. It is only in the non-numeric ranges that we drop the percentage in favor of the aria-valuetext.

I'd suggest trying this with a data url rather than the codepen site. In a previously reported bug, b/176216946 Comment #8, I mention and showed how certain aspects of codepen simply don't work (like the onchange, which is setting the aria-valuetext), but if you take the same input slider as a data url they work fine. You could also use a standalone html file.

Try:

data:text/html;utf-8,<html><body><input type="range" min="0" max="20" aria-valuetext="small"> <input id="d" type="range" onchange="this.ariaValueText = (this.value*1000)"> <input id="dd" type="range" aria-valuetext="this is a test"></body></html>

All work fine on:

Phone: Pixel 3 XL
OS: Android 11, REL (SDK: 30)
Build: RQ3A.210805.001.A1
Chrome: 96.0.4661.0
TalkBack: 12.1.0.397273305

bo...@gmail.com <bo...@gmail.com> #17Oct 5, 2021 05:56PM

Thanks for the clarification. Was not aware of codepen problems. Thank you for clarification.

I just tested the data URL version (data:text/html;utf-8,<html><body><input type="range" min="0" max="20" aria-valuetext="small"> <input id="d" type="range" onchange="this.ariaValueText = (this.value*1000)"> <input id="dd" type="range" aria-valuetext="this is a test"></body></html>) and got this;

first input type range;
- on focus announced: "50% small, slider",
- one level up from default announced: "55% small slider",
- one level down from default announced: "45% small slider",
second input type range;
- on focus announced: "50% 50 slider".
- one level up from default announced: "55% 55000 slider",
- one level down from default announced: "45% 45000 slider",
third input type range;
- on focus announced: "50% this is a test slider".
- one level up from default announced: "55% this is a test slider",
- one level down from default announced: "45% this is a test slider",

Same code tested with NVDA and VoiceOver did not announce the percentages but only the values as I would have expected. I guess this is then still a bug (also citing comment #11 "I would expect it to read the value of aria-valuetext not the % as the author has specifically determined that this is the value that should be read.").

If this is not a bug - how do we get rid of the percents? Please try to imagine a web dev using the slider for donation between 1$ and 2000$, like in this example; data:text/html;utf-8,<!DOCTYPE html><html><head><title>Donation</title></head><body><label for="d">I want to donate: </label><input type="range" min="0" step="10" value="1600" max="2000" id="d" aria-describedby="dol"><span id="dol">$</span></body></html> TalkBack users will get a strange experience; "80% I want to donate slider dollar" gets announced if user chooses to donate 1600$...

I also tried data:text/html;utf-8,<!DOCTYPE html><html><head><title>Test</title></head><body><input type="range" min="0" step="10" max="2000" ></body></html> and getting "50% 1000 slider". This is better now as TalkBack announces the value but how could we stop getting the percents? Other screen-readers only announce values, so I would like to think that is the desirable behaviour.

Thanks for the improvement - this is already much better than percent announcements alone but is there any way for web developers to prevent announcement of percents and only announce the values?

al...@google.com <al...@google.com> #18Oct 5, 2021 06:00PM

I think if you use aria-valuetext you can avoid the percentage announcements.

That said, why would anyone ever want an upper bound on a donation amount? j/k

bo...@gmail.com <bo...@gmail.com> #19Oct 5, 2021 06:17PM

Some donations could be sometimes limited due to taxation etc. but changed it to loan :)

This seems to work OK now - no percentages announced;

data:text/html;utf-8,<!DOCTYPE html><html><head><title>Loan</title></head><body><label for="d">I want to loan: </label><input type="range" name="loan" min="0" step="10" value="1600" max="2000" aria-valuetext="1600$" onchange="this.ariaValueText = (this.value + '$')" id="d"></body></html>

Thank you!

ms...@google.com <ms...@google.com> #20Oct 5, 2021 06:35PM

Thanks for testing this further and for the clarifications!

I'm really unsure why the percentages are being read for the first set of input sliders. Anything with an aria-valuetext set should not read a percentage. See attached video where I go through those 3 sliders and I get "small, slider" for example, or "this is a test, slider", without any percentages read.

As far as the next slider, you beat me to it! The best way to get the percentages to stop is the aria-valuetext use, which you can set to be whatever your current value is, doing the onchange method you showed in Comment #19 will work. I've attached a video of this as well (recorded before I saw this comment :p).

As for the last one, yes percentages are correct there, and it is indeed a TalkBack specific behavior. Chrome isn't actually setting any percentages per se. We set the AccessibilityNodeInfo.RangeInfo [1] object on any range supported input node (minus nodes with aria-valuetext set), and on a user action we pass an AccessibilityEvent [2] to any listening accessibility services with the type TYPE_VIEW_SELECTED, and the event includes a "currentItemIndex" and "itemCount". TalkBack is then deciding to divide these and announces the percentage. (This is why other screenreaders, even on Android, may not announce a percentage)

[1] https://developer.android.com/reference/android/view/accessibility/AccessibilityEvent.html

[2] https://developer.android.com/reference/android/view/accessibility/AccessibilityNodeInfo.RangeInfo

Relevant Chrome code:

c++: https://source.chromium.org/chromium/chromium/src/+/main:content/browser/accessibility/web_contents_accessibility_android.cc;l=925?q=WebContentsAccessibilityAndroid::PopulateAccessibilityEvent&sq=&ss=chromium

Java: https://source.chromium.org/chromium/chromium/src/+/main:content/public/android/java/src/org/chromium/content/browser/accessibility/WebContentsAccessibilityImpl.java;l=2036?q=setAccessibilityEventBaseAttributes&ss=chromium

deleted

Restricted

0 B

deleted

Restricted

0 B

bo...@gmail.com <bo...@gmail.com> #21Oct 6, 2021 07:50AM

Thank you for fixing it.

I've reinstalled TalkBack and Chrome Canary and re-tested everything and can confirm that aria-valuetext does indeed prevent percentages to be announced by TalkBack.

So when testing following code it works as expected - values are announced with no percentages;

data:text/html;utf-8,<html><body><input type="range" min="0" max="20" aria-valuetext="small"> <input id="d" type="range" aria-valuetext="50000" onchange="this.ariaValueText = (this.value*1000)"> <input id="dd" type="range" aria-valuetext="this is a test"></body></html>

I guess this is now fixed as we can also override the default percentage announcements when we need to.

Thank you, looking forward to get this from Canary to main stream Chrome :)

al...@google.com <al...@google.com> Oct 6, 2021 02:21PM

Marked as fixed.