(mobile a11y) I hear percentages when using number spinners VO on iOS #283

terracoda · 2020-12-11T20:30:31Z

When using dev version 78 on iOS 13.5.1 I hear percentages

This happens when adjusting the number spinners.

I am not sure what the percentages are representing.

terracoda · 2020-12-11T20:37:21Z

To reproduce, use VO on iOS and adjust the number spinners.

terracoda · 2020-12-11T20:57:07Z

Oh, I think it is the actual value of the number spinner.
10 = 100 percent
1 = 0 percent
It happens in both iOS versions I have.

Maybe iOS is not getting aria-valuetext values.
Can the values just be 1 through 10 whether in aria-valuetext or in real numbers?

terracoda · 2020-12-11T20:58:30Z

This one might be easier than I originally thought.

zepumph · 2020-12-12T04:01:32Z

I'm not so sure, as that is what the values are currently, here is a copy from the a11y view copy on startup. Note that they have valuetext and valuenow. Yet still you get percents. I can test on my iOS iPad next week.

<div data-trail-id="1127-1128-1506-1512-1507-1794-1813-1811-1789" id="1127-1128-1506-1512-1507-1794-1813-1811-1789"
     data-focusable="false" class="pdom-sibling" tabindex="-1"><label
    data-trail-id="1127-1128-1506-1512-1507-1794-1813-1811-1789-1728-1727-1669"
    id="label-1127-1128-1506-1512-1507-1794-1813-1811-1789-1728-1727-1669" data-focusable="false" class="pdom-sibling"
    for="1127-1128-1506-1512-1507-1794-1813-1811-1789-1728-1727-1669" tabindex="-1">Left Value</label><input
    data-trail-id="1127-1128-1506-1512-1507-1794-1813-1811-1789-1728-1727-1669"
    id="1127-1128-1506-1512-1507-1794-1813-1811-1789-1728-1727-1669" data-focusable="true" class="pdom-sibling"
    type="range" aria-orientation="vertical" aria-valuetext="1" min="1" max="10" step="1" aria-valuenow="1"
    aria-roledescription="number spinner" tabindex="-1">
  <p class="pdom-style" tabindex="-1" style="opacity: 0.55;">1</p><label
      data-trail-id="1127-1128-1506-1512-1507-1794-1813-1811-1789-1788-1787-1729"
      id="label-1127-1128-1506-1512-1507-1794-1813-1811-1789-1788-1787-1729" data-focusable="false" class="pdom-sibling"
      for="1127-1128-1506-1512-1507-1794-1813-1811-1789-1788-1787-1729" tabindex="-1">Right Value</label><input
      data-trail-id="1127-1128-1506-1512-1507-1794-1813-1811-1789-1788-1787-1729"
      id="1127-1128-1506-1512-1507-1794-1813-1811-1789-1788-1787-1729" data-focusable="true" class="pdom-sibling"
      type="range" aria-orientation="vertical" aria-valuetext="2" min="1" max="10" step="1" aria-valuenow="2"
      aria-roledescription="number spinner" tabindex="-1">
  <p class="pdom-style" tabindex="-1" style="opacity: 0.55;">2</p></div>

terracoda · 2020-12-14T01:22:47Z

@zepumph, what is the purpose of the two P elements with content 1 and 2?

terracoda · 2020-12-14T01:24:34Z

Yes the aria attributes look correct. I will check my voice over settings. Maybe I have some weird setting turned on.

terracoda · 2020-12-16T18:49:21Z

I tested dev version 78 on both my phones.
I hear percentages on both iPhone7 with iOS 14.2 and on iPhone8 with iOS 13.5.1

I don't think I have enabled any weird VO settings.

And, @zepumph, I am curious about the purpose of the two P elements with content 1 and 2?

<p class="pdom-style" tabindex="-1" style="opacity: 0.55;">1</p>

and

<p class="pdom-style" tabindex="-1" style="opacity: 0.55;">2</p>

terracoda · 2020-12-16T20:36:41Z

@zepumph, I tested the pdom code on my macbook pro in a plain html page, and I do not hear any percentages. Note I had to remove two attributes from the input element code to get the number spinner to work without javascript:

