For web marketing training, presentations and workshops visit Pacifica Training. If you wish to ask questions about website marketing please head over and register free at the website marketing forum, a knowledge base and community driven discussion group. There's also an opportunity to earn extra money working from home which is part of the tourism database we've created called Touristino. For local news visit our new Community Hastings website.
Are CSS dropdown menus accessible?
Published: May 11, 2005
With the transition from tables to CSS for layout purposes on modern websites comes the need to take things further and rely on CSS to offer more and more in the way of useful features that we have come to know and love.
One area that I see a lot of the WOW! factor in is the accessible css dropdown menu feature so many people are looking to implement. Great as they appear, due to IE, they are not as easy as they first seem but the question is, are they accessible because of their markup structure?
A list of links, as a navigation panel is, should be marked as a list. This makes sense semantically. Accessibility devices can handle lists well but when scripting and clever CSS is involved to handle events on a list, things take a turn.
I can't get away from demonstrating my point without linking to examples and as much as I respect their sites, the examples I'm showing I do have a gripe with.
Navigate to:
Now, drop the mouse and try to navigate the menu with just the keyboard.
Try the same thing at:
How did you get on?
I bet you didn't.
Activating the menu with the tab button does not trigger the event that allows you to focus on the particular menu item. OK, PIE's version does focus but since the menu stays collapsed you don't know what you're hitting without looking at the statusbar for the destination. To me, this isn't accessibility. So a keyboard manipulation device for people with mobility problems ends up having to switch styles off just to see the menu. It's not on.
As always, there are solutions to the problem (JavaScript naturally). I'm not on commission here but check out Brothercakes Ultimate Dropdown Menu and try the same trick again. This is a polished and well developed CSS menu that enables keyboard operation.
Again, it comes back to the notion that accessibility is all about markup and screen readers and that's only the half of it. The moral of the story is to always keyboard test your website, especially where fancy menus occur. Remember though, true accessibility requires sites to work without scripting and since IE is what it is, fancy CSS menus are off the menu for now. :[
Useful?
Assistance?
Comments
Philip Chalmers says:
Online TV John says:
Well usability is all and good but where do we draw the line. You article made me think about this, where do we draw the line between what we will optimize and accomodate for and what we'll give up on. I mean tabbed browsing (as in keyboard tab) is somewhat overkill, I doubt very many people are completely devoid of a mouse.
I don't run a commercial site or anything, so I'd guess this may be something for businesses to acknowledge - but for the average site it's just not worth optimizing and coding to ensure usability. That's just my stance on it.
BTW could you do an article or post about whether its possible for a site using ajax to use real links like this:
[a href="http://www.example.com/somepage.html" onclick="ajaxfunction"]link[/a]
the onclick would execute the ajax function, but anyone with js disabled (namely search bots) would be transferred to somepage.html. It's the perfect way for SEO and ajax.
milly says:
Well, Online TV John, that's a pretty selfish and unimaginative attitude. Using a mouse requires full use of a hand for a start - mine gets painful pretty quickly so I often use my keyboard for navigation and other things. At college I knew a man who typed with a stick strapped to his head, having been paralysed from the neck down in an accident.
You say I don't run a commercial site or anything, so I'd guess this may be something for businesses to acknowledge -for the average site it's just not worth optimizing and coding to ensure usability.
Really? How would you feel if you couldn't access websites because of lazy design? If you can't be bothered to design accessible websites maybe you should leave it to other people.You seem to be saying that it's not worth bothering about people with disabilities unless they are going to give you money. That's not really very nice now is it?
I am completely new to web design, learning everything from scratch including HTML & CSS. I am trying to ensure that everything in my website will be accessible, even though I don't expect many visitors. It's just part of what you need to consider when you design a website, if your website is not accessible it is just rubbish. That's just mystance on it.
Pure CSS drop-down menus have a usability problem. They always expand in the same direction, usually to the right. Suppose a page has a lot of top-level items, expands to the right and the rightmost top-level item contains a sub-menu. If the available page width is less than the designer expects, the expansions of the rightmost menu items are hidden beyond the right margin. In most browsers this produces a horizontal scrollbar, but if the user uses the mouse to scroll right the menu loses focus and collapses and the horizontal scrollbar disappears - totally frustrating for the user.
And of course there are many reasons why the available page width might be restricted - non-maximised broswer window, user has enlarged the font, user has opened the History / Bookmarks pane, etc.