WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Re: Question about CSS Hover Dropdown menus

for

Number of posts in this thread: 7 (In chronological order)

From: Christian Heilmann
Date: Wed, Feb 21 2007 2:00PM
Subject: Re: Question about CSS Hover Dropdown menus
No previous message | Next message →

> If you have a pure CSS hover menu, is there any way to make it function just by using keystrokes?

Yes, but with the most stupid and dirty hacks possible to make it work
for MSIE (tables inside links). You can add redundant skip links to
the menu, too, but all in all there is no such thing as an accessible
"CSS only" menu.

I've vented a lot of steam and did a lot of research on that just
before leaving CSS-Discuss because a lot of vendors of CSS-only
solutions boll... sweet talk about that:

http://www.wait-till-i.com/index.php?p=327

The YUI menu control (http://developer.yahoo.com/yui/menu/) was tested
extensively with Jaws but multi level menus are generally more a
problem of information architecture and overloading the user with
options than a technology issue.

HTH
Chris


--
Chris Heilmann
Book: http://www.beginningjavascript.com
Blog: http://www.wait-till-i.com
Writing: http://icant.co.uk/

From: indamockwood-l@verizon.net
Date: Wed, Feb 21 2007 2:10PM
Subject: Question about CSS Hover Dropdown menus
← Previous message | Next message →

Hi all,

I'm trying put together a list of "accessibility consequences" for certain types of web design styles (such as, if you do X,Y, or Z, then people who have X,Y, or Z disability will not be able to easily use your site), and trying to think not only in terms of screenreaders. I'll probably come up with a bunch of questions as I go along, but right now I have a question about CSS Hover drop-down menus (such as on espn.com).

If you have a pure CSS hover menu, is there any way to make it function just by using keystrokes? So, for example, I'm tabbing through the scroll down menu options on ESPN.com, and I want to see what options are under NBA. If I tab to it, and click "enter", instead of seeing what's underneath, I'm taken to the main NBA page. Do people who use only keystrokes to navigate have to live with this, or is there a keystroke I'm missing (I know what the issues may be if it were a Javascript mouseover)

Also I've played with some screenreaders (I don't have access to JAWS, though), and see that if you have CSS drop down menus using lists, that the screenreader will read the hidden hover menus. However, it looks to me like they will read all of them. Are there ways to put mini-skip-links in a drop down menu like that so you can go from one top-tier option to the next?

Thanks.

MJ


From: Joshue O Connor
Date: Thu, Feb 22 2007 4:40AM
Subject: Re: Question about CSS Hover Dropdown menus
← Previous message | Next message →

>Christian said:
> multi level menus are generally more a
> problem of information architecture and overloading the user with
> options than a technology issue.

I'll second that. Do you really need them? If you think you do it might
be a good idea to go back to the drawing board and try and simplify your
information architecture.

IMHO, of course.

Josh


********************************************************************

NOTICE: The information contained in this email and any attachments
is confidential and may be privileged. If you are not the intended
recipient you should not use, disclose, distribute or copy any of
the content of it or of any attachment; you are requested to notify
the sender immediately of your receipt of the email and then to
delete it and any attachments from your system.

NCBI endeavours to ensure that emails and any attachments generated
by its staff are free from viruses or other contaminants. However,
it cannot accept any responsibility for any such which are
transmitted. We therefore recommend you scan all attachments.

Please note that the statements and views expressed in this email
and any attachments are those of the author and do not necessarily
represent the views of NCBI


********************************************************************



From: indamockwood-l@verizon.net
Date: Thu, Feb 22 2007 7:50AM
Subject: Re: Question about CSS Hover Dropdown menus
← Previous message | Next message →

I'm not actually designing a specific site.

I'm trying to put together a list of design elements that are popular, but that have accessibility implications, and specifying just what those implications are. Call it a pre-emptive strike, if you will.

I already know that long, large, drop down menus have accessibility implications because they may be overwhelming. I just also wanted to know if they had any other implications, such as not being entirely accessible to those who surf the web only using keystrokes, or those using screenreaders (because they have to go through all the lists).

MJ

From: Joshue O Connor < = EMAIL ADDRESS REMOVED = >
Date: 2007/02/22 Thu AM 05:38:02 CST
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] Question about CSS Hover Dropdown menus

>Christian said:
> multi level menus are generally more a
> problem of information architecture and overloading the user with
> options than a technology issue.

I'll second that. Do you really need them? If you think you do it might
be a good idea to go back to the drawing board and try and simplify your
information architecture.

IMHO, of course.

Josh


********************************************************************

NOTICE: The information contained in this email and any attachments
is confidential and may be privileged. If you are not the intended
recipient you should not use, disclose, distribute or copy any of
the content of it or of any attachment; you are requested to notify
the sender immediately of your receipt of the email and then to
delete it and any attachments from your system.

NCBI endeavours to ensure that emails and any attachments generated
by its staff are free from viruses or other contaminants. However,
it cannot accept any responsibility for any such which are
transmitted. We therefore recommend you scan all attachments.

Please note that the statements and views expressed in this email
and any attachments are those of the author and do not necessarily
represent the views of NCBI


********************************************************************

From: Christian Heilmann
Date: Thu, Feb 22 2007 8:10AM
Subject: Re: Question about CSS Hover Dropdown menus
← Previous message | Next message →

