Using a reset stylesheet? Be careful with your :outlines!
Posted on Tags: Web, HTML5We've talked about our work with HERIB in a previous blog post - we're proud of the work we're doing and finding it incredibly rewarding as it's challenging our thinking and ways of working. A good thing.
Most web developers use a thing called a "reset" stylesheet and most web guys use one which is widely available and well adopted. However, there is a line in the reset stylesheet which, unless careful, can hinder the use of the site for some users.
The guilty party? Well, its - outline: 0;
This removes the default outline of an element - seen usually when a page is "tabbed" around.
The issue lies in people using a default reset stylesheet and then not setting an a:focus state to replace the default browser handling of the outline. Yes, sometimes it is ugly - but it's only really there and used by those people who need it. To ensure this works for those users, you can either remove the line from the reset stylesheet (which allows the browser to deal with it by default) or add some CSS for the a:focus state, such as:
a:focus { outline: dashed #000 thin; }
Try it on this site. Hit the tab key a few times and you'll see an outline appear around the currently selected item indicating which element on the page is currently selected. It's not the prettiest thing but helps those that need it.
I realise this might be teaching a few to suck eggs but I think the masses forget that this is one of the little things that make a big difference and highlighted by our work with the guys at HERIB.
James
PS We've been guilty of this too in the past - it's an easy thing to miss but an easy thing to fix.