Welcome to Lost in Navigation.

Let's imagine that our mouse has disappeared
Press the ⬇ arrow key 66 times as fast as you can

The first thing we’d do is probably using the keyboard keys.

But.

Notice.

How.

This.

Can.

Get.

Out.

Of.

Hand.

We could add something like alt to our arrow functions....
4 times [Alt] + ⬇ key (3 sec in between)

To make us jump a page down each time.

but

that

is

annoying

when

text

gets

cut

off

and

you

can’t

read

it

gradually

so

it

gets

confusing

Did you notice how the words are cut off a bit at the top or bottom?

One more [Alt] + ⬇ key

Caret navigation/browsing

So have you heard of caret browsing?

Not in Chromium browsers at the moment. Edge are moving to Chromium. In the mean time we can go find Caret browsing extension. Press F7 when done getting it

Make sure to disable keyboard shortcuts that may collide with this function

Note: You will jump back to the top and have to use caret navigation to get back here and then keep going. Caret browsing will also work better if you position it after the first character before pressing down

Now I can

skip

the

space between

And you can highlight!

Try highlighting some text with shift + arrow buttons before carrying on

It’s not perfect though…

How am I supposed to type in this input?

Try getting to the X first using ➡️ key 20 times and the the ⬇️ arrow keys as far as you can

And if I have two columns. How are you going to jump to the next column? You know you're going to have to go through this whole column before you can go to the next one. You're going to have to use the ⬇️ arrow key to get to the bottom and then the ➡️ arrow key to get to the next column.

Get to the X here in the second column. This X!

It will then pop back to here finally!

Then I can make it disappear

Move caret all the way to left and press ⬇️ once with caret browsing on to make it disappear




It sometimes acts weird when there are a lot of spaces

Linear navigation

At least we know how to fix not being able to type in the input issue. We can go to the input element right away. Simply using linear navigation.

Press TAB once

Note that it will jump to the first input field first though because the caret navigation isn’t native yet.

Tabbing between inputs is nice especially for forms…

But most browsers have links sometimes there are links in the way

Let’s have a look at the Vivaldi settings to see whether we can enable a different sort of cycling. There is a possibility to go through only the forms… That would be nice

  1. Go to Vivaldi settings and Under the “Webpage” group. vivaldi://settings

  2. Go to Webpages category or search for Webpage Focus

  3. Choose Focus Forms Only (which is on by default in Vivaldi)

Access key

<input accesskey="a" value="what" />

Press CMD + E on Mac or F2 on Windows and type access keys in Vivaldi

Press ESC and then alt + ⬇️ to read a bit about access keys

Then use access key to CTRL + ALT + 5 to go to spatial navigation section

An access key allows you to immediately jump to a specific part of a web page via keyboard.
Introduced in 1999 (near-universal browser support).
Summer of 2002, a Canadian Web Accessibility consultancy, did an informal survey.
For users where point and click is not an option for them.
Found that most key stroke combinations did present a conflict for one or more of these technologies.
Recommended to avoid using accesskeys altogether.

In XHTML 2, the HTML Working Group of the World Wide Web Consortium deprecated the accesskey attribute in favor of the XHTML Role Access Module.
However, XHTML 2 has been retired in favor of HTML5, which (as of August 2009) continues to permit accesskeys. In 2004, a standard emerged using numbers. These include, for example, 1 to go to the homepage, 4 for search, 9 for contact, and others.
Rarely implemented today.

Ten years later, 2014, they tried again: This is what we have

Access Key Scope Location Window/Tab
0 (zero)PageHelpNew Window
1 (one)SiteHome
2 (two)SiteSign-up / Create Account
3 (three)SiteSite Map
4 (four)PageSearch
5 (five)PageLicense
6 (six)PageCopyright
7 (seven)SitePrivacy Policy
8 (eight)SiteTerms & Conditions
9 (nine)SiteContact Form and/or Details
Access Key Scope Location Window/Tab
k (K)SiteAccess KeysNew Window
p (P)PagePrevious Article
n (N)PageNext Article
t (T)PageBack to Top
i (I)SiteLogin
o (O)SiteLogout
b (B)SiteBlog / News
f (F)SiteSyndication Feed: RSS/AtomNew Window
s (S)SiteSocial Media Sites / Networks
v (V)PageValidateNew Window

Spatial navigation

Have you heard of spatial navigation?

Seen in old phones with out a touchscreen and TVs when browsing

The ability to move around the page directionally (up/down/right/left) is called spatial navigation.
Press alt + ⬇️ key

Try both Blink/Chromium spatial navigation and Vivaldi spatial navigation in Vivaldi.

  1. Open settings vivaldi://settings

  2. Search for “Spatial Navigation” or go to the Webpages category

  3. We’ll need to open the site in a different tab because we need a new renderer.

The main difference between the two currently is that Blink's spatial navigation only uses the arrow keys and doesn't have its own focus border style (uses the always pages' focus style)

This has the effect that you'll end up in trouble when using it to navigate inputs (will jump out of inputs), breaks the alt + arrow scroll functionality and can be hard to see because it's constantly changing.

Vivaldi spatial navigation uses it's own focus color and uses Shift + arrow keys.

The new spec for Spatial Navigation does allow the User Agent (Vivaldi in this case) to use other keys like shift + arrow keys for spatial navigation (see example #4 in the spec draft)

The focus style issue is however not aknowledged at the moment. The user agent vs the author of the webpage. We're currently working to try to get that in the spec too.

Once you get here you can try to navigate to the X here below using spatial navigation

ALT + ⬇️ key when you’re done

Final words…

All browsers are going to handle a little bit differently.
It would be smart to check out some of the features it has and customize to your needs.

So if we take Vivaldi for example it has

  1. Customizable keyboard shortcuts and single key shortcuts (in Settings -> Keyboard category)

  2. Mouse Gestures (in Settings -> Mouse category) to name a few.

We will all get lost.

But we'll find our way back.

ALT + ⬇️ key one more time

Thank you