There is nothing more annoying for those who wish to navigate a website using the keyboard than the extensive use of outline:0 in CSS code. For a more detailed explanation of what this is and what it means, I suggest you read this blog post.
Although I luckily do not suffer from any form of disability and do not actually require any effort to be made by a web developer towards accessibility, I do like to browse using the keyboard on occasion and this can be a highly frustrating problem.
CSS reset files such as the one mentioned in the post can leave developers without a full understanding of the nuances of the platform they are developing for. It is at least in part for this reason that I dont use a CSS reset at all.
My message to all would be to not remove this extremely useful and built-in behavior but actually to enhance it. Try navigation the London 2012 website with the keyboard (a site I led the development on) to see how nice it is to have the outline behaviour enhanced rather than removed.
skip to main |
skip to sidebar
This is where you can find out all about interface development.
Whats good, whats not good and most importantly, why!?
The JSquared JavaScript Library
About Me
- James Norton
- A certified scrum master and highly experienced front end UI web developer specialising in building cutting edge accessible, feature rich, interactive websites. An expert in unobtrusive object oriented JavaScript and AJAX techniques with a unique light touch approach. Currently working for EMC Consulting.
Get more
Blog Archive
-
▼
2008
(45)
-
▼
April
(11)
- Enhancements to CSS
- When perfect is not perfect
- Asynchronous JavaScript Part 5 - The JSquared AJAX...
- JSquared road map and update
- CSS reset and pixel perfection
- WOW - Seriously
- outline:0
- Documenting JSquared
- Safari 3.1 and IE8 Beta 1 support in JSquared
- Asynchronous JavaScript Part 4 - AJAX (a quick int...
- Future proofing
-
▼
April
(11)
Labels
- Accessibility (4)
- ADIJ (3)
- Agile (1)
- AJAX (2)
- Browser support (11)
- Browsers (12)
- Conditional Comments (1)
- CSS (11)
- CSS 3 (3)
- CSS reset (3)
- ECMAScript (1)
- Firebug (1)
- Firefox (1)
- FXSquared (2)
- Google Chrome (1)
- HTML (3)
- HTML 5 (4)
- Interface development (7)
- Internet Explorer (4)
- Internet Explorer 8 (1)
- JavaScript (19)
- JavaScript 2 (3)
- jQuery (1)
- JSquared (21)
- Mobile (1)
- off-topic (6)
- Opera (1)
- Process (1)
- Progressive enhancement (6)
- rant (2)
- Scrum (2)
- Tools (2)
- Twitter (2)
- Usability (2)
- Web standards (7)
Other places to go
Posts
The views expressed here are those of James Norton and do not represent the views of any other organisation including but not limited to any current or past employer.
3 comments:
Just when you think you know all the little tricks about CSS, this little beauty comes along :)
The main thrust of the AIM article is that sighted keyboard users have no visual indicator of the tabbed/focused element. In the 2012 site focused/active elements are styled and have a visual indicator of a changed background and text color. Aesthetically the outline looks good for the 2012 site, however if the design is different and focused links look cluttered with the outline and alternative background/text colours in place, then i think there is a case for using outline:0.
outline is not supported in IE 6 and 7, so it would be a CSS progressive enhancement if you choose to use it.
Post a Comment