aria-describedby on the body, linking to a (hidden until activated by non-visually-impaired user) list of keyboard shortcuts. Caveat: different browsers / OS will need different keys (see developer.mozilla.org/de/docs/Web/...), so either create the list with JS or prefix it with a short description.
You could also use [ALT]-[key] as a default and distinguish the browsers on Windows with different behavior ([ALT]-[SHIFT]-[key] on Firefox, [Shift]-[ESC] + [key] on Opera <= 12, or ignore this one as it is basically not used anymore nowadays) using CSS hacks and add a note about [CTRL]-[ALT]-[key] on Mac (and ignore Firefox prior to version 14, which used [CTRL]-[key] instead).
Senior Fullstack JavaScript Developer with a passion for creating testable, maintainable, scalable codebases.
Specialising in Vue.JS, React, Node.JS, TypeScript, and Vanilla JavaScript.
Location
London, UK
Work
Senior Fullstack JavaScript Developer @ Studio Rotate
Senior Fullstack JavaScript Developer with a passion for creating testable, maintainable, scalable codebases.
Specialising in Vue.JS, React, Node.JS, TypeScript, and Vanilla JavaScript.
Location
London, UK
Work
Senior Fullstack JavaScript Developer @ Studio Rotate
Yeah for web apps that would be ideal, no harm in displaying shortcuts for everyone. I'm sure Atlassian do this for a few of their tools.
One thing I do wonder though is how it would differ from just making sure your website is accessible via tabbing? or is it just a shortcut to stuff so you don't have to tab through the whole site to find what you are looking for
aria-describedby on the body, linking to a (hidden until activated by non-visually-impaired user) list of keyboard shortcuts. Caveat: different browsers / OS will need different keys (see developer.mozilla.org/de/docs/Web/...), so either create the list with JS or prefix it with a short description.
You could also use [ALT]-[key] as a default and distinguish the browsers on Windows with different behavior ([ALT]-[SHIFT]-[key] on Firefox, [Shift]-[ESC] + [key] on Opera <= 12, or ignore this one as it is basically not used anymore nowadays) using CSS hacks and add a note about [CTRL]-[ALT]-[key] on Mac (and ignore Firefox prior to version 14, which used [CTRL]-[key] instead).
Wow that's really cool so it's like a key/legend that only visually impaired people will see
You can also let power-users "see" it when they activate it in a submenu. Accessibility is for everyone.
Yeah for web apps that would be ideal, no harm in displaying shortcuts for everyone. I'm sure Atlassian do this for a few of their tools.
One thing I do wonder though is how it would differ from just making sure your website is accessible via tabbing? or is it just a shortcut to stuff so you don't have to tab through the whole site to find what you are looking for
Yes, it is a shortcut to empower users who rely on keyboard only to use your application faster. That's accessibility: empowering users.