Why Keyboard shortcuts and accessibility in other keyboard languages rarely works

Using keyboard shortcuts are important both if you have accessibility problems but also just in general as it is much more precise using the keyboard than reaching out for the mouse and pointing.

Sadly keyboard shortcuts never seem to work probably if you are using a non-english keyboard layout, but why is that? You would think that typing “Shift+?” would give the same result no matter which language you speak and the same “/”.

On facebook you can get this menu if you type “Shift+?”, but typing “/” does not work on a danish keyboard layout:

Image for post
Image for post

The reason is that browsers are weird and developers don’t use the same way to recognize which character was pressed.

Image for post
Image for post

To see it for yourself, try going to https://keycode.info/ with your native keyboard and switch keyboard layout in your OS, then look at this image to know which key is now which on a English keyboard:

Image for post
Image for post
Wikipedia

The problem in the code

This is the code for “/” in danish keyboard layout. On our keyboard you need to press Shift and the key 7:

Image for post
Image for post

But on a English/American keyboard you type “/” by using the key 3 keys to the right of “m”.

Image for post
Image for post

See how all but event.key are different! On english it is Slash or 191, but in danish it is Digit7 and 55.

How to fix it?

The solution is to either:

  • to stop using event.code and switch to event.key

Either will take a long time to change. The reason is firstly a11y education (a11y = accessibility shortened by 11 letters) and developers like numbers in programming languages as comparing numbers are faster in CPU time and more convenient.

Here for example digging into the facebook frontend code, you can see it in action:

Image for post
Image for post
This line turns the “/” into a number
Image for post
Image for post
Next line where b has been turned into “7”
Image for post
Image for post
and later in Facebook.com code it turns into “shift 7” 😕
Image for post
Image for post
Here I switch to a English keyboard and here is how it looks when you type “/”. You can see o only has two commands, “shift ?” and “/”, no “shift 7”!

Here you can see Facebook compare with keyCode and which to see if I typed “55”, which is “7”. But you can see that MDN (Mozilla Web docs) says that both keyCode and which has a 👎 and it says “Warning: This attribute is deprecated; you should use KeyboardEvent.key instead, if available.” under the section “Obsolete properties”.

and even code has this big sign:

Image for post
Image for post

Slack also does it wrong!

Also slack does it wrong, and since it is a Electron.js app (which mean a app mean with a embedded browser), it uses JavaScript and has the same errors:

Image for post
Image for post

It does not work sadly.

But we need this change! Please share this with your developers that focus on accessibility!

And if your app don’t have a “Shift+?” menu, quickly make it! You know, all awesome websites has one. Did you check your favorite websites?

Written by

I really like building stuff with React.js and Docker and also Meetups ❤

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store