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
Go to Vivaldi settings and Under the “Webpage” group. vivaldi://settings
Go to Webpages category or search for Webpage Focus
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) | Page | Help | New Window |
1 (one) | Site | Home | |
2 (two) | Site | Sign-up / Create Account | |
3 (three) | Site | Site Map | |
4 (four) | Page | Search | |
5 (five) | Page | License | |
6 (six) | Page | Copyright | |
7 (seven) | Site | Privacy Policy | |
8 (eight) | Site | Terms & Conditions | |
9 (nine) | Site | Contact Form and/or Details |
Access Key | Scope | Location | Window/Tab |
---|---|---|---|
k (K) | Site | Access Keys | New Window |
p (P) | Page | Previous Article | |
n (N) | Page | Next Article | |
t (T) | Page | Back to Top | |
i (I) | Site | Login | |
o (O) | Site | Logout | |
b (B) | Site | Blog / News | |
f (F) | Site | Syndication Feed: RSS/Atom | New Window |
s (S) | Site | Social Media Sites / Networks | |
v (V) | Page | Validate | New 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.
Open settings vivaldi://settings
Search for “Spatial Navigation” or go to the Webpages category
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
Customizable keyboard shortcuts and single key shortcuts (in Settings -> Keyboard category)
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