WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Possible Solution for accessible dropdown navigation

for

From: Andrew Kirkpatrick
Date: Jun 1, 2004 7:28PM


>
> We wanted a dropdown navigation that does not have a "go" button, but
> is still accessible. The problem is that when you do an onchange on
> the select element, you cannot navigate to it via Keyboard, and
> generally without a "go" button, we are always dependent on Javascript.
>
This is not broadly accurate. Browser support varies, from firefox,
where onchange requires enter for activation, to IE Win where you can
access the drop down but need to use alt+down arrow, to IE Mac where it
is true.

>
> - Without Javascript you'll have a normal select with a go button.
> - With Javascript enabled I wanted to replace the
> keyboard-inaccessible select solution with an easier one, a list with
> links
> - I didn't want to use any inline Javascript
> - I wanted to make the dropdown easier to be styled - some questions
> about that occured on CSS-D
>
> The solution is here:
> http://www.onlinetools.org/tests/workingnavdropdown.html
>
> It is far from perfect, but I think I finally found an example where a
> DHTML dropdown is making sense :-)
>
> What do you think?

You have accomplished much of what you set out to, but you're losing
some desired behavior. For a screen reader and keyboard user, the
experience now is that instead of 1 item with four subparts to
optionally navigate through, there are 5 links to navigate through, the
first of which is quietly non-functioning.

A nice thing about select boxes is that the user doesn't need to see
everything within one unless desired. By turning the option element
contents into anchor tags, the contents of the select are linearized,
and the result is a less-usable experience for screen reader and
keyboard users. The main accessibility issue that I see for screen
reader users is the "jump to:" link, which does nothing for the screen
reader user, but this is not conveyed to the user. The result will
often be the user wondering what happened.

It is getting there, but anchor elements have special meaning to both
screen readers and browsers that is getting in the way...
AWK

--
Andrew Kirkpatrick, Project Manager
WGBH National Center for Accessible Media
http://ncam.wgbh.org
617.300.4420