2

Currently my React component consists of a few labels and one input box. And it has a view mode and en edit mode.

When I go into edit mode, NVDA automatically goes into forms mode, due to which I'm not able to enter any text in input box or navigate through labels using arrow keys.

By default, on pressing Enter, NVDA goes in forms mode (see NVDA's keyboard shortcuts for forms) which takes all next keyboard input as shortcut to some command. To come out of that mode, we need to use the NVDA key (Default is insert key) + space. After that, we can resume typing. We are not even able to navigate through arrow key as it begins reading each character.

Readonly : ReadOnly Looks like this

Edit Mode: Edit Mode looks like this

Is there a way to prevent NVDA from going into forms mode automatically? Any help would be appreciated.

NVDA Version : 2018.11 Firefox: 60.0.1 (64-bit)

TylerH
  • 20,799
  • 66
  • 75
  • 101
twarzo
  • 63
  • 2
  • 9

1 Answers1

2

I'm not sure I follow what the question is.

You have forms mode backwards. When in forms mode (meaning, that you're in a <form>), you want to type stuff into input fields and such. The keyboard events go to the form instead of to the screen reader so that what you type is what you see.

When you exit forms mode, you're back in "screen reader mode" and characters that you type will be interpreted as screen reader quicknav keys (such as 'B' to go to the next button, 'T' to go to the next table, etc).

NVDA (and JAWS) have options on whether to automatically go into forms mode when focus goes to a form element.

So given that, are you asking how you can force a screen reader to switch modes?

slugolicious
  • 15,824
  • 2
  • 29
  • 43
  • Currently my react component consists of few labels and one input box. And it has view mode and edit mode, when I go into edit mode, NVDA automatically goes into form mode due to which I'm not able to enter any text in input box or navigate through labels using arrow keys. Is there a way to prevent NVDA to go into Form mode automatically? – twarzo May 22 '18 at 04:26
  • so you have an `` that can toggle between being editable and readonly? i made a simple example that would toggle the value of the `readOnly` attribute between `true` and `false` and no matter the value, nvda would switch to forms mode when focus went to the input field. however, if i hit Escape while on the input field, forms mode would exit and i could use the screen reader commands again. are you trying to prevent switching to forms mode when the focus moves to a readonly field? – slugolicious May 22 '18 at 18:35
  • I've updated the question with readonly and edit mode screenshots. Are you saying that if the focus is on input field nvda turns into form mode? – twarzo May 23 '18 at 05:17
  • yes, certain html elements automatically go into forms mode when they receive focus, although as mentioned earlier, you can turn off the "automatic" mode in the screen reader settings. you really shouldn't be trying to force one mode or the other. the screen reader user should have control over that. as long as the `readOnly` attribute is set (for native `` fields) or the `aria-readonly` attribute is set if you have a custom element, you should be ok. as long as i hear 'read only' when i navigate to the field, it doesn't matter if i'm in forms mode. – slugolicious May 24 '18 at 17:56