Some
new CSS links for your collection
Adrian Holovaty had a shock when he visited a site recently and found a navigation bar that was 50kb and extremely kludgy, so he decided to re-write it using CSS and ordered lists and then post it for all to plunder. I’m posting this here because his solution helps in a number of ways as far as accessibility is concerned:
- it’s valid mark-up and therefore device-independent
- it’s navigable with a keyboard - no mouse required
- it’s screen-reader friendly (I tried in Jaws)
- it’s a small filesize and demonstrates how much leaner your code can be
- the entire block is clickable, not just the text (much like the navigation on Accesify) - which is better for everyone, particularly people with motor deficiencies (or just plain lazy people like myself)
It could be refined even further to improve the accessibility side of things (and wouldn’t take to much work)
- title attributes on links that have sub-menus to indicate that there are sub-items ("this item contains sub-menus - hit return to reveal these links")
- visually, a state change on the arrows would be good - perhaps a right arrow when not expanded, a down arrow when expended (much like the tree structure in Mac OS)
If I get time I may pick up on this and try to add in the above, although time is something I have little of at the moment, so don’t hold your breath!
Good work Adrian.
If you find some oddities while developing pages and need to know how your browser is rendering your code, try using the DOCTYPEs and Web Page Rendering tool at Copysense. Having selected a doctype, you simply press a button and it will tell you how the browser you are currently using renders your page (as in quirks or strict mode).