It’s sometimes so simple…

Accessing a website using the keyboard rather than the mouse should be easy. By using the ‘Tab’ key you can jump from link to link. However, on many websites your focus, i.e. the link you have tabbed to, is hardly visible, only framed by a thin dotted line if at all.

Screenshot of a button on a website with thin dotted focus outline

A simple change to the style sheet (style.css) can change this so keyboard users don’t get lost or loose their focus when tabbing through a website.

a:focus {
outline: 2px solid red;
}

Text link in focus with red solid frame

You might need to change other parts of the style sheet too to cover all different manifestations of links on the site, e.g. text link, buttons, etc.

Leave a Reply