U4-9991 - Make Umbraco keyboard navigatable

Created by Jeffrey Schoemaker 05 Jun 2017, 19:31:33 Updated by Sebastiaan Janssen 18 Apr 2018, 07:44:19

Relates to: U4-11034

Make sure you can navigate throught Umbraco with only using your keyboard


Jeffrey Schoemaker 05 Jul 2017, 05:40:31

PR was submitted during retreat: https://github.com/umbraco/Umbraco-CMS/pull/1985

Jeffrey Schoemaker 31 Jul 2017, 09:51:00

Fixing the following issues, related to the WCAG-guidelines (extensive write up in https://www.perplex.nl/en/blog/2017/making-umbraco-atag-and-wcag-compatible/):

Jeffrey Schoemaker 05 Feb 2018, 15:51:21

Hi guys,

I've created a pull request with some additional short cuts: https://github.com/umbraco/Umbraco-CMS/pull/2426.

Cheerio, Jeffrey

Mikulas Tomanka 08 Feb 2018, 21:34:07

Hi Jeffrey. Kudos for the smaller PR. Fetched it, ran it. Works like a charm (in Chrome). Couple questions:

  1. Ctrl + number is a default shortcut in all browsers to change between browser tabs. Making this a shortcut in Umbraco backoffice to change between document type tabs means that we're screwing up browser functionality. In Firefox the shortcut doesn't work at all as well as it breaks the change tab functionality. Can we do someting about that?

The control shorcuts also don't work in Firefox.

We have a similar issue with a shortcut which is used for deleting document types within the backoffice which happens to be a major shortcut in browsers as well. Means developers keep deleting document types 'just like that'.

Jeffrey Schoemaker 09 Feb 2018, 07:55:07

Hi Mikulas,

thanks for the kudos :)

The problem with these shortcuts is that we're running out of enough keys to create them. I've used Ctrl + Shift + Number for switching between the sections. We could use Ctrl + Alt + Number but that's not a superconvenient combination I guess. Any other suggestions?

The same is true for the unpublish shortcut. Normally Ctrl + U opens the source code of the page, but in Umbraco it's also used for Unpublish which have lead to unpublishing far too many pages :)...

Most of the shortcuts work in Firefox by the way (only switching between sections seems a bit off). The different browsers all behave a bit different, but still think this is better than what we had :)


Mikulas Tomanka 16 Feb 2018, 09:33:33

I have rebased the PR into 7.9. Pulled it in. Keyboard shortcuts page (alt + shift + k) needs updating. Thanks @jeffrey.schoemaker@perplex.nl :)

Marking this issue as fixed though, I don't know? Will you split up other keyboard shortcuts into smaller PRs? Should we keep track of all that in here? What do you think?

Dennis Öhman 01 Mar 2018, 13:13:30

No!! This breaks serveral things in backoffice. You can't event type "altgr + 7" even if focus is on a field..

Anders Brohäll 01 Mar 2018, 13:24:02

Noooooooo! What an epic breach of accessibility! You cannot be serious about putting this in the Core? Or is this a pre april fools joke?

Anders Brohäll 01 Mar 2018, 13:58:10

What you should do is to use the browsers access keys: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/accesskey. That way you'll never break any expected behaviour, which MUST be of primary concern when working w/ accessibility!

Mikulas Tomanka 01 Mar 2018, 14:11:17

The second PR: https://github.com/umbraco/Umbraco-CMS/pull/2426 has now been reverted. This should be out in 7.9.2.

Priority: Normal

Type: Feature (planned)

State: Reopened


Difficulty: Normal


Backwards Compatible: True

Fix Submitted: Pull request

Affected versions:

Due in version:


Story Points: