Outline on Focus

I recently made a small change to this site to try to make it a little more accessible. I haven’t spent enough time thinking about that aspect of my websites. Not because I don’t care, but just because I am always so rushed, I sometimes forget.

I was reading a blog post on The Accessibility Project which reminded me that I wasn’t paying attention to users who like to navigate with the keyboard. That is silly, because I am sometimes one of those people.

Because I spend so much time on the computers, sometimes my hands hurt and I have found the mouse to part of the problem – at least the switching back and forth between keyboard and mouse. So sometimes just using the keyboard to choose a link or menu item is better than the mouse. I am trying to use more keyboard shortcuts in everything I do and use the mouse less.

So I realized this website didn’t handle keyboard navigation very well. If you tabbed through the top menu, you couldn’t see which menu item was “active”. That was simply because I had forgotten to style my a:focus links.

So, I changed all my references to something:hover to include something:focus as well.

.menu a:hover, .menu a:focus { 
  color: #317572; 

I also noticed that Chrome was using an orange glow to outline elements, which doesn’t look all that nice on this color scheme. So I changed the outline on focus to thin dotted which is the default in other browsers, and it is more subtle.

This then made the focus just a little less obvious, so I decided to add a light background color to things that have focus. I had to be fairly specific when determining what got the background color, however, because I didn’t want everything that was an “a” tag to get that color.

So my final code is:

a:hover, a:focus { 
  color: #317572; 
  outline: thin dotted;

/* specific links that should get a background color */
p a:hover, p a:focus, etc. ... { 
  background-color: #EEF7F2;

Leave a Reply

Your email address will not be published. Required fields are marked *