DEV Community

loading...

Discussion on: Accessibility For Beginners with HTML and CSS

Collapse
lexlohr profile image
Alex Lohr

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).

Collapse
scottharrisondev profile image
Scott Harrison

Wow that's really cool so it's like a key/legend that only visually impaired people will see

Thread Thread
lexlohr profile image
Alex Lohr

You can also let power-users "see" it when they activate it in a submenu. Accessibility is for everyone.

Thread Thread
scottharrisondev profile image
Scott Harrison

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

Thread Thread
lexlohr profile image
Alex Lohr

Yes, it is a shortcut to empower users who rely on keyboard only to use your application faster. That's accessibility: empowering users.

Forem Open with the Forem app