> I'm not actually designing a specific site.
>
> I'm trying to put together a list of design elements that are popular, but that have accessibility implications, and specifying just what those implications are. Call it a pre-emptive strike, if you will.
>
> I already know that long, large, drop down menus have accessibility implications because they may be overwhelming. I just also wanted to know if they had any other implications, such as not being entirely accessible to those who surf the web only using keystrokes, or those using screenreaders (because they have to go through all the lists).

Aye, all in this article...

--
Chris Heilmann
Book: http://www.beginningjavascript.com
Blog: http://www.wait-till-i.com
Writing: http://icant.co.uk/

From: Al Sparber
Date: Thu, Feb 22 2007 11:10AM
Subject: Re: Question about CSS Hover Dropdown menus
← Previous message | Next message →

From: < = EMAIL ADDRESS REMOVED = >
> I'm trying put together a list of "accessibility consequences" for
> certain types of web design styles (such as, if you do X,Y, or Z,
> then people who have X,Y, or Z disability will not be able to easily
> use your site), and trying to think not only in terms of
> screenreaders. I'll probably come up with a bunch of questions as I
> go along, but right now I have a question about CSS Hover drop-down
> menus (such as on espn.com).

If you have a the least bit of doubt about dropdown menus, you should
simply avoid them. They are totally unnecessary in a well-designed
site. They are merely enhancements that, if deployed logically, can be
useful to some, while being transparent to others.

This article explains our position on the subject:
http://www.projectseven.com/tutorials/navigation/pmm/rootimages/index.htm

> If you have a pure CSS hover menu, is there any way to make it
> function just by using keystrokes? So, for example, I'm tabbing
> through the scroll down menu options on ESPN.com, and I want to see
> what options are under NBA. If I tab to it, and click "enter",
> instead of seeing what's underneath, I'm taken to the main NBA page.
> Do people who use only keystrokes to navigate have to live with
> this, or is there a keystroke I'm missing (I know what the issues
> may be if it were a Javascript mouseover)

Web pages are not operated as if they were desktop applications, so
while a savvy person like you might poke around with different logical
keystrokes, such as arrow keys, most people are accustomed to web
pages being navigable with a mouse or with the Tab key (or with
Opera's unique setup). Menu scripts that allow use of the keyboard in
desktop app paradigm might be coded by very able persons but typically
require a surfer's help page to explain how to operate the menu. Given
the immediate nature of web surfing, in most cases, this is not
usually a good idea.

> Also I've played with some screenreaders (I don't have access to
> JAWS, though), and see that if you have CSS drop down menus using
> lists, that the screenreader will read the hidden hover menus.
> However, it looks to me like they will read all of them. Are there
> ways to put mini-skip-links in a drop down menu like that so you can
> go from one top-tier option to the next?

It depends. In most cases, a single submenu level should be the
maximum and it's often best to build the site as if the submenus were
not there, relegating them to the status of a convenience item to
those who feel comfortable using them. They should never, ever, be the
sole means of navigation. A lot of the bad "press" we get is
unavoidable. We try to teach our customers, via online tutorials and
shipping user guides, to use these things responsibly :-)

--
Al Sparber - PVII
http://www.projectseven.com
Extending Dreamweaver - Nav Systems | Galleries | Widgets
Authors: "42nd Street: Mastering the Art of CSS Design"



From: Austin, Darrel
Date: Fri, Feb 23 2007 9:00AM
Subject: Re: Question about CSS Hover Dropdown menus
← Previous message | No next message

> If you have a pure CSS hover menu, is there any way to make
> it function just by using keystrokes? So, for example, I'm
> tabbing through the scroll down menu options on ESPN.com, and
> I want to see what options are under NBA. If I tab to it, and
> click "enter", instead of seeing what's underneath, I'm taken
> to the main NBA page. Do people who use only keystrokes to
> navigate have to live with this, or is there a keystroke I'm
> missing (I know what the issues may be if it were a
> Javascript mouseover)

To make a fly-out/drop-down menu accessible to keyboard users, you
really need to use judicious amounts of javascript. There aren't a lot
of truly keyboard acessible drop-down menu systems. A few that I've come
across:

http://mnteractive.com/archive/hangover-fly-out-navigation-part-ii/

'Pure CSS' drop down menus, IMHO, are inferior to javascript + CSS based
ones. The javascript is really needed for that layer of usability that
you miss with just CSS. Keyboard navigation is one, and the other (more
major issue, IMHO) is the time-out delay needed to give the user a
chance to navigate from the 'trigger' link to the link on the menu. A
lack of this delay can be a huge hurdle for anyone that uses a mouse but
perhaps not with ideal large motor control (kids, elderly, arhtritis,
etc.)

Keep in mind the other issues that can cause usability and accessibility
problems with drop-down menus. Another big issue that is brought up is
simply information overload. By basically attaching the entire site map
to every page, you are require a person not only digest the entirety of
the site menu on each page, but physically traverse it. The traversing
issue can be resolved via ancillary navigation elements (static section
navigation, breadcrumbs, etc.).

> Also I've played with some screenreaders (I don't have access
> to JAWS, though), and see that if you have CSS drop down
> menus using lists, that the screenreader will read the hidden
> hover menus. However, it looks to me like they will read all
> of them.

See above. ;o)

-Darrel