[Proposal] Spatial Navigation for the Web

Spatial navigation is the ability to navigate between focusable elements based on their position within a structured document. Spatial navigation is often called ‘directional navigation’ which enables four(4) directional navigation. Users are usually familiar with the 2-way navigation using tab key for the forward direction and shift+tab key for the backward direction, but not familiar with the 4-way navigation using arrow keys.

Regarding TV remote control, game console pad, IVI jog dial with 4-way keys, and Web accessibility, the spatial navigation has been a rising important input mechanism in several industries. If the Web can embrace the spatial navigation and effectively support the functionalities in Web engines and W3C APIs, it will be more promising technology for existing products as mentioned above and various upcoming smart devices.

In spatial navigation mode, the default behavior of arrow keys is changed from scrolling behavior to focus moving so that users can use the arrow keys to navigate between focusable elements based on their position. To support the functionalities of the spatial navigation, we could consider the following three steps:

1. API for enabling the spatial navigation mode (HTML/CSS/JS)
2. A heuristic algorithm for the spatial navigation in web engines
3. Overriding methods on top of the heuristic algorithm

See the entry of the github repository with explainer as follows.

We’d like to incubate this proposal in WICG and discuss several issues with the relevant organizations such as TV maker, Game console maker, IVI maker, etc. The specific issues would be covered in the suitable W3C working groups (mainly CSS WG).

Is this in addition to, or in stead of, the directional navigation in CSS UI 4?

https://drafts.csswg.org/css-ui-4/#keyboard

This proposal includes the directional navigation in CSSUI4, so I have been discussed with the editor of CSSUI4 for the specific issues of nav-up/right/down/left properties described in CSSUI4.

There have been several issues about the nav-* properties since a few years ago, so it should be solved in consideration of other standards (eg. Shadow DOM, scrolling, focus behavior, etc.), and implementation of web engine (eg. enhanced heuristic algorithm for the spatial navigation). It seems difficult to make progress due to some complex issues. That’s the mission of this proposal. I hope it would be handled with some relevant parties.

In explainer.md, you can find the current status of nav-* properties in CSSUI4 and other proposed APIs. https://github.com/lgeweb/spatial-navigation/blob/master/explainer.md

Could you elaborate on why this spatial navigation mode should be controlled by websites, and not be a user preference in the browser? On the surface, the latter makes more sense.

I think it makes perfect sense for the default behavior to be controlled by the User Agent, including by giving an explicit choice by the user, but at the same time, letting a web page author indicate that they have been deliberate about making sure their page works well with spatial navigation and turning that on (to the extent it is supported) seems useful to me as well.

@simevidas The input of the spatial navigation would be arrow keys in general. But the arrow keys already work on the web pages to control the UI of the page (such as a scroll bar, a volume controller, etc.). Therefore even the spatial navigation works, arrow keys also have to play their original role.

It could be useful if a page author can choose the priority of arrow keys’ behavior by choosing the spatial navigation mode.

For example, there is a web page with a scrolling area, and an object in that area is hidden. If the focus moves to the object, some want to control the scroll bar to scroll down and see the object, while others want to focus and move the object instantly in the view with scrolling down automatically.

At Vewd we would also like to see spatial navigation spec’ed.

For content that doesn’t implement navigation in JavaScript, we need well spec’ed browser-side heuristics.

We discussed this topic in W3C TPAC 2017. You can see the minutes here.

CSSWG resolved to work on this in WICG. This repo has been moved in here - https://github.com/WICG/spatial-navigation