![Page 1: Spatial Navigation on the Web - GitHub Pages · Spec Heuristic processing model API Next Steps Demo 2. 3 Spatial Navigation? Two-dimensional navigation within the pages of web app](https://reader034.vdocuments.mx/reader034/viewer/2022052014/602badfc20f6c35b8704ba36/html5/thumbnails/1.jpg)
Spatial Navigation on the Web
TPAC 2018Breakout Session
Jihye Hong, LG Electronics
![Page 2: Spatial Navigation on the Web - GitHub Pages · Spec Heuristic processing model API Next Steps Demo 2. 3 Spatial Navigation? Two-dimensional navigation within the pages of web app](https://reader034.vdocuments.mx/reader034/viewer/2022052014/602badfc20f6c35b8704ba36/html5/thumbnails/2.jpg)
2
Overview
Spatial Navigation
Use cases
Spec
Heuristic processing model
API
Next Steps
Demo
2
![Page 3: Spatial Navigation on the Web - GitHub Pages · Spec Heuristic processing model API Next Steps Demo 2. 3 Spatial Navigation? Two-dimensional navigation within the pages of web app](https://reader034.vdocuments.mx/reader034/viewer/2022052014/602badfc20f6c35b8704ba36/html5/thumbnails/3.jpg)
3
Spatial Navigation?
Two-dimensional navigation within the pages of web app.
Navigate around your pages in an intuitive and robust way in various d
evices. (TV, PC, IVI, etc)
TV Web Application Grid-like Web Application
3
![Page 4: Spatial Navigation on the Web - GitHub Pages · Spec Heuristic processing model API Next Steps Demo 2. 3 Spatial Navigation? Two-dimensional navigation within the pages of web app](https://reader034.vdocuments.mx/reader034/viewer/2022052014/602badfc20f6c35b8704ba36/html5/thumbnails/4.jpg)
4
Use cases
Google’s Product (Image Search,Gmail,Google Docs)
Directional Cursor Navigation in Firefox
Spatial Navigation Featurein Vivaldi
4
![Page 5: Spatial Navigation on the Web - GitHub Pages · Spec Heuristic processing model API Next Steps Demo 2. 3 Spatial Navigation? Two-dimensional navigation within the pages of web app](https://reader034.vdocuments.mx/reader034/viewer/2022052014/602badfc20f6c35b8704ba36/html5/thumbnails/5.jpg)
5
Use cases
5
![Page 6: Spatial Navigation on the Web - GitHub Pages · Spec Heuristic processing model API Next Steps Demo 2. 3 Spatial Navigation? Two-dimensional navigation within the pages of web app](https://reader034.vdocuments.mx/reader034/viewer/2022052014/602badfc20f6c35b8704ba36/html5/thumbnails/6.jpg)
6
Need for Standard!
Evolving navigation for evolving layout in the web
Limitation of JS lib for handling iframe, shadow DOM
Less customization for consistent UX
6
![Page 7: Spatial Navigation on the Web - GitHub Pages · Spec Heuristic processing model API Next Steps Demo 2. 3 Spatial Navigation? Two-dimensional navigation within the pages of web app](https://reader034.vdocuments.mx/reader034/viewer/2022052014/602badfc20f6c35b8704ba36/html5/thumbnails/7.jpg)
7
History
Contribute patch (#8) to Chromium upstreamabout the Heuristic Behavior of Spatial Navigation
17.11
Introduce the Spatial Navigation@W3C TPAC 2017
18.04 18.09
IntroduceSpatial NavigationSpec Draft@CSS WG F2F
Release polyfill
18.08
7
![Page 8: Spatial Navigation on the Web - GitHub Pages · Spec Heuristic processing model API Next Steps Demo 2. 3 Spatial Navigation? Two-dimensional navigation within the pages of web app](https://reader034.vdocuments.mx/reader034/viewer/2022052014/602badfc20f6c35b8704ba36/html5/thumbnails/8.jpg)
8
Find the Primitive FeaturesProcessing Model APIs
8
![Page 9: Spatial Navigation on the Web - GitHub Pages · Spec Heuristic processing model API Next Steps Demo 2. 3 Spatial Navigation? Two-dimensional navigation within the pages of web app](https://reader034.vdocuments.mx/reader034/viewer/2022052014/602badfc20f6c35b8704ba36/html5/thumbnails/9.jpg)
9
Spatial Navigation in WICG
Processing Model
APIs
https://wicg.github.io/spatial-navigation/
9
![Page 10: Spatial Navigation on the Web - GitHub Pages · Spec Heuristic processing model API Next Steps Demo 2. 3 Spatial Navigation? Two-dimensional navigation within the pages of web app](https://reader034.vdocuments.mx/reader034/viewer/2022052014/602badfc20f6c35b8704ba36/html5/thumbnails/10.jpg)
10
Spatial Navigation Container
Scope for searching the focusable elements from the currently
focused element
Document, scrollable element (by default)
10
Currently focused element
Spatial Navigation Container
![Page 11: Spatial Navigation on the Web - GitHub Pages · Spec Heuristic processing model API Next Steps Demo 2. 3 Spatial Navigation? Two-dimensional navigation within the pages of web app](https://reader034.vdocuments.mx/reader034/viewer/2022052014/602badfc20f6c35b8704ba36/html5/thumbnails/11.jpg)
11
Basic Spatial Navigation Heuristics
1. Pressing from an element2. Find candidates within the
spatial navigation container
3. Select the best candidate 4. Focus the best candidate
11
![Page 12: Spatial Navigation on the Web - GitHub Pages · Spec Heuristic processing model API Next Steps Demo 2. 3 Spatial Navigation? Two-dimensional navigation within the pages of web app](https://reader034.vdocuments.mx/reader034/viewer/2022052014/602badfc20f6c35b8704ba36/html5/thumbnails/12.jpg)
12
Spatial Navigation Heuristic Behavior
Combining the UA-defined arrow key behaviors
Box 2
Box 4
Box 3
Box 2
Box 4
Box 3
Box 1
Box 2
Box 4
Box 3
1. Box 3 gains the focus 2. Pressing triggers the scrolling 3. Box 4 gains the focus when it comes into the view
Box 5 Box 5 Box 512
![Page 13: Spatial Navigation on the Web - GitHub Pages · Spec Heuristic processing model API Next Steps Demo 2. 3 Spatial Navigation? Two-dimensional navigation within the pages of web app](https://reader034.vdocuments.mx/reader034/viewer/2022052014/602badfc20f6c35b8704ba36/html5/thumbnails/13.jpg)
13
Spatial Navigation Heuristic Behavior
Combining the UA-defined arrow key behaviors4. Pressing moves down the scrollbar until the end
5. Pressing moves the focus out of the scroll area and Box 5 gains the focus
Box 2
Box 4
Box 3
Box 5
Box 2
Box 4
Box 3
Box 513
![Page 14: Spatial Navigation on the Web - GitHub Pages · Spec Heuristic processing model API Next Steps Demo 2. 3 Spatial Navigation? Two-dimensional navigation within the pages of web app](https://reader034.vdocuments.mx/reader034/viewer/2022052014/602badfc20f6c35b8704ba36/html5/thumbnails/14.jpg)
14
APIs
window.navigate(direction)
Move the focus to the best candidate in the corresponding direction
Mapping other key combinations
14
![Page 15: Spatial Navigation on the Web - GitHub Pages · Spec Heuristic processing model API Next Steps Demo 2. 3 Spatial Navigation? Two-dimensional navigation within the pages of web app](https://reader034.vdocuments.mx/reader034/viewer/2022052014/602badfc20f6c35b8704ba36/html5/thumbnails/15.jpg)
15
APIs
element.focusables(option)
Finds all the focusable elements inside thecontainer
Directly move the focus without manually scrolling
Box 1
Box 2
Box 4
Box 3
Box 2
Box 4
Box 3
15
![Page 16: Spatial Navigation on the Web - GitHub Pages · Spec Heuristic processing model API Next Steps Demo 2. 3 Spatial Navigation? Two-dimensional navigation within the pages of web app](https://reader034.vdocuments.mx/reader034/viewer/2022052014/602badfc20f6c35b8704ba36/html5/thumbnails/16.jpg)
16
APIs
Customize finding the best candidate
spatialNavigationSearch(), getSpatialNavigationContainer()
Navigate Events
spatial-navigation-contain CSS property
Infinite scroll Grouped elements
16
![Page 17: Spatial Navigation on the Web - GitHub Pages · Spec Heuristic processing model API Next Steps Demo 2. 3 Spatial Navigation? Two-dimensional navigation within the pages of web app](https://reader034.vdocuments.mx/reader034/viewer/2022052014/602badfc20f6c35b8704ba36/html5/thumbnails/17.jpg)
17
APIs
Customize finding the best candidate
CSS UI nav-* properties Auto
“The user agent determines which element to navigate the focus to in response to directional navigational input.”
Spatial Navigation Heuristics
https://drafts.csswg.org/css-ui/#nav-dir17
![Page 18: Spatial Navigation on the Web - GitHub Pages · Spec Heuristic processing model API Next Steps Demo 2. 3 Spatial Navigation? Two-dimensional navigation within the pages of web app](https://reader034.vdocuments.mx/reader034/viewer/2022052014/602badfc20f6c35b8704ba36/html5/thumbnails/18.jpg)
18
Try the Spatial Navigation!
https://wicg.github.io/spatial-navigation/demo/
https://www.npmjs.com/package/spatial-navigation-polyfill
18
![Page 19: Spatial Navigation on the Web - GitHub Pages · Spec Heuristic processing model API Next Steps Demo 2. 3 Spatial Navigation? Two-dimensional navigation within the pages of web app](https://reader034.vdocuments.mx/reader034/viewer/2022052014/602badfc20f6c35b8704ba36/html5/thumbnails/19.jpg)
19
Next Steps
Implementation
Chromium Open Source, Accessibility
Vewd
Chromium Patch and Spec Reviews
Vivaldi
Investigating about applying the Spatial Navigation
19
![Page 20: Spatial Navigation on the Web - GitHub Pages · Spec Heuristic processing model API Next Steps Demo 2. 3 Spatial Navigation? Two-dimensional navigation within the pages of web app](https://reader034.vdocuments.mx/reader034/viewer/2022052014/602badfc20f6c35b8704ba36/html5/thumbnails/20.jpg)
20
Next Steps
Spec Extension
Handling the various focusable elements
Improving the distance function
Managing the focus
https://allyjs.io/data-tables/focusable.html
20
![Page 21: Spatial Navigation on the Web - GitHub Pages · Spec Heuristic processing model API Next Steps Demo 2. 3 Spatial Navigation? Two-dimensional navigation within the pages of web app](https://reader034.vdocuments.mx/reader034/viewer/2022052014/602badfc20f6c35b8704ba36/html5/thumbnails/21.jpg)
21
Discussion
Open Questions
https://github.com/WICG/spatial-navigation/blob/master/explainer.md#open-questions
Github issues
https://github.com/WICG/spatial-navigation/issues
21
![Page 22: Spatial Navigation on the Web - GitHub Pages · Spec Heuristic processing model API Next Steps Demo 2. 3 Spatial Navigation? Two-dimensional navigation within the pages of web app](https://reader034.vdocuments.mx/reader034/viewer/2022052014/602badfc20f6c35b8704ba36/html5/thumbnails/22.jpg)
Thank you! : )