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
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
I've never seen the accesskey attribute before, quite cool! How would you communicate to the user what accesskeys do what though?
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.