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

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s