search

phetsims / a11y-research

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

Link to keyboard shortcuts in scene summary #49

Closed jessegreenberg closed 6 years ago

jessegreenberg commented 7 years ago

In the scene summary for a few sims I have seen a bullet that looks like

If you need to, check out the <a>keyboard shortcuts</a> for this sim.

The keyboard help dialog is typically opened with a button that just toggles its visibility. Is this shortcut necessary? If so can it be a button? If a link, is it OK if there is no destination?

terracoda commented 7 years ago

@jessegreenberg, I have some notes on this.

The idea for the link to a button rather than a direct button was to make it a little less desirable on initial startup. We don't want it to get in the way. However, for people who really need it, they are told right away where it is.

My earlier research convinced me that it was legal to link to a button on page, though it is not super common.

@jessegreenberg , what do you mean by no destination? Is the navbar not there on screen load?

jessegreenberg commented 7 years ago

I see, thanks.

My earlier research convinced me that it was legal to link to a button on page, though it is not super common.

Interesting, I didn't realize that. I am not too sure yet how that would work.

what do you mean by no destination?

I meant that I don't know what the href would be, I don't know what the link would point to.

jessegreenberg commented 7 years ago

Is the link going to open the dialog or send focus to the button in the navigation bar?

terracoda commented 7 years ago

@jessegreenberg, the idea was to link to the button, not open the dialog. If we take this approach, the href for the anchor would be the id of the button.

 <a href="keyboard-shorcuts-button>keyboard shortcuts</a>
      ...sim content here...
<button id="keyboard-shortcuts-button">keyboard shortcuts</button>
jessegreenberg commented 7 years ago

I see thanks! It looks like if we prefix the id with a '#', it should work.

jessegreenberg commented 7 years ago

Hmm, but that updates the url, is that reloading the page?

terracoda commented 7 years ago

@jessegreenberg, good catch. Yes, internal page links are added to the url. I don't know about page refreshing, but that url would take focus to the button and not the top of the sim if someone were to copy and paste the link into another browser tab.

jessegreenberg commented 7 years ago

Scenery might not support this out of the box. Since scenery doesn't use DOM id's anymore we will need to add a way to get the id for the href. We will also need to make sure that we can add this in a secure way. Including a link in a translatable description might will introduce cross site scripting vulnerabilities.

jessegreenberg commented 7 years ago

Hmm, but that updates the url, is that reloading the page?

Some google searching says it will not reload the page.

but that url would take focus to the button and not the top of the sim if someone were to copy and paste the link into another browser tab.

I am not sure if that is a problem, what do you think @terracoda?

terracoda commented 7 years ago

@jessegreenberg, as long as the url works, I don't think it is a problem.

mbarlow12 commented 7 years ago

Not sure if this is supported, but if we're trying to simply move focus to the dialog button, we could also utilize data attributes. That might offer a cleaner/more secure way to interact with Scenery. This also wouldn't append '#...' to the url.

jessegreenberg commented 7 years ago

@mbarlow12 and I discussed potentially adding data attributes as a way to manage focus. We also talked about using a click listener instead of href as a way to send focus to the button, and this would likely integrate with Scenery more directly, and also wouldn't modify the URL at all.

jessegreenberg commented 7 years ago

@terracoda are you OK with the link not being in the focus order?

EDIT: particularly because it is 'invisible' to sighted users and there won't be anything to focus?

jessegreenberg commented 7 years ago

Click event works great, thanks @mbarlow12.

So now we need to solve two more issues:

jessegreenberg commented 7 years ago

Since there is only one KeyboardHelpButton in a sim, we can use a singleton pattern and get the instance statically from anywhere.

The string for the link needs to be translatable, and the formatting needs to work for RTL languages.

It seems that PhET does not support embedding links in text, this doesn't work for internationalization. Here is what I have been thinking:

@terracoda a couple of potential solutions are:

I prefer the first option.

terracoda commented 7 years ago

@jessegreenberg,

jessegreenberg commented 7 years ago

All sounds good @terracoda, thanks. Reassigning to me to implement.

jessegreenberg commented 7 years ago

It sounds like RichText will now support adding arbitrary callbacks to the links, which means that we should be able to support the original scene summary item with an embedded link in a way that is safe and i18n friendly!

If needed, check out the <a>keyboard help</a> for more information

(thats might not be the exact working)

terracoda commented 7 years ago

@jessegreenberg, I had

If you need to, check out <a href="#keyboard-shortcuts">keyboard shortcuts</a> for this sim.

However,

If needed, check out <a href="#keyboard-shortcuts">keyboard shortcuts</a> for this sim.

is shorter.

terracoda commented 6 years ago

As discussed in the Ohm's Law repo https://github.com/phetsims/ohms-law/issues/99, we are putting this idea on hold, as the link be the first item in the tab order for all sims...likely not what we want.

Providing the hint that help for keyboard use exists is likely just enough:

We are trying these phrases in BASE and OL.

terracoda commented 6 years ago

Closing this issue.