Post

It is a lot more complicated to add keyboard shortcuts to your web app than you might initially think, featuring a big honkin' table. #a11ty ericwbailey.website/published/ho...

ericwbailey.websiteHow an accessibility designer adds keyboard shortcuts to a web appKeyboard shortcuts occupy a strange area for web design.

28/1/26, 3:19 pm22 reposts63 likes

Giovanni Mazzuoccolo

@codebygio.bsky.social

30 Jan

Some time ago, I was tasked with creating keyboard shortcuts, and my approach was to use ‘Alt’ + letters (for example, Alt + N to add something). My concern was that the user might not have focus on an input field and could accidentally trigger the shortcut while typing, which is really frustrating.

Tom Hicks

@hicksyfern.bsky.social

28 Jan

FYI I don’t imagine this wrapping is particularly accessible?

Tom Hicks

@hicksyfern.bsky.social

28 Jan

It’s screen width 375px by the way. An iPhone 12 mini or something I think I’ve got.

Eric Bailey

@ericwbailey.website

28 Jan

Thanks for pointing that out. It's something I'm acutely aware of, but have put off updating on account of The Horrors. The banner at the top was hopefully supposed to help soften the blow, but in the meantime you can probably use reader mode to get around it. Not an ideal approach, I know, but :\

Tom Hicks

@hicksyfern.bsky.social

28 Jan

No worries. I tried my best to word it to not sound like a dick as I was actually trying to be helpful! Incidentally I scrolled straight past the banner, didn’t even notice it first time I opened it!

Eric Bailey

@ericwbailey.website

28 Jan

Something I don't touch on in the article is that the real, true answer is to place all control in the hands of the person using your web app. Let people re-bind or remove every individual shortcut you create.

Eric Bailey

@ericwbailey.website

28 Jan

Unfortunately, I think it is too tall an order for contemporary web economics—unless you are working on a dedicated app like Discord or a game. And that massively sucks.