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:
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.codeand switch to
- based on the language of the user, know what
event.coderefers 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:
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
which has a 👎 and it says “Warning: This attribute is deprecated; you should use
KeyboardEvent.key instead, if available.” under the section “Obsolete properties”.
code has this big sign:
KeyboardEvent objects describe a user interaction with the keyboard; each event describes a single interaction between…
Slack also does it wrong!
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?