intesting.
btw i tried the preview https://spatial-keyboard-navigation.vercel.app/ .. the 3 checkboxes at bottom left don't play well with up-down arrows , and dont show the focus when on ;
and the tab-keyed focus is not shown either..
Spatial Keyboard Navigation
11–20 of 23 posts
Re: Spatial Keyboard Navigation
#12While I do agree with the latter 2 points, (can't multi-jump, hard to memorize), the assertion
It follows the order of the DOM elements and not the visual position of these elements on the page, which means that it uses the HTML structure (not user-friendly), but it should go after the layout position (spatial position);
That being said, using "tabindex" (or having an out-of-order page structure) can cause accessibility problems for those using screen-readers and related programs.
From [0]:
Warning: Avoid using tabindex values greater than 0. Doing so makes it difficult for people who rely on assistive technology to navigate and operate page content. Instead, write the document with the elements in a logical sequence.
Re: Spatial Keyboard Navigation
#13Really neat. My biggest gripe is that there's a lot of good, neat, interesting semantic data you're marking up the JSX with, about Area and Anchor, and none of that information makes it into the rendered HTML. I'd love to just see something as basic as `data-area` attributes on things that are areas, to make this internal context this cool library makes a bit visible, knowable, & accessible, to whomever might want to explore it.
In a more WebComponent-ified world, I'd love to see these DOM components have left/right/up/down methods, that would return the components on it's sides.
Re: Spatial Keyboard Navigation
#14Looks great. I wish I could use keyboard navigation more because my wrist hurts from mouse, and mouse pointer is kinda hard to target. Is it possible to implement this thing as browser extension?
I think you'll find this presentation by Emily Shea on voice driven development to be intriguing. https://www.youtube.com/watch?v=YKuRkGkf5HU
aside, novel HIDs are IMO a huge market gap that I'd really like to invest time in if anyone wants to chat.
Re: Spatial Keyboard Navigation
#15Earlier quoted context omitted.
Why not wish for eye tracking so we could simply look at something? Then a subtle Soli gesture to select. https://atap.google.com/soli/ I always think of this blog where the person had to use their nose because their hands were in pain. http://www.looknohands.me/ Discussion from 7 years ago: https://news.ycombinator.com/item?id=8805053
Haha, eye only interface would be great. But why do I need Soli for it, wouldn’t webcam-based eye-tracking with one-eye blink for a click be enough?
No, you blink all the time. There have been many, many of these things tried and they all suck quite frankly. It’s best to find some other way to confirm a click, or perform a scroll, etc.
Webcams don’t have enough resolution to be so precise, need really good models to track your head and estimate pose, etc. You also aren’t illuminating anything with a web cam so dark eyes become difficult, glasses non-linearly, warp the eyeball, and a host of other problems. Webcam based approaches usually get very very rough areas that move around like crazy (very noisy).
Essentially the best way to do it is to have something mounted to your face that’s purpose built. There are external eye trackers that are attached to monitors that can do pretty well, but are usually very expensive. The cheaper ones aimed at gamers are quite inaccurate.
Re: Spatial Keyboard Navigation
#16Engineer who specializes in digital accessibility here.
I wanted to clear up a few misconceptions on this point:
"""There is no easy way to jump long distances in the interface: TAB key navigation obligates you to go through all elements between your starting point and the target point;"""
1. TAB key navigation obligates you to go through all elements
Tab actually should behave as the key to enter and exit widgets. Yes some widgets are a single item, like buttons and links, but for more complex widgets you should be using the Arrow keys to navigate.
For example: Example: Tabs - https://www.w3.org/TR/wai-aria-practices/examples/tabs/tabs-... Example: Dropdown Menu - https://www.w3.org/TR/2019/NOTE-wai-aria-practices-1.1-20190...
(Tip: Shift + Tab to move focus backwards on a page.)
Also pay attention to what happened when you move focus to the second tab and then move away from the Widget and then come back to it. You refocus to the previously active element, not the first on. This is called a "Roving Tabindex" a very common pattern.
This solves the problem of:
A. Having to press TAB a lot to move through a page
B. Making it clear when you enter and exit a widget
These specs/keyboard design patterns have existed for a long time, but most folks only focus on the WCAG which only talks about keyboard focus so folks think everything needs to be "tabable".
2. Tab is the only way to navigate with the keyboard
Nope. Most folks who use screen readers actually navigate by headings and page landmarks. Unfortunately that navigation isn't on by default but there does exist some extensions that can turn those on for everyone:
Extension: https://chrome.google.com/webstore/detail/landmark-navigatio... Code: https://github.com/matatk/landmarks
Re: Spatial Keyboard Navigation
#17This is really good! So good that it ought to be implemented in browsers in my opinion, probably as a set of additional `aria-*` attributes. In line with other common conventions, I'd also like to see Ctrl+Arrow to move between areas, home/end to move to the beginning/end of the current area, etc.
> So good that it ought to be implemented in browsers in my opinion
Vivaldi browser has had a similar form of spatial navigation for the longest while, which is the Chromium-based spiritual successor to Opera classic (using the Presto engine) which also had it.
Is very useful for navigating forum topics via keyboard and other dense lists of links across different columns/rows where one wants to jump around in a visual order manner.
Re: Spatial Keyboard Navigation
#18Looks great. I wish I could use keyboard navigation more because my wrist hurts from mouse, and mouse pointer is kinda hard to target. Is it possible to implement this thing as browser extension?
I think you'll find this presentation by Emily Shea on voice driven development to be intriguing. https://www.youtube.com/watch?v=YKuRkGkf5HU aside, novel HIDs are IMO a huge market gap that I'd really like to invest time in if anyone wants to chat.
You might want to see this pre alpha experiment for typing in keyboardless XR. For me these days when I hear 'Spatial' I think 3D systems with ray tracing controllers and hand tracking. You can also follow its dev on Twitter for more details.
Re: Spatial Keyboard Navigation
#19This used to be one of my favorite Google UI Engineer interview questions - how to implement something like this as a content script.
One of the fun "get away from math and into experience" bonus parts of the question was about how to deal with ambiguity - for example, if your elements are laid out like the 5 on a dice, and you focused on the middle element, which do you pick when you press left or right? What if you'd previously come from one of those elements?
Re: Spatial Keyboard Navigation
#20It is very intuitive but slightly buggy on Safari 15. The highlight will land half-way between elements but on the next keypress it will then correctly align itself with another element.