tabindex="-1"
aria-valuetext="CURRENT VALUE"

I did notice that your code uses all HTML5 attributes for the number spinner values, i.e., min="1" max="10".
In the past, I think we have used the equivalent aria attributes, i.e., aria-valuemax="10" aria-valuemin="1".

I don't know if it will make any difference.

There is one noticeable difference on my local machine in plain HTML. For some unknown reason, when I used the HTML5 attributes the sliders go from 1 to 10, but when I use the exact same values with aria attributes, the values are ignored and the sliders go from 1 to 100.

I am not sure if the common code of the number spinners has always used HTML5 attributes or ARIA attributes.

terracoda · 2020-12-16T20:40:10Z

I just tested the number spinners in gravity-force-lab-basics, and I do not hear percentages on them.
I'll check the code.

terracoda · 2020-12-16T21:47:59Z

@zepumph, the same HTML5 attributes are used in GFLB's number spinners, however, there are some differences in the code.

The elements in RaP each have a hidden attribute. That's likely because of the accordion box show hide.
The RaP code has an extra paragraph element which looks like it is holding the current value of the number spinner (not sure). Actually, I see the paragraph element in your snippet, but not in my latest one.
The RaP code uses class="pdom-sibling", rather than class="a11y-sibling". I assume that's just a global name change.
The order of the attributes are slightly different (maybe). It's hard to tell.

I don't think any of these are significant differences, but something is different between the GFLB number spinners and the RaP number spinners.

zepumph · 2020-12-17T00:40:03Z

@KatieWoe reported over in #313:

For phetsims/qa#582. iPadOS 14.3 mobile VO
When going through the number pickers on the second screen for the my challenge option, VO will read out the number, then a percentage, making it confusing what is being selected/done. Note that due to phetsims/scenery#1094 I had to open the my challenge box before turning on VO to see this.
https://drive.google.com/file/d/10y6jxpKDGRTuC46q0HBuwDMvhdALzI4X/view?usp=sharing

zepumph · 2020-12-18T01:15:37Z

@zepumph, what is the purpose of the two P elements with content 1 and 2?

Oh sorry, that was from copying from the a11y view, ignore that.

zepumph · 2020-12-18T01:24:29Z

Most of the discrepancy you are discussing above is because I copied from the COPY in the a11yview, not the HTML in the sim. I'm sorry, I think that made for quite a bit of red herring in the above investigation.

Here is a better copy directly from the sim. I also cleaned up some of the superfluous attributes for clarity.

  <label
    id="label-1127-1128-1506-1512-1507-1794-1813-1811-1789-1728-1727-1669"
    for="1127-1128-1506-1512-1507-1794-1813-1811-1789-1728-1727-1669"
    style="top: 706.392px; left: 564.39px; width: 43.9883px; height: 68.3242px;">Left Value</label>
  <input
    id="1127-1128-1506-1512-1507-1794-1813-1811-1789-1728-1727-1669"
    type="range" aria-orientation="vertical" aria-valuetext="1" min="1" max="10" step="1" aria-valuenow="1"
    aria-roledescription="number spinner"
    style="top: 706.392px; left: 564.39px; width: 43.9883px; height: 68.3242px;">
  <label
    id="label-1127-1128-1506-1512-1507-1794-1813-1811-1789-1788-1787-1729"
    for="1127-1128-1506-1512-1507-1794-1813-1811-1789-1788-1787-1729"
    style="top: 706.392px; left: 646.981px; width: 43.9883px; height: 68.3242px;">Right Value</label>
  <input
    id="1127-1128-1506-1512-1507-1794-1813-1811-1789-1788-1787-1729"
    type="range" aria-orientation="vertical" aria-valuetext="2" min="1" max="10" step="1" aria-valuenow="2"
    aria-roledescription="number spinner" style="top: 706.392px; left: 646.981px; width: 43.9883px; height: 68.3242px;">

Here is a copy of one from GFLB:

<label 
                                 id="label-380-381-481-487-482-643-644-620-619-618-604" 
                                 for="380-381-481-487-482-643-644-620-619-618-604"
                                 style="top: 568.269px; left: 190.409px; width: 40.7049px; height: 54.5472px;">Mass   1</label>
