New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow users to customize keyboard shortcuts #3218

Open
afercia opened this Issue Oct 28, 2017 · 57 comments

Comments

10 participants
@afercia
Copy link
Contributor

afercia commented Oct 28, 2017

Edit: Discussed during today's (March 1st 2018) bug scrub and agreed to consider a generic mechanism to allow users to customize keyboard shortcuts. Chances of conflicts are very high for any shortcut and many users would be unable to use the related features.

----- Original description:

Follow up to #3084

Keyboard navigation through the editor regions is currently implemented with the shortcuts ctrl+backtick and ctrl+shift+backtick, inspired by what Slack does.

However, not all the keyboard layouts have a physical key for the backtick. See for example the Italian keyboard layout. See the relevant discussion on #3084

until we find a single keyboard shortcut that's actually a standard, the closest is what we have here with ⌘+` that Slack uses. It seems worth trying this.
We could then supplement it, or replace it, with a simpler shortcut that doesn't change between keyboards, if we can find a good idea for what that should be.

Worth noting Slack has preferences for the language and the keyboard layout, though at the moment that's limited to just 4 languages.

A few options to consider:

  • find a shortcut that works universally across all keyboard layouts (I doubt there's one)
  • use a single key shortcut, as mentioned on #3084
  • make the shortcut configurable on a per user basis
@afercia

This comment has been minimized.

Copy link
Contributor Author

afercia commented Oct 28, 2017

Gmail for example, does use Cmd/Ctrl + Shift shortcuts but uses also single key shortcuts or combinations of character keys:

screen shot 2017-10-21 at 15 21 54

screen shot 2017-08-11 at 14 30 35

As mentioned in #3084 single key shortcuts work, when not inside an editable field. Screen readers use single key shortcuts but they already have their own mechanisms to jump through landmark regions.

@aardrian

This comment has been minimized.

Copy link

aardrian commented Oct 28, 2017

Drive-by commenting here, but are we primarily concerned with only Latin or Western languages?

If so, then finding a shared key may be possible (if awkward). If not, then prior i18n experience suggests different languages / sets of languages will need to have different key mappings and we'll still need to allow users to customize anyway.

@afercia afercia referenced this issue Jan 11, 2018

Closed

Keyboard shortcuts support #71

21 of 35 tasks complete

@afercia afercia changed the title Find a better shorcut to navigate the editor regions Consider a mechanism to customize shortcuts, e.g. Cmd/Ctrl + backtick Mar 1, 2018

@afercia

This comment has been minimized.

Copy link
Contributor Author

afercia commented Mar 1, 2018

Quoting ATAG A.3.1.5 https://www.w3.org/TR/2015/REC-ATAG20-20150924/#sc_a315

Customize Keyboard Access: If the authoring tool includes keyboard commands, then those keyboard commands can be customized.

The intent of this success criterion is to ensure that authors using a keyboard interface on platforms that support keyboard commands have the ability to remap the authoring tool's default keyboard shortcuts in order to avoid keystroke conflicts, use familiar keystroke combinations and optimize keyboard layout (e.g. for one-handed use).

@afercia afercia added this to the Merge Proposal milestone Mar 19, 2018

@afercia afercia changed the title Consider a mechanism to customize shortcuts, e.g. Cmd/Ctrl + backtick Consider a mechanism to customize shortcuts, e.g. Ctrl + backtick Apr 3, 2018

@karmatosed karmatosed modified the milestones: Merge Proposal, Merge Proposal: Accessibility Apr 12, 2018

@afercia

This comment has been minimized.

Copy link
Contributor Author

afercia commented Apr 12, 2018

Investigating on #5847 / #6144 I've read some Mousetrap (the tool used by Gutenberg to implement keyboard shortcuts) documentation. Reference:
https://craig.is/killing/mice
https://github.com/ccampbell/mousetrap

Worth noting that also sequences of keystrokes work, see https://craig.is/killing/mice#api.bind.sequence and also shortcuts that include sequences and combinations. For example, pressing Command (or Ctrl) twice would work. This opens up new possibilities, and maybe it's something easier to implement than customizable shortcuts. Any thoughts more than welcome. /cc @aardrian @rianrietveld @joedolson @samikeijonen etc.

@karmatosed karmatosed removed this from the Merge Proposal: Accessibility milestone Apr 13, 2018

@aardrian

This comment has been minimized.

Copy link

aardrian commented Apr 13, 2018

I do not know where else to put this, but please be cautious when applying keyboard shortcuts, particularly when using Slack as an example. Slack has made its accessibility worse for screen reader users who rely on keyboard navigation. This Twitter exchange between a skilled SR user and the Slack guy in charge of accessibility demonstrates that disconnect: https://twitter.com/LeonieWatson/status/974615133044359168

Further, many screen reader users and many keyboard-only users have motor impairments that make many complex (or even simple) combos possible. Shortcuts may be a nice add-on for many users, but they are not a guaranteed accessibility fix (so it is ok to have them, but don't make those the only means of interaction for a feature).

@aardrian

This comment has been minimized.

Copy link

aardrian commented Apr 13, 2018

@afercia

Investigating on #5847 / #6144 I've read some Mousetrap (the tool used by Gutenberg to implement keyboard shortcuts) documentation. Reference:
https://craig.is/killing/mice
https://github.com/ccampbell/mousetrap

Fired it up with NVDA. The first example on the page is to hit the 4 key to highlight the first line of code. Without NVDA it works fine. With NVDA, since NVDA (rightly) captures keystrokes, it jumps me to the first <h4> on the page.

In order to pass the key through to the OS, bypassing NVDA, I need to use NVDA Key + F2 and then I can hit 4. (note that NVDA Key will be either Caps Lock or Insert depending on the user's configuration).

In my experience, few screen reader users know what their passthrough key combo is, let alone know when or how to use it.

That being said, in a very quick glance at the library, I saw no statements about how to implement it and account for screen readers. The answer from the developer may be "Meh", which should be documented if that is the approach.

@karmatosed karmatosed added this to the Merge Proposal: Accessibility milestone Apr 13, 2018

@afercia

This comment has been minimized.

Copy link
Contributor Author

afercia commented Apr 13, 2018

@aardrian thanks. Yep I'm aware the passthrough key is not so used, and I'd say it's not acceptable to ask users to use it. I haven't looked at the Mousetrap examples, however the good part is that Mousetrap is "agnostic" and allows to really use any shortcut. It's up to the implementation to make them work with AT for example making SR enter forms mode or application mode where appropriate.

Shortcuts are probably more useful for pro-keyboard users (non screen reader users). Worth nothing the Ctrl + backtick shortcut mentioned here basically matches the ARIA landmarks so screen reader users can just use their screen reader to jump through landmarks.

@aardrian

This comment has been minimized.

Copy link

aardrian commented Apr 13, 2018

Ah, I get it. The things you want to designate as targets for Ctrl + backtick correspond to named regions / landmarks. I like that.

@afercia

This comment has been minimized.

Copy link
Contributor Author

afercia commented Apr 13, 2018

Yep, it's an attempt to emulate landmarks for non-screen reader users 😆

@afercia

This comment has been minimized.

Copy link
Contributor Author

afercia commented Apr 16, 2018

Just to confirm the "Ctrl + backtick" shortcut doesn't work on various non-English layout keyboards and thus the ability to jump through the main editor sections is not available to all users (see also #1182):

  • not available on an Italian keyboard layout (@afercia)
  • not available on a Dutch keyboard layout (@rianrietveld)
  • not available on a Finnish keyboard layout (@samikeijonen)
  • not available on a French keyboard layout (@audrasjb)
  • likely way more
@fuzzbomb

This comment has been minimized.

Copy link

fuzzbomb commented Apr 25, 2018

Yep, it's an attempt to emulate landmarks for non-screen reader users

Facebook has an interesting approach to landmark navigation. A landmarks menu as an early tab-stop on the page, where you'd often find a skip-to-main link. I think it's notable, because I presume a lot of keyboard users have found it already. I'm not a Facebook user myself, but it's used on the sign-up screen too, so I played with it there.

Description here: https://a11ywins.tumblr.com/post/170270963528/facebook-ax-navbar

@samikeijonen

This comment has been minimized.

Copy link
Contributor

samikeijonen commented Apr 25, 2018

That's interesting approach. I actually logged in to Facebook the test it out, worked as described.

@afercia

This comment has been minimized.

Copy link
Contributor Author

afercia commented Apr 25, 2018

@fuzzbomb interesting. I see they use Alt + / to invoke the menu, so the keyboard shortcut issue still stands. On my Italian keyboard for example I'd need to press Shift+7 to get a slash /. Not sure about other keyboard layouts but it would probably still need some kind of customization mechanism. (@samikeijonen where's the slash / on your Finnish keyboard?)

However, you made me think at a core Trac ticket that asked to make the existing Skip link accessible to developers (see https://core.trac.wordpress.org/ticket/36644). While the proposal there is not exactly the same thing, I'm now wondering: what if we try to make the existing Skip link extensible, i.e. more skip links can be added there via a filter or something?

screen shot 2018-04-25 at 09 02 45

Then, it should be changed to an ARIA menu with arrows navigation and it would be great to have a customizable shortcut to invoke it.

@samikeijonen

This comment has been minimized.

Copy link
Contributor

samikeijonen commented Apr 25, 2018

@afercia Same here with /, I could not access with Alt + /. But at least it was the first Tab stop.

@afercia

This comment has been minimized.

Copy link
Contributor Author

afercia commented Apr 25, 2018

@samikeijonen thanks. That's the point, we need a tool users can access when focus is in the Gutenberg UI 🙂

@jasmussen

This comment has been minimized.

Copy link
Contributor

jasmussen commented Apr 25, 2018

we need a tool users can access when focus is in the Gutenberg UI 🙂

For the sake of argument and pretending it would be the easiest thing in the world: what if we were to add regions to all of the WordPress UI, not just Gutenberg — would this be an a11y benefit?

@fuzzbomb

This comment has been minimized.

Copy link

fuzzbomb commented Apr 25, 2018

Sure, the Facebook landmark navigation can be accessed via a keyboard shortcut, but you can also get there quickly by tabbing after loading a page. The ALT+slash would be just another customizable shortcut.

The thing that interests me about Facebook's approach, is it includes links to their accessibility help pages too, but keeps the whole region to a single tab-stop. The region isn't just a fancy skip-link alternative, it's a region for a11y tools in general.

Now, you could potentially add other things there too, like a headings navigation drop-down, or... links to customize accessibility settings per user. So that's where a mechanism to customize keyboard shortcuts could live - in an a11y-tools region, just one TAB key (and a couple of arrows) away from the start of the page. If ALT+/ doesn't suit you, a keyboard-only user could still find a way into customizing that without much effort.

An always-visible button to reveal the "accessibility tools" region could live on the main toolbar, quite unobtrusively. So the a11y tools region is easily reached by a single TAB after loading the page, or lots of Shift-TABs form somewhere in the middle of the page, or a mouse click, Dragon, or whatever keyboard shortcut it has.

I don't know how many shortcuts are being proposed, but I think something on the scale of Gmail is too much. One way to avoid excess would be a system where lots of actions can have a keyboard shortcut, but most of them are unassigned by default (an empty setting). KDE Plasma desktop and GNOME desktop do it this way.

(For what it's worth, Ctrl+backtick is used by Ubuntu Unity desktop for "cycling through windows in the current application", while KDE Plasma uses Alt+backtick, and GNOME uses Win+backtick, and macOS uses Splat+backtick for the same task. So it goes.)

Going even further, keyboard shortcuts could be completely turned off by default - users would have to opt-in, but there'd much less risk of frustrating assistive tech users with key conflicts. For users who want them, I'd trust the handbook, and all those "10 things to do after installing WordPress" articles to get the word out. Imagine if everyone was told to check out the accessibility settings link....

P.S. I'm a Drupal a11y maintainer, rather than a WordPress contributor. I found this issue because I follow WP-a11y news. We don't have any keyboard shortcuts yet, we've preferred basic sequential keyboard controls. I expect it's a matter of time before we need to look at this issue in Drupal's authoring tools initiative too.

@jasmussen

This comment has been minimized.

Copy link
Contributor

jasmussen commented Jul 4, 2018

option + tab = move by region.

I agree, tab feels like a superior key to use for navigating regions here, since tab is inherently about picking elements on the page. However it's also a challenge as most modifier combinations of tab are used:

  • Ctrl + Tab and Ctrl + Shift + Tab switches tabs in browsers
  • Alt + Tab on Mac doesn't seem to do anything, but on Windows it switches between windows, which also locks us out of ⌘+Tab on mac.
  • Ctrl + Alt + Tab for tabbing forwards and Ctrl + Shift + Alt + Tab might work, but it's a bit fiddly, and Ctrl + Alt are mapped to the magnifier on Macs if you have that enabled.

In other words, as much as I want to use tab here, not sure we can :(

@samikeijonen

This comment has been minimized.

Copy link
Contributor

samikeijonen commented Jul 4, 2018

Also the F# keys are a but hard to discover and remember.

Pretty much every combination is hard to remember. Needs good documentation anyway.

This already works, but we're looking at an alternative keyboard shortcut because we're not sure this one works on all keyboards.

It doesn't, we are sure :)

OK so I've tried F6 but unfortunately doesn't work well across browsers and platforms.

@afercia Was there a PR already for testing?

@afercia

This comment has been minimized.

Copy link
Contributor Author

afercia commented Jul 9, 2018

As commented in part above:

  • backtick is not available on at least 4 keyboard layouts, likely more. See #3218 (comment)
  • screen readers Alt+D or D work just with a screen reader running, we need a shortcut that works for keyboard users who don't use a screen reader.
    For example, Ald+D on Windows conflicts with the native shortcut to focus the browser address bar.
  • alt+tab is taken on Windows
  • arrows won't work from within the writing-flow? and I guess they won't work either from within an input field (or, we don't want them to work from within an input field, to preserve native interaction); we need a "global" shortcut that works from anywhere, at any moment

@samikeijonen no there's no PR I've just added the shortcuts in components/higher-order/navigate-regions/index.js it's very easy to try.

So after the great illusion 😬that F6 was an option, I guess we're again at the initial issue.

@samikeijonen

This comment has been minimized.

Copy link
Contributor

samikeijonen commented Jul 9, 2018

In accessibility meeting we decided to test either of these key combinations:

Next landmark: Alt+Shift+N
Previous landmark: Alt+Shift+P

Or

Next landmark: Ctrl+Alt+N
Previous landmark: Ctrl+Alt+P

We concluded that there needs to be three keys combination anyways even if it's hard to remember. Once again documentation is the key here.

@samikeijonen

This comment has been minimized.

Copy link
Contributor

samikeijonen commented Jul 9, 2018

Also noting that there is Landmarks extension which uses these keyboard shortcuts.

@afercia

This comment has been minimized.

Copy link
Contributor Author

afercia commented Jul 17, 2018

There's now a pending PR #8005 to test the shortcuts:

Next landmark: Alt+Shift+N
Previous landmark: Alt+Shift+P

/Cc @samikeijonen @rianrietveld @audrasjb (pinging you as lucky users of keyboard layouts with no backtick key)

@jasmussen

This comment has been minimized.

Copy link
Contributor

jasmussen commented Jul 30, 2018

keyboard layouts with no backtick key

Those seem like good keyboard shortcuts!

I do not mean to object at all, this is an area where I defer to the experts. However I wanted to clarify that I also do not have a backtick key:

img_20180730_092455

But the keyboard shortcut still works. That is, I press Ctrl + [the key below escape], and it navigates between regions just fine. This was the suggestion I was referring to earlier — that we use that same area of the keyboard for all regions, even if the actual key varies from region to region — it may be backtick in the US and $ on danish keyboards. Is this an option in addition to the other shortcuts?

@samikeijonen

This comment has been minimized.

Copy link
Contributor

samikeijonen commented Jul 30, 2018

But the keyboard shortcut still works. That is, I press Ctrl + [the key below escape]

Well I'll be damned, this works also for me! Even if the key looks different in my keyboard. I guess we can have both.

@afercia

This comment has been minimized.

Copy link
Contributor Author

afercia commented Jul 31, 2018

But the keyboard shortcut still works. That is, I press Ctrl + [the key below escape],

No, it doesn't 🙂Just to clarify again, on my Windows laptop switching between languages and keyboard layouts:

  • English with US keyboard: works
  • Italian with US keyboard: works
  • Italian with Italian keyboard: doesn't work
@jasmussen

This comment has been minimized.

Copy link
Contributor

jasmussen commented Jul 31, 2018

I'm sorry it doesn't help that I'm not being clear. What I've been trying to say, and clearly failing at, is that it seems like it should be possible to use the key geographically located below the escape key worldwide. This is a good geographical location because it's close to tab which is often used for related navigation, and it's a convenient location for such a powerful feature.

It happens to work in the US, and in Denmark, and perhaps in Finland as well? We would need an array of key combinations for each language. Based on this image (correct me if I'm wrong), we'd want to support Ctrl+~ for it to work on Italian keyboards.

I know this is extra work to make this work across locales, and indeed it may not be worth it. But I wanted to make sure my point was understood.

@afercia

This comment has been minimized.

Copy link
Contributor Author

afercia commented Jul 31, 2018

When I switch to the Italian keyboard layout, that key becomes the backslash key \. https://it.wikipedia.org/wiki/File:Italian_Keyboard_layout.svg

My personal opinion is that given the multitude of keyboard layouts and also the fact sometimes vendors implement non-standard layouts, this is going to be a can of worms 🙂

You can check how that key differs in the various QWERTY layouts here: https://en.wikipedia.org/wiki/QWERTY
There's a great variety. Also, Spanish is different from Latin American Spanish, Portuguese is different from Brazilian, etc. French and Belgian layouts are different, not to mention languages with non-latin alphabets.

@afercia afercia referenced this issue Aug 2, 2018

Merged

Add new keyboard shortcuts help modal #8316

4 of 4 tasks complete
@afercia

This comment has been minimized.

Copy link
Contributor Author

afercia commented Aug 9, 2018

Additional keyboard shortcuts for the "navigate regions" component have been added in #8005. This solves the immediate problem with the backtick key not present on all the keyboard layouts. Introducing a mechanism to customize shortcuts is still a nice idea for the future tough. Moving to the ideas project.

@afercia afercia removed this from the Merge Proposal: Accessibility milestone Aug 9, 2018

@designsimply designsimply changed the title Consider a mechanism to customize shortcuts, e.g. Ctrl + backtick Consider a mechanism to customize keyboard shortcuts such as Ctrl + backtick Aug 22, 2018

@tofumatt tofumatt changed the title Consider a mechanism to customize keyboard shortcuts such as Ctrl + backtick Allow users to customize keyboard shortcuts Oct 5, 2018

@mtias mtias added the Future label Oct 7, 2018

@mtias mtias added this to the Future: 5.1 Onwards milestone Oct 12, 2018

@afercia

This comment has been minimized.

Copy link
Contributor Author

afercia commented Nov 28, 2018

Quick update: just noticed the Ctrl + backtick shortcut can't work on Opera (mac) because it's used by the browser:

screenshot 2018-11-28 at 19 44 07

One more proof that shortcuts conflicts are very likely to happen and there's no reliable way to have "conflict-free" shortcuts.

@afercia

This comment has been minimized.

Copy link
Contributor Author

afercia commented Dec 9, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment