search

phetsims / a11y-research

a repository to track PhETs research into accessibility, or "a11y" for short
MIT License
3 stars 0 forks source link

VoiceOver duplicates alerts in iframes #132

Open terracoda opened 5 years ago

terracoda commented 5 years ago

I always seem to hear ARIA Live alerts twice when using a screen reader with the A11y View. I do not hear aria-valuetext twice.

@zepumph, mentioned yesterday that there is a role="presentation" on the copy of the PDOM to silence it. Perhaps we need the same on the copy of the aria-live-regions from where the alerts are delivered?

Not a huge priority, but this would greatly improve the A11y View if someone happens to be using a screen reader. This would be good to fix before our next conference where a demonstration might happen.

Assigning to @jessegreenberg for re-assigning and prioritizing.

jessegreenberg commented 5 years ago

Interesting, I am not sure why alerts are getting duplicated sometimes. @terracoda I assume you are using VoiceOver right? I don't get any duplicate alerts when running the a11y view in Firefox with NVDA. We are not copying any of the aria-live elements into the a11y-view, and aria-live isn't anywhere outside of the iframe. Ill try adding role="presentation" on the yellow box that displays the alerts to see if that helps.

jessegreenberg commented 5 years ago

role='presentation' has been added to the list in the a11y view showing alerts. @terracoda can you please test to see if that fixed the issue?

EDIT: To test you will have to use a built version of the sim after this change, like http://phettest.colorado.edu/friction/build/phet/friction_a11y_view.html, through VPN.

terracoda commented 5 years ago

@jessegreenberg, this might only happen with sliders. I was testing Gravity Force Lab Basics when I logged the issue. In GFL:B I regularly hear duplicate force alerts on focus and when moving.

I just checked John Travoltage's Leg Swing slider and the electron alert repeats pretty regularly in that sim, too, when moving the leg and picking up changes.

In Resistance and a Wire the duplicate alerts are much less frequent. I only seem to get a duplicate alert for the changing letters and changing resistance after moving one of the sliders quickly and with more than 3 quick key presses.

Hmm, I do get duplicate alerts in Friction, too, several alerts repeat. They do not repeat when I use the regular sim.

Yes, I am using Safari and VoiceOver on Mac OS 10.13.6

jessegreenberg commented 5 years ago

OK, thanks @terracoda, Ill take a look at the sliders specificially in GFL:B/RIAW/Friction.

terracoda commented 5 years ago

@jessegreenberg as you know, Friction does not have a slider, but the alerts are repeating. I haven't tested BASE.

jessegreenberg commented 5 years ago

OK sounds good. We are trying a service called MacinCloud for debugging since I don't have access to a Mac. Ill take a look there, and if VoiceOver works on that service I will be able to debug this fully.

jessegreenberg commented 5 years ago

I tried MacinCloud today, I wasn't able to get audio to work on it so I couldn't hear VO. I submitted a report to them, hopefully we will hear back soon. VO seems to work on that service, I can see the black focus highlight move around, but the display is stuck on image

So I can't see what it is saying. Ill try again when we hear back from them.

terracoda commented 5 years ago

@jessegreenberg, perhaps the repeat alerts when using VoiceOver has to do with the iframe? I have long suspected this as I also hear a lot of duplication in the sonification wrapper when I use Voice Over.

In the latest sonified sonified GFL:Basics

I just heard repeat UI alerts for all the checkboxes and repeat force alerts when moving the spheres. I also heard repeat force alerts when changing Mass, but only if I change Mass quickly.

However, FYI, I just cleared my cache and reloaded the sim and now things are not repeating.

This is very strange behaviour. Let's not spend too much time on this since you don't ever hear repeat alerts in NVDA. It seems to be a VoiceOver problem, and nobody but us uses the A11y View and the sonification wrapper.

I'll keep some notes on when I hear repeat alerts when testing.

jessegreenberg commented 5 years ago

That is a good idea @terracoda, interesting that it is happening in the sonification wrappers too.

However, FYI, I just cleared my cache and reloaded the sim and now things are not repeating.

That is also good to know. Removing my assignment for now, will try again once I have access to a test device. I would like to try an aria-live alert in a very basic iframe to see if we can get repetition outside of a sim.

emily-phet commented 5 years ago

@jessegreenberg

@terracoda mentioned this repeating behavior occurred in an interview with a consultant yesterday - not in the a11y-view, but in the sonification wrapper. Would it be worth asking the QA team to spend some time trying to reproduce this repeating behavior in contexts where the sim is in an iframe? It seems like it would be good to track this down, since we often user test with wrappers and repeating behavior can derail an interview.

jessegreenberg commented 5 years ago

OK, that sounds good. @KatieWoe could you please test this link with macOS VoiceOver and see if you get duplicate alerts?

https://phet-dev.colorado.edu/html/gravity-force-lab-basics/1.0.0-dev.38/phet/gravity-force-lab-basics_a11y_view.html

In https://github.com/phetsims/a11y-research/issues/132#issuecomment-466956319 @terracoda mentioned that clearing cache and reloading made the bug go away, so if you don't see the bug please reload the sim a couple of times and try again.

