There are many keyboard-only users out there. People who use a screen reader fall in this category. These users generally have low-vision or blindness (but not necessarily).
Also, people with motor disabilities, or injuries, that temporarily or permanently cannot use a mouse.
Also, people with motor disabilities, or injuries, that temporarily or permanently cannot use a mouse.
Keyboard accessibility is *essential* for some people, they can't operate the web without it.
However, keyboard navigation is also *beneficial for all* users - it's much more efficient to use a keyboard to fill in a complex form, than it is to use a mouse. Think, hospital admin.
However, keyboard navigation is also *beneficial for all* users - it's much more efficient to use a keyboard to fill in a complex form, than it is to use a mouse. Think, hospital admin.
Spend 30 min trying to navigate what you're working on, or browsing, using just the keyboard.
Check for
- focus outline on interactive elements, do you know where you are?
- can use space and/or enter key on buttons and links
- ⌨️ focus moves to a modal or menu when you open it
Check for
- focus outline on interactive elements, do you know where you are?
- can use space and/or enter key on buttons and links
- ⌨️ focus moves to a modal or menu when you open it
The checklist in the previous tweet are the most common mistakes I've seen. This is often the culprit:
:focus {
outline: none; 🙅🏻♀️
}
Because browser default focus is "ugly".
Check out gov.uk for the best-looking keyboard nav I've seen. 😍
:focus {
outline: none; 🙅🏻♀️
}
Because browser default focus is "ugly".
Check out gov.uk for the best-looking keyboard nav I've seen. 😍
If you've found some issues - that's awesome! I recommend writing them down somewhere; you can even post them here, if you're feeling brave!
I'll be posting more about how to fix these issues, later in the week. But for today, awareness is the first step :)
Happy #a11y week!
I'll be posting more about how to fix these issues, later in the week. But for today, awareness is the first step :)
Happy #a11y week!
I forgot to add an image description to the first tweet! 🤦🏻♀️ Got too excited.
Image alt: "5 days to #a11y", with the first day titled "unplug the mouse" followed by 4 hidden steps. "Spend 30 minutes a day this week, to build these inclusive developer habits into your workflow."
Image alt: "5 days to #a11y", with the first day titled "unplug the mouse" followed by 4 hidden steps. "Spend 30 minutes a day this week, to build these inclusive developer habits into your workflow."
Onto day 2! Colour and contrast 💅
That's all folks! 😢
Hope you all had a great #GAAD - let's keep making the world more awesome, together! 🤘
Hope you all had a great #GAAD - let's keep making the world more awesome, together! 🤘
