CODEWITHSUNDEEP
keyboard-shortcutsscreen-readers
KingMario
KingMario

Reputation: 171

While using screen reader such as NVDA, how to press Left or Right key?

While using screen reader such as NVDA, when left or right key is pressed, the screen reader reads the current or next element letter by letter.

If anybody knows how can I press left or right key to trigger the element's keypress event?

Thanks.

Upvotes: 0

Views: 1774

Answers (1)

slugolicious
slugolicious

Reputation: 17445

A screen reader has two modes: browse mode (where keyboard events are sent to the screen reader) and forms mode (where keyboard events are sent to the html element).

The default setting for most screen readers is to have automatic switching between the two modes for certain types of html elements, although you can manually switch between the two modes as well.

So the key to having keyboard events sent to your element is to use the right html element (these are elements that require keyboard focus management) or use the role for that element.

The following elements will automatically switch between browse mode (arrow key reading the next character) and forms mode (the html element handling the arrow key):

  • Combobox
  • Grid
  • Listbox
  • Menu or menu bar
  • Radiogroup
  • Tabs
  • Toolbar
  • Tree Grid
  • Tree View

Some of these elements have a native html element (eg, <input type='radio'>) but others require the role (eg, <div role='tablist'>).

If your component doesn't fall into one of these widgets, then you can use role="application" but I always caution about using that role. It's often misused and can make a website difficult to use for a screen reader user if the role isn't used correctly.

Upvotes: 2

Related Questions