DEV Community

3 Simple Tips to Improve Keyboard Accessibility

Lindsey Kopacz on October 19, 2018

I wanted to write a blog post about one of my favorite accessibility topics - keyboard accessibility! I test this so much without even trying becau...
Collapse
 
terabytetiger profile image
Tyler V. (he/him)

This is a really well written, and very informative! In particular the recommendations for how to work with the focus indicator instead of fighting it is very insightful!

Thanks for taking the time to write this out!!

Collapse
 
lkopacz profile image
Lindsey Kopacz

Of course! Focus indicators can be a lot of fun if you want. I think people forget that you can get creative with it :D

Collapse
 
ben profile image
Ben Halpern

Wow, super awesome post!

We have some outstanding accessibility issues on dev.to created by accident or to hectically fix some design issue that need to be worked out. Your posts have been really helpful in approaching some of these problems.

Collapse
 
lkopacz profile image
Lindsey Kopacz

I see some hacktober fest PRs coming your way hehe ;). Ben, feel free to link some to me if you have any that you'd like me to take a peak!

Collapse
 
dominicduffin1 profile image
Dominic Duffin

This is a great post - I'm a fan of keyboard navigation and it really annoys me how often sites are practically impossible to navigate with the keyboard - and I'm one of the lucky ones who can just pick up the mouse.

Collapse
 
lkopacz profile image
Lindsey Kopacz

Right?? It's SHOCKING to me how many basic things like select lists and main navs I cannot get through with a keyboard. Those are very important aspects of any site.

Collapse
 
dominicduffin1 profile image
Dominic Duffin

Agreed!

Collapse
 
link2twenty profile image
Andrew Bone

Was just reading this post, I missed it before somehow. Just a note on your code blocks if you include the language in lower case after the backticks, like this '''html or '''css (you'll have to pretend my apostrophe are backticks) it will do syntax highlighting which may make it easier for people to understand 🙂

Collapse
 
lkopacz profile image
Lindsey Kopacz

Hmm I do actually do that, not sure why it doesn't highlight things?

Collapse
 
link2twenty profile image
Andrew Bone

Hmm, that's odd, you're doing lower case and no space?

Collapse
 
lucretius profile image
Robert Lippens
Please, whatever you do though, do not write outline: none; in your CSS. 

I, uh, definitely didn't just do this... on multiple projects...