Home Accessibility Keyboard Navigation Keyboard Navigation With The Focus State   |   Search MS Office A-Z   |   Search Web Pages/ Design A-Z

Keyboard Navigation With The Focus State

The hover state to makes links more prominent inside your page text.

The style definition might look like this:

<style type="text/css">
a:hover {background:yellow; color:navy;}
</style>

Duplicate the hover effect by adding the same style rule to the :focus state:

<style type="text/css">
a:hover {background:yellow; color:navy;}
a:focus {background:yellow; color:navy;}
</style>

Here's the same list of links. Run your mouse over them (if you use a mouse!) and see the hover effect. Then tab through them and notice the same effect as hover when each link has focus:

Note that the example code would change all the links on the page, which might cause problems with your main navigation menu. Depending on your page layout, you may want to create a separate class for the text links and apply different styles to them:

<style type="text/css">
a.example:hover {background:yellow; color:navy;}
a.example:focus {background:yellow; color:navy;}
</style>

Then, refer to the class inside the HREF tag:

<a href="http://www.netmechanic.com/promote.htm" 
   class="example">Search Engine Power Pack</a>
Search Engine Power Pack