Canvas "tabindex"=1

Questions
4

Here’s some additional information for anyone else who may be looking into this same question:

A positive tabindex should not required to receive keyboard events or for the canvas to gain focus. A tabindex > 0 is not advised by Accessibility Experts as it often leads to an unexpected tab order.

From WebAIM:

The tabindex attribute has three distinct uses:

  • tabindex="1" (or any number greater than 1) defines an explicit tab order. This is almost always a bad idea.
  • tabindex="0" allows elements besides links and form elements to receive keyboard focus. It does not change the tab order, but places the element in the logical navigation flow, as if it were a link on the page.
  • tabindex="-1" allows things besides links and form elements to receive “programmatic” focus, meaning focus can be set to the element through scripting, links, etc.

The BabylonJS team added a new property to the engine that allows us to set the canvas’ tabindex value. This property can be found in version 4.1.0-beta.21 and newer.

2 Likes