👩🏫 Quick thread on keyboard #a11y
If an interaction relies on a mouse-initiated action, it needs to be keyboard accessible too.
This means it may need to respond to Space and/or Enter as a trigger (hint: you get that for free with <button>).
If an interaction relies on a mouse-initiated action, it needs to be keyboard accessible too.
This means it may need to respond to Space and/or Enter as a trigger (hint: you get that for free with <button>).
If it opens something, it may need to close with Escape.
If it's scrollable, it needs to respond to Up/Down arrow keys.
If it's a group of related options (like autocomplete or tabs), it may need to respond to Up/Down or Left/Right arrow keys (search phrase: roving tabindex).
If it's scrollable, it needs to respond to Up/Down arrow keys.
If it's a group of related options (like autocomplete or tabs), it may need to respond to Up/Down or Left/Right arrow keys (search phrase: roving tabindex).
If it opens a dialog/modal, it needs to prevent tab access with elements outside of that experience (search phrases: "trapping focus" and "inert").
If it's interactive *at all* it needs to be able to gain keyboard focus, and that focus needs to have a visible style.
If it's interactive *at all* it needs to be able to gain keyboard focus, and that focus needs to have a visible style.
If a sighted mouse user can explore and make independent selections (like in an autocomplete), a keyboard user needs to be able to as well. This likely means allowing a combination of tab, arrow keys, and Enter to explore and then make a selection.
Any purely `:hover` triggered content should also allow `:focus` (ex. menus).
---
Yes, it's a lot to think about/remember - and none of it is optional.
Go test your projects and fix any interaction that isn't accessible by keyboard.
---
Yes, it's a lot to think about/remember - and none of it is optional.
Go test your projects and fix any interaction that isn't accessible by keyboard.
• • •
Missing some Tweet in this thread? You can try to
force a refresh
