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:

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

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:

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:

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

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
• based on the language of the user, know what event.code refers to what key on their keyboard

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:

This line turns the “/” into a number

Next line where b has been turned into “7”

and later in Facebook.com code it turns into “shift 7” 😕

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:

KeyboardEvent

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:

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?