<input 
                  id="380-381-481-487-482-643-644-620-619-618-604" 
                  type="range" aria-orientation="vertical" aria-valuetext="2 billion kilograms" min="1" max="10"
                  step="1" aria-valuenow="2" aria-roledescription="number spinner"
                  style="top: 568.269px; left: 190.409px; width: 40.7049px; height: 54.5472px;">

The only difference that I see are words in the aria-valuetext, perhaps VO is converting a single number ("1") into a percent somehow. When I am back with my iPad next week, I will test out and see if adding words to the value-text fixes this. Otherwise I am a bit stumped.

terracoda · 2020-12-18T16:20:31Z

@zepumph, that an interesting hypothesis. Since we only have 10 values, can you try just spelling out the values, one, two, three ... ten as a test?

…roportion#283

zepumph · 2020-12-31T21:08:48Z

I spelled them out and it worked. I wasn't sure if you wanted me to do this anywhere else but for the values of the number spinners. Should I change the description like "Current challenge 1 to 2" to use words also?

Just let me know what you would like, and please review.

If so I would apply this patch:

Index: js/common/view/describers/RatioDescriber.js
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/js/common/view/describers/RatioDescriber.js b/js/common/view/describers/RatioDescriber.js
--- a/js/common/view/describers/RatioDescriber.js	(revision e79314ec684b3f02471c8c9897aa64231935397f)
+++ b/js/common/view/describers/RatioDescriber.js	(date 1609448625214)
@@ -132,8 +132,8 @@
    */
   getCurrentChallengeSentence( antecedent, consequent ) {
     return StringUtils.fillIn( ratioAndProportionStrings.a11y.ratio.currentChallenge, {
-      targetAntecedent: antecedent,
-      targetConsequent: consequent
+      targetAntecedent: this.getWordFromNumber( antecedent ),
+      targetConsequent: this.getWordFromNumber( consequent )
     } );
   }

terracoda · 2021-01-03T23:18:02Z

That’s a great question. For consistency and assurance, it might be nice to change the Challenge numbers to words.

I am assuming there are only 3 options and this would be an easy change.

We only had trouble with the number spinners, but screen readers can treat numbers differently, so best to spell out the challenge options, too.

terracoda · 2021-01-03T23:18:28Z

Note, I haven’t reviewed yet.

terracoda · 2021-01-11T18:43:15Z

I just tested master from bayes/phettest and I no longer hear precentages.
Hardware: iPhone 7
Software: iOS 14.3
Screen reader: iOS VoiceOver
Browser: mobile Safari

Just going to double check on my other device.

terracoda · 2021-01-11T20:19:41Z

Hmm, with iOS 13.5.1 (not the latest iOS) on my iPhone 8 the sim doesn't load. The splash screen progress bar just keeps flashing.

To test there I will need a dev version.

I think it is safe to close this issue since I am no longer hearing percentages with the numbers on the number spinner spelled out.

