search

phetsims / a11y-research

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

New features for the A11y View #66

Closed zepumph closed 6 years ago

zepumph commented 6 years ago

@emily-phet and co would like to see:

UPDATE:

zepumph commented 6 years ago

Moving the alerts to the left of the page ended up being a pain. This is because we were treating the iframe in a special way in order to get scrolling to work. As a result I updated the page quite a bit. This way everything on the left is fixed, and will scroll as you navigate the right. This approach seemed best after a discussion with @mattpen about our options to make the page as robust as possible for our use cases. Tagging @jessegreenberg @terracoda for comments.

zepumph commented 6 years ago

These commits update all of the a11y views to this new style.

terracoda commented 6 years ago

@zepumph, no rush, but let me know how I can access the new a11y-view. Is there a way from phettest?

jessegreenberg commented 6 years ago

Nice work @zepumph, this makes sense to me. It is working great when I try master.

@terracoda I am not sure if there is a way to run this from phettest, but @zepumph might know more.

terracoda commented 6 years ago

@zepumph, I can run it from phettest.

terracoda commented 6 years ago

In a recent meeting with Kyle Keane we were demoing the A11y View of a few sims and he had a nice idea regarding the orange Interactive Alerts box.

He suggested that we show the last few alerts, like a mini-log of sorts.

I think this would be a nice way to address item four "Somehow make the alerts persist a bit longer?" in the list of todos in https://github.com/phetsims/a11y-research/issues/66#issue-278556805

@jessegreenberg, @emily-phet and I liked this idea, so I am just posting it here to keep it on the radar for further improvements in the New Year.

terracoda commented 6 years ago

Adding comments from #72. Will clean up duplicate improvements asap.

emily-phet commented 6 years ago

@terracoda @jessegreenberg Other than possibly propagating the 'fading list of alerts' across all PhET sims, I think this can wait until @zepumph returns in March. Placing "on hold" for now.

terracoda commented 6 years ago

@emily-phet, sounds good to me.

zepumph commented 6 years ago

I'm back, I'll add this to the list.

zepumph commented 6 years ago

Put main heading and main description above the two columns that represent the simulation. This will bring the dynamic content up further beside the iframe.

The reason why this was put over to the right side is because of complications with the implementation. Keeping the left side fixed while scrolling over the top heading was looking quite sloppy. The best decision I could come up with was to move the heading over to the right. We worked on a similar structure for the PhET-iO studio (instance-proxies) and it ended up being much easier to just lock the left column in the top left corner of the screen while scrolling through the left. @emily-phet and @terracoda after working for some time on the scrolling of the right side while the sim is still on screen in https://github.com/phetsims/chipper/issues/617, I recommend that we proceed in one of two ways:

  1. Have the heading above the two columns, but the sim and other left content will not stay on screen when scrolling to the bottom of the PDOM copy (blue) on the right.
  2. Figure out some way to have the intro on the left so the the scrolling can occur on the right with the sim continuously on screen.

I would prefer option 2 because the scrolling seems very beneficial to be able to see the sim and any PDOM content at the same time.

I am happy to talk more about this at a meeting or call if I am not explaining myself fully.

note to self. The commit where I changed the intro/heading from the top to the right is at the top of this issue.

zepumph commented 6 years ago

mock focus highlight appears on the copied pDOM (red border or something).

Note to self. I looked into using document.activeElement and then utilizing that trail or something to find its copy and add a class to it, but I'm not sure if I can put a listener on the activeElementProperty. I'll have to do more research later.

zepumph commented 6 years ago

I added mock focus highlighting just for BASE (since it is experimental). @jessegreenberg @terracoda @emily-phet please notice that not all components are surrounded (like the radio buttons), but otherwise what do you think? http://phettest.colorado.edu/balloons-and-static-electricity/balloons-and-static-electricity_a11y_view.html?brand=phet

Also there is bit of a delay, but we can work on that as well.

jessegreenberg commented 6 years ago

@zepumph this looks really nice! I think this will help indicate that the user is navigating the PDOM.

zepumph commented 6 years ago

Update on this issue,

Otherwise it looks like all that remains for this issue are the last checkboxe in https://github.com/phetsims/a11y-research/issues/66#issuecomment-358978999:

Change styling of meta content to make it visually distinct from the actual PDOM text.

@terracoda I am not totally following, could you please explain or provide an example?

We will also do #67 (Dynamic strings should use i tags instead of em tags #67).

emily-phet commented 6 years ago

@zepumph Sorry for the delay on this - regarding https://github.com/phetsims/a11y-research/issues/66#issuecomment-370918942, I think option 2 also sounds the best, but let's have a quick discussion about this tomorrow in the a11y meeting just to make sure my understanding of that option is correct.

zepumph commented 6 years ago

@emily-phet and I never talked, but I still took a bit of time exploring putting the intro and header on the left. I do not think there is enough space on that side for this, but I still tried to move some stuff around. All is pushed to master, I would love to talk about this soon, as I think this issue is close to closing.

Note: @terracoda can you please comment on what you meant by:

Change styling of meta content to make it visually distinct from the actual PDOM text.

terracoda commented 6 years ago

@zepumph, the meta content is the prelude part about the A11y View. The PDOM content is the actual sim's PDOM content.

Maybe we can use 2 different fonts. I'll find something as a first go.

zepumph commented 6 years ago

We discussed this issue in the meeting on Friday, and @emily-phet recommended a few minor changes to the headers, and that it was good. More changes may come later, but right now, the a11y view is pretty good, and we need to move on (@emily-phet correct me if I'm wrong).

Closing this issue