-
Notifications
You must be signed in to change notification settings - Fork 10
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Accessibility Assessment for Balloons and Static Electricity 1.2.0-accessible-instance.7 #109
Comments
Remaining issues are for Chrome 47, Windows 7, and JAWS 16
|
Sim loads and runs correctly with NVDA + IE11. I will try test to make sure that IE9 runs the sim. |
Sim seems to run correctly in IE9 + NVDA, but I notice two things:
|
@terracoda pointed out that this could be confusing to users or screen readers. With no links, they might not understand to 'tab navigate' through the page. Hopefully users will understand how to use forms that do not contain links. |
This would mean overriding the default browser behavior. This could be confusing or unconventional for users. If this is implemented, we will have to design another way for the user to reach the navigation bar. |
I am unclear if this ocurred with 'tab' navigation or if the user used additional keys to encounter this behavior. |
Done. |
…one balloon is on screen, see issue #109
Done. |
@jessegreenberg "I am unclear if this ocurred with 'tab' navigation or if the user used additional keys to encounter this behavior." I checked video. This is correct. |
This seems to be a Chrome specific accessibility issue at the moment. Chrome 'counts' the legend and accessible description, adding these elements to the reported number of fieldset elements. For instance, NVDA + Chrome reads the following when navigating to the first input element: <fieldset id="radio-button-group-14-35-417-492-484-474" role="radiogroup" aria-describedby="radio-group-description-14-35-417-492-484-474">
<legend id="legend-14-35-417-492-484-474-494">Balloon Controls</legend>
<input id="radio-button-14-35-417-492-484-474-468" type="radio" role="radio" name="18" aria-label="Remove green balloon" aria-checked="true">
<input id="radio-button-14-35-417-492-484-474-471" type="radio" role="radio" name="18" aria-label="Add green balloon" aria-checked="false">
<p id="radio-group-description-14-35-417-492-484-474">Toggle to conduct experiments with two balloons or just one.</p>
</fieldset> Remove green balloon, radio button, checked, two of four Occasionally in Chrome, the number of elements in the fieldset is not mentioned. Unable to track a pattern so far. |
@terracoda, thanks for clarifying! That makes sense. I will try to recreate the issue. |
Looks like we need to add |
@jessegreenberg "Screen reader pauses after screen summary" It seems screen readers and browsers may vary on this, so I am wondering if there is a way to stop things at the end of the Scene Summary and have the user choose what to do from there. |
@terracoda, OK sounds good. I haven't found a way to do that yet, but we can take a look. I updated the checklist. |
@jessegreenberg, I would use checked on its own in HTML5 instead of checked="checked". Both are allowed in HTML5, but checked="checked" is XHTML syntax, I think. |
@jessegreenberg I think it may be safe to remove the |
@jessegreenberg I quickly changed my static balloons-pdom in case that is helpful. |
Sounds good. I added 'checked' to the checked radio button, in addition to 'aria-checked' for the selected radio button. Tested well with NVDA + Chrome, IE, and Firefox. |
Thank you for claryfing @terracoda! I was able to reproduce this with NVDA + Chrome. Commit phetsims/sun@bf63323 fixed this issue as well. Without the 'checked' attribute, there was no priority for the focus, so the highlight went to the closest radio button depending on direction of navigation. The focus now correctly goes to the checked radio of the group. |
This works for buttons and the balloon, but not the radio button groups. Likely an issue for the RadioButtonGroup accessible peers. Should non focusable items also receive focus when the virtual cursor is navigating content? For instance, the sweater has no input control, but would it be helpful for the focus highlight to surround the sweater when the user is exploring its descriptions? |
This is a great question. It's worth discussing. Virtual cursor focus would have to be a visually different than real cursor focus, if we wanted to do this. I actually brought this up a long time ago, when I suggested that the Sim title should have some visual indication on page load, but the discussion didn't progress. I certainly find knowing where I am in a long text document helpful. Shall we run it by other folks? |
@jessegreenberg and @terracoda, I was reading your above comments about adding a focus highlight when using the virtual cursor to navigate the sim. I'm not 100% sure what you are talking about, but I think you mean the situation when a user is exploring a sim using a screen readers virtual/browse mode; where the user can explore a page without actually interacting with it and not having to rely on the pages built in focusable elements for navigation. If that's the case I'm not sure how possible it will be to track the virtual focus. This is something that the AT knows about and is likely not passed along to the browser. In the absence of focus/hover events it likely won't be possible to trigger the styling. Here is a simple article that talks about the various modes and how in virtual/browse mode the screen readers is actually working with a buffered version of the document ( http://tink.uk/understanding-screen-reader-interaction-modes/ ). An AT might have an option to track it's virtual cursor itself. I think VoiceOver does this. Although in the sim this may be in the wrong location if the parallel DOM elements are not inline ( I haven't experimented with this myself ). Hope that helps. |
@jobara, thank you for this explanation and information! It saved us lots of time. Your understanding was exactly correct. When I tried to change the SweaterNode so that it was represented by the description paragraph, it did not receive the focus event from interaction with the virtual cursor. As you said, will have no way to track AT virtual focus since it is not passed to the browser. Thanks for passing along this documentation, I will look forward to going through it. Understanding these interaction modes will be very helpful. |
I am also unsure if this is possible to force. It seems like it is up to the user to pause reading of the content after page load. Going through some documentation, I found http://webaim.org/techniques/screenreader/#how, specifically:
This is the only reference I have found, and I can't find any information about stopping the read with html or another API. |
@jessegreenberg i believe that is correct. Also, there are users who like to orient themselves first by listening to the entire document being read out. |
@jobara and @jessegreenberg Great discussion. I am very familiar with both of these articles, and I've shared the Léonie Watson's article before, here on github somewhere. Yes, it is correct that users can pause reading and go back and forth and they do. In fact, there are multiple ways to stop the screen reader from reading. I learned in my first interview that some users are very patient listeners, more so than I expected. The fact that the participant was so patient, made me wonder if it would be useful to have some kind of pause right after the scene summary. Let's leave control with the user, a great accessibility principle, and see what happens in our next interviews. |
@terracoda, I remember you posted that resource now. I didn't get a chance to go through it at that time, sorry about that! From the resource, I found this section very interesting:
We have encountered this behavior and assumed that something was broken. Interesting to understand that this is NVDA behavior. I would be very interested to know how many users know how and when to switch modes automatically. For now, one of our biggest challenge is to find aria roles to seamlessly transition between the two modes. |
Related to
From Léonie Watson's article, I don't think this is an issue to fix.
The virtual cursor alone will not interact with the radio button group correctly, and the browser will not know that virtual focus is over a radio button. |
Wonderful! @jessegreenberg thank you for highlighting the key points of this article that point exactly to the "issues". I think, I understand more clearly how screen reader navigation behaviour is different. In ChromeVox, the virtual cursor highlighting is built-in when it is navigating PDOM. The PDOM is off-screen, and not invisibly placed on top of the actual widgets. So, this is the kind of thing I was imagining, but this is a visual-bias. As long at the labels are clear from a "blind" perspective, the user should know what to do to activate the control whether they got there with the arrow key or whether they got there with the tab key. The tab key on a radio group allows the user to by-pass the group. Arrow keys are needed to arrow down into the group. This is the same way tabbed menus work, allowing for more efficient navigation and natural skipping of groups. I have a new/old request. Can we change the Balloon Radios (there are only 2) into a toggle button. I think a toggle button make more sense for these switch-like interactions. There are many of these across simulations. Can we discuss this. It seems fewer radios the better :-) |
Also, I'd like to re-share a link to a "course" on The Accessibility Tree by Bryan Garavanta. I find this course difficult to read, but we should find some useful information in here, like the following:
|
@jessegreenberg regarding:
Both NVDA and JAWS have inelegant commands to "pass key through" to the application:
And in JAWS 16 or higher, there is a setting a user can turn on to permanently set application keys to override JAWS shortcuts. The steps are explained in the following article How to Bypass Navigation Quick Keys. This article also describes how web author's can use I think we should try the JAWS
I do not know how to represent an Arrow Key in the dictionary pair above. |
@jessegreenberg, @jobara and @emily-phet As per the the discussion on Accessibility APIs and the frustrations we are having with discrepancies and disparities across screen readers, this article by Bryan Garavanta, How Browsers Interact with Screen Readers and Where ARIA Fits in the Mix is also very informative. It explains the different Accessibility APIs and the biases of screen readers for particular browsers. I think I shared this article before (sorry for the duplication). We can use the article to inform a more narrow, but informed and rigorous testing protocol. JAWS is optimized for IE, NVDA works best with Firefox. VoiceOver works best on iOS. According to Garavanta,
|
@terracoda, that is a great article, thank you for posting it. It contains great information on why browsers have varying levels of accessibility with each screen reader. Hopefully complex interactive components will eventually be accessible for all screen readers and browsers eventually. But for now this provides a more narrow scope for testing. |
We will have to see how JAWS presents this information, if at all. I expect that the key value pairs will be read so hopefully we can describe the arrow keys in any way we wish. But perhaps it literally maps the key to be passed in? That would require key codes for things like the arrows, but I haven't found an example of that yet. I am going to test all of this now. |
Regarding
This is fixed by removing the 'radiogroup' role. NVDA + Firefox still correctly lists the number of input elements. Chrome just does not provide that information. |
@jessegreenberg I just had a meeting with David Best. It was very enlightening. We used skype to talk and then we connected with a tool called TeamViewer. He connected me to his computer. I could watch what he was doing on his computer and hear and see how he used JAWS. I asked him about some of the technical problems we have been having: disparity, role application, screen reader user levels (what users may configure). He agreed with Garaventa's assessment. We won't be able to make sims to accessible for every possible configuration of browser and screen reader. Go for the widest and use ARIA techniques correctly. |
See #111. |
I observed this as well. |
@terracoda, that sounds like a great meeting. Looking forward to discussing this further with you at accessibility meeting. |
This issue is related to our ongoing investigation of the application role and how the screen reader intercepts key key events. For browsers and readers that support the letter (WASD) keys, this hasn't been an issue.
This is an accurate structure description of the parallel DOM. If this is confusing to users, we will need to change the DOM structure in some way. |
Since we are now up to accessible version 11 and new review items are listed under sim issues, closing this issue. |
@terracoda provided an assessment of accessible balloons-and-static-electricity after a student interview. The assessment outlines some technical issues with the accessible content. This is a compilation of the noted issues so that we can track progress and document comments and concerns.
The text was updated successfully, but these errors were encountered: