Skip to content
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

NVDA announces a button with role="switch" and aria-checked="true" as "pressed checked" #9187

Closed
iamrafan opened this issue Jan 22, 2019 · 11 comments · Fixed by #10782
Closed
Labels
Milestone

Comments

@iamrafan
Copy link

Steps to reproduce:

  1. Turn on NVDA and navigate to the button in the page(https://codepen.io/iamrafan/pen/NoPrBP?editors=1000) using NVDA
  2. Observe how the toggle button is announced

Actual behavior:

NVDA announces the toggle as "Improved dialog toggle button pressed checked"

Expected behavior:

The toggle is expected to be announced as "Improved dialog toggle button checked" or " Improved dialog toggle button pressed"

System configuration

NVDA installed

NVDA version: 2018.4

Windows version: Windows 10 Enterprise 1803

Does the issue still occur after restarting your PC? Yes

Have you tried any other versions of NVDA? Yes

@DrSooom
Copy link

DrSooom commented Jan 23, 2019

@iamrafan: Please list all browsers (including version) where this issue occurs. Thanks.

@LeonarddeR
Copy link
Collaborator

Comfirmed with Firefox 64.0.2 and Chrome. Firefox just ignores the aria-checked attribute with regard to the pressed state, Chrome seems to add both the checked and pressed states when aria-checked is true.

@jcsteh and @MarcoZehe: could one of you spread some light on this?

It looks like there are two ways to implement toggle buttons, both which are considered valid implementation strategies according to the Mozilla Developer Network.

  • role="switch", the pressed/unpressed state is covered with aria-checked
  • role="button", the pressed/unpressed state is covered with aria-pressed

@jcsteh
Copy link
Contributor

jcsteh commented Jan 23, 2019

Ug. Yet another piece of ARIA spec silliness.

  1. In terms of authoring, you're correct: for role="switch", you use aria-checked; for role="button", you use aria-pressed.
  2. The mapping spec maps both role="button" with aria-pressed and role="switch" to IA2_ROLE_TOGGLE_BUTTON.
  3. aria-pressed is mapped to the pressed state and aria-checked is mapped to the checked state, regardless of the role.
  4. Points 2 and 3 combined are somewhat problematic, as a client can't use the IA2 role to determine whether it should be looking for the pressed or checked state.
  5. Firefox chooses checked as per strict interpretation of the spec. Chrome seems to hedge its bets and expose both. IMO, it's hard to argue that either are "wrong" given the spec's weirdness on this matter.
  6. As per the spec, the object attribute xml-roles:switch is exposed for role="switch". IMO, we shouldn't have to use this to figure out what states to look for, but alsdkjfals.
  7. The spec says that switch is "a type of checkbox". That would suggest we should prefer to report "checked"/"not checked" to the user, though we may wish to create a new NVDA role for switch and report "on"/"off".
  8. In order to properly report these to the user, we're going to have to use xml-roles as per point 6. Alternatively, we could try to get the ARIA spec changed to expose ROLE_SYSTEM_CHECKBUTTON for role="switch" instead of IA2_ROLE_TOGGLE_BUTTON. However, getting that change into the spec and browsers and then to users will take months. Given that screen readers already have to look at IA2 attributes for various cases, it's probably not worth the effort at this point.

@iamrafan
Copy link
Author

iamrafan commented Jan 29, 2019

@DrSooom This specific issue occurs in both Chrome and Firefox

  AT/Browser Version Announced as
1 Edge/NVDA Microsoft Edge 42.17134.1.0 Microsoft EdgeHTML 17.17134 toggle button pressed
2 Chrome/NVDA 71.0.3578.98 toggle button pressed checked
3 IE/NVDA 11.345.17134.0 button
4 Firefox/NVDA 64.0 toggle button  not pressed checked

Do you want me to file separate issues for:

  1. NVDA not announcing the state in IE when aria-checked="true" ?
  2. NVDA announcing aria-checked="true" as not pressed in Firefox ?

@LeonarddeR
Copy link
Collaborator

@iamrafan, thanks for your report. I think the issue is clear to us, especially thanks to the clarification by @jcsteh in #9187 (comment). It looks like the browser vendors do not yet agree and the ARIA spec is pretty messy in this. I would advice against using the switch role altogether and use the button role with aria-pressed instead.

@jcsteh
Copy link
Contributor

jcsteh commented Jan 29, 2019

I honestly think trying to get the spec changed isn't worth the effort at this point. The simplest solution for now is to implement an overlay in NVDAObjects.IAccessible.ia2Web for xml-roles:switch, expose ROLE_CHECKBOX and remove STATE_PRESSED if present.

@LeonarddeR
Copy link
Collaborator

@jcsteh wrote:

The simplest solution for now is to implement an overlay in NVDAObjects.IAccessible.ia2Web for xml-roles:switch, expose ROLE_CHECKBOX and remove STATE_PRESSED if present.

What do you think about the alternative: Replace STATE_CHECKED with STATE_PRESSED? I think I prefer this approach:

  1. It respects the aria role. A switch behaves like a checkbox, but it is supposed to be a toggle button
  2. It will/can be consistent across browsers. It seems that Edge maps aria-checked to pressed in the case of switch, see NVDA announces a button with role="switch" and aria-checked="true" as "pressed checked" #9187 (comment)
  3. While it does not respect the ARIA spec, changing the role to CHECKBOX wouldn't follow the spec either. The only way to follow the spec would be speaking the negative CHECKED state if appropriate, but that would be really hacky and is definitely not the way I'd go. Using STATE_PRESSED consistently actually implements the spec as we would have intended it to be (i.e. having aria-pressed for switch instead of aria-checked).

@jcsteh
Copy link
Contributor

jcsteh commented Jan 30, 2019 via email

@LeonarddeR
Copy link
Collaborator

The spec says that a switch is "a type of checkbox". It doesn't say "a type of button". If you map it to checkbox, then speaking the negative checked state will "just happen" and is not hacky at all.

You're correct.

The fact that Edge treats it as a toggle button might be a convincing argument except that Edge will no longer be a real concern for much longer. :(

True. However, there is the UIA proxy for IA2, which I think will use the pressed state as expose by Chrome. I have to check that, though

Re #9219: the switches in Skype 8 really look like toggle buttons visually.

@michaelDCurran, may be you can cut the knot for us?

@LeonarddeR
Copy link
Collaborator

@leonardder commented on 31 Jan 2019, 14:33 CET:

There is the UIA proxy for IA2, which I think will use the pressed state as exposed by Chrome.

Nope, it looks like this is not yet complete. Both switches and buttons are treated as buttons, however there is currently no implementation for the relevant states. Tested with Windows build 18323

@MarcoZehe
Copy link
Contributor

I just ran into this again with Riot. They're using the switch role and aria-checked, which in Firefox (and Chrome) sounds really messy. I am trying to change it to aria-pressed instead, but was pointed to various conflicting views on this, including this issue. Because the AAM says to map this to a toggle button, I am inclined to argue for aria-pressed, and maybe file spec bugs just for posterity. That, for Riot, is at least a fix that works and stops NVDA from saying stupid things like "not pressed checked".

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging a pull request may close this issue.

6 participants