Then, can you then try to reproduce in this simple iframe example and let me know if you can? Again, try reloading if it doesn't happen right away.

https://phet-dev.colorado.edu/html/jg-tests/aria-live-iframe/iframe-example.html

Thank you!

KatieWoe commented 5 years ago

First link it did repeat alerts. Second link, the screen reader would read instructions when you focus on the button. If you push it during these instructions, it reads the alert twice. If you do not, it does not.

jessegreenberg commented 5 years ago

Thanks @KatieWoe, sounds good. @twant sorry to ask again, but this is another VoiceOver specific problem so would you be able to help debug this? Could we meet again next week to take a look? This one should be easier to reproduce :)

twant commented 5 years ago

@jessegreenberg Yep, let's take a look! I'll slack you about times.

@KatieWoe does this happen on all browsers and versions? I know Jesse and I tested for a different bug on a couple different versions of Safari (and got different results on each), as well as Chrome. Let me know if there's a specific browser you'd like me to use as Jesse and I work on this!

KatieWoe commented 5 years ago

The platforms we support and test on are:

jessegreenberg commented 5 years ago

Since I have access to a macOS now I shouldn't need to pair for this. Thanks for the offer to help @twant, Ill let you know if I need assistance!

I just saw this in another JSFiddle while looking into another issue.

jessegreenberg commented 5 years ago

I created the following HTML pages to test Wrapper:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>iFrame alerts</title>
  </head>
  <body>

    <iframe src="content-page.html"></iframe>

  </body>
</html>

Frame content:


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>contentpage</title>
  </head>
  <body>
    <div id="alerter" aria-live="assertive">Alert here...</div>
    <button id="button">Trigger alert</button>
  </body>

  <script type="text/javascript">
    const button = document.getElementById( 'button' );
    const alerter = document.getElementById( 'alerter' );

    let counter = 0;
    button.addEventListener( 'click', ( event ) => {
      alerter.textContent = 'New Alert: ' + counter++;
    } );

  </script>
</html>

The issue is NOT present in this example. I also just tested in. I just tested the a11y-view on master and I am not getting the duplication there anymore either. I am also not seeing this in another example I made earlier and forgot about in https://github.com/phetsims/a11y-research/issues/132#issuecomment-492290620.

But I just tested in the gravity-force-lab a11y view and I do see consistent repetition for some alerts but not others. This isn't happening consistently. It seems to happen when an alert comes after a value change from the number spinners or check boxes. But it never happens after just clicking the button.

jessegreenberg commented 5 years ago

Changing the content HTML in https://github.com/phetsims/a11y-research/issues/132#issuecomment-527689724 to use a slider instead of a button has the alerts duplicate every time.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>contentpage</title>
  </head>
  <body>
    <button id="button">Trigger alert</button>

    <input type="range" id="slider">
    <p id="alerter" aria-live="polite">Alert here...</p>
  </body>

  <script type="text/javascript">
    const button = document.getElementById( 'button' );
    const slider = document.getElementById( 'slider' );
    const alerter = document.getElementById( 'alerter' );

    let counter = 0;
    button.addEventListener( 'slider', ( event ) => {
      alerter.textContent = '';
      alerter.hidden = false;
      alerter.textContent = 'New Alert: ' + counter++;

      window.setTimeout( () => {
        // alerter.textContent = '';
        alerter.hidden = true;
      }, 200 );
    } );

    slider.addEventListener(  'change', ( event ) => {
      alerter.textContent = 'Slider Alert: ' + counter++;
    } );

  </script>
</html>

So the duplication happens when there is some input, then announced value change, then aria-live alert.

jessegreenberg commented 5 years ago

I searched for any info online or other reports of this and didn't see anything. I also tried different combinations of the aria-live attributes listede here to see if any would for some reason prevent this VO bug but nothing made an impact. I don't think this is anything we can work around unfortunately. I will write a bug report and submit to apple.

Pinging @terracoda and @emily-phet so they are aware of the status of this issue for user testing.

jessegreenberg commented 5 years ago

Report generated but Feedback Assistant is temporarily out of service. Will try again later.

emily-phet commented 5 years ago

@jessegreenberg Thanks. Sounds like we'll have to live with repeated alerts when user testing or designing with people using screen readers. This is another reason to move the sound design work away from using the wrappers, which I think is where we're headed.

Haptics and other work still in wrappers will just need to keep this in mind when planning studies, etc.

terracoda commented 5 years ago

@jessegreenberg, indeed the duplication is inconsistent, even in the example links you provided above. Apologies for being late to this issue. For me this duplication happens in the current A11y Views for GFLB in the following cases:

Edited Sept 4th when I noticed that number-picker sliders behaved differently than the regular sliders.

terracoda commented 5 years ago

I added the above comment because I wasn't sure a checkbox was a value change, but maybe it is? It certainly is in some cases.

jessegreenberg commented 5 years ago

OK thanks @terracoda that aligns with what I was seeing. Maybe instead of value it is more just any state change that gets read by VO like checked, pressed, value or things like that.

Report has been successfully submitted.