Skip to content
Surf Wiki
Save to docs
general/user-interface-techniques

From Surf Wiki (app.surf) — the open knowledge base

Spatial navigation

Ability to move through a webpage using arrow keys


Ability to move through a webpage using arrow keys

In computing, spatial navigation is the ability to navigate between focusable elements, such as hyperlinks and form controls, within a structured document or user interface according to the spatial location.

This method is widely used in application software like computer games.

In the past Web browsers have used tabbing navigation to change the focus within an interface, by pressing the tab key of a computer keyboard to focus on the next element (or to focus on the previous one). The order is based on that in the source document. For HTML without any style, this method usually works as the spatial location of the element is in the same order of the source document. However, with the introduction of style via presentational attributes or style sheets such as CSS, this type of navigation is being used less often. Spatial navigation uses the arrow keys (with one or more modifier key held) to navigate on the "2D plane" of the interface. For example, pressing the "up" arrow key will focus on the closest focusable element on the top (relative to the current element). In many cases, this could save many key presses.

This accessibility feature is available in a number of applications, e.g. Vivaldi web browser. For Vivaldi users, this allows a faster way to "jump" to different areas in long web pages or articles without manually scrolling and scanning with their eyes. Some examples, as noted above, include the key to jump to the next input field, but also the key with arrow keys (, , , ) to jump to various links and text headers.

Doug Turner (Mozilla), the Minimo lead developer, has created a couple of special Mozilla Firefox builds with this feature. Eventually, this may build as a default part of Firefox.

Nightly builds of WebKit (the layout engine used by Apple Safari and Google Chrome, among others) now have support for spatial navigation.

In games such navigation is represented by (for example) camera-relative movement.

References

References

  1. (22 April 2020). "Spatial Navigation". Vivaldi Technologies.
  2. WebKit changeset 55543 http://trac.webkit.org/changeset/55543
Info: Wikipedia Source

This article was imported from Wikipedia and is available under the Creative Commons Attribution-ShareAlike 4.0 License. Content has been adapted to SurfDoc format. Original contributors can be found on the article history page.

Want to explore this topic further?

Ask Mako anything about Spatial navigation — get instant answers, deeper analysis, and related topics.

Research with Mako

Free with your Surf account

Content sourced from Wikipedia, available under CC BY-SA 4.0.

This content may have been generated or modified by AI. CloudSurf Software LLC is not responsible for the accuracy, completeness, or reliability of AI-generated content. Always verify important information from primary sources.

Report