Regarding, spelling out the other numbers (see comment #283 (comment)), I don't think it is necessary since they did not cause any trouble.

We'll have to keep this issue in mind for future sliders and number spinners.
Closing as main issue is resolved.

zepumph · 2021-01-12T17:46:10Z

I would like to find a place to document this generally. This doesn't block publication though.

zepumph · 2021-01-14T17:38:26Z

Or perhaps this problem came about because our default aria-valuetext is just the value. Perhaps we should remove that case, and the screen reader will just read the value from aria-valuenow. I will need to some testing on this. It is for after an RC is made.

zepumph · 2021-01-30T01:35:08Z

I tried removing aria-valutext by default in phetsims/sun#681 (comment), and it didn't get rid of the percents, so I bailed.

I then realized that this is potentially more than just a documentation problem. Percents will likely be spoken on iOS + VO for any AccessibleValueHandler that doesn't provide non-default aria-valuetext. So I created phetsims/sun#682. Closing

terracoda assigned zepumph Dec 11, 2020

terracoda added dev:a11y type:bug Something isn't working labels Dec 11, 2020

terracoda mentioned this issue Dec 15, 2020

Dev test: Ratio and Proportion 1.0.0-dev.77 phetsims/qa#582

Closed

9 tasks

zepumph mentioned this issue Dec 17, 2020

Mobile VO reads out percentages in number picker #313

Closed

zepumph added a commit to phetsims/scenery-phet that referenced this issue Dec 31, 2020

write out words for NumberPicker aria-valuetext, phetsims/ratio-and-p…

aab6e1b

…roportion#283

zepumph assigned terracoda and unassigned zepumph Dec 31, 2020

zepumph added the status:ready-for-review label Dec 31, 2020

zepumph added the status:blocks-sim-publication label Jan 4, 2021

zepumph added a commit that referenced this issue Jan 7, 2021

write out words for NumberPicker aria-valuetext, #283

e79314e

terracoda closed this as completed Jan 11, 2021

zepumph assigned zepumph and unassigned terracoda Jan 12, 2021

zepumph removed status:blocks-sim-publication status:ready-for-review labels Jan 12, 2021

zepumph reopened this Jan 12, 2021

This was referenced Jan 29, 2021

AccessibleValueHandler should not set a default aria-valuetext phetsims/sun#681

Closed

Should a11yCreateAriaValueText be required to prevent description percents on iOS? phetsims/sun#682

Closed

zepumph closed this as completed Jan 30, 2021

zepumph mentioned this issue Feb 1, 2021

Rewrite NumberPicker PDOM implementation phetsims/sun#683

Open

zepumph mentioned this issue Mar 18, 2022

Implement My Challenge AccordionBox #381

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

(mobile a11y) I hear percentages when using number spinners VO on iOS #283

(mobile a11y) I hear percentages when using number spinners VO on iOS #283

terracoda commented Dec 11, 2020 •

edited

Loading

terracoda commented Dec 11, 2020

terracoda commented Dec 11, 2020

terracoda commented Dec 11, 2020

zepumph commented Dec 12, 2020 •

edited

Loading

terracoda commented Dec 14, 2020 •

edited

Loading

terracoda commented Dec 14, 2020

terracoda commented Dec 16, 2020

terracoda commented Dec 16, 2020

terracoda commented Dec 16, 2020

terracoda commented Dec 16, 2020 •

edited

Loading

zepumph commented Dec 17, 2020

zepumph commented Dec 18, 2020

zepumph commented Dec 18, 2020

terracoda commented Dec 18, 2020

zepumph commented Dec 31, 2020 •

edited

Loading

terracoda commented Jan 3, 2021

terracoda commented Jan 3, 2021

terracoda commented Jan 11, 2021

terracoda commented Jan 11, 2021

zepumph commented Jan 12, 2021

zepumph commented Jan 14, 2021

zepumph commented Jan 30, 2021

(mobile a11y) I hear percentages when using number spinners VO on iOS #283

(mobile a11y) I hear percentages when using number spinners VO on iOS #283

Comments

terracoda commented Dec 11, 2020 • edited Loading

terracoda commented Dec 11, 2020

terracoda commented Dec 11, 2020

terracoda commented Dec 11, 2020

zepumph commented Dec 12, 2020 • edited Loading

terracoda commented Dec 14, 2020 • edited Loading

terracoda commented Dec 14, 2020

terracoda commented Dec 16, 2020

terracoda commented Dec 16, 2020

terracoda commented Dec 16, 2020

terracoda commented Dec 16, 2020 • edited Loading

zepumph commented Dec 17, 2020

zepumph commented Dec 18, 2020

zepumph commented Dec 18, 2020

terracoda commented Dec 18, 2020

zepumph commented Dec 31, 2020 • edited Loading

terracoda commented Jan 3, 2021

terracoda commented Jan 3, 2021

terracoda commented Jan 11, 2021

terracoda commented Jan 11, 2021

zepumph commented Jan 12, 2021

zepumph commented Jan 14, 2021

zepumph commented Jan 30, 2021

terracoda commented Dec 11, 2020 •

edited

Loading

zepumph commented Dec 12, 2020 •

edited

Loading

terracoda commented Dec 14, 2020 •

edited

Loading

terracoda commented Dec 16, 2020 •

edited

Loading

zepumph commented Dec 31, 2020 •

edited

Loading