Alternatives to Javascript-powered drop down lists for accessibility purposes

Question

Most drop down lists in websites' main menus are powered by Javascript, which usually displays some div element containing the list on click or hover. But non Javascript users just can't see the drop down list!

The only alternative I can think of is to display the drop down list as a HTML select element, but nobody does that. Is there a better solution out there?

What do you mean by 'nobody does that'? Seems to me that the javascript drop down is the exception and the select is the norm. What in your requirements stops *you* from having an HTML select? — xDaevax, Aug 26 '14 at 20:35
I meant that I don't remember having ever seen any horizontal main menu that actually includes a HTML drop down menu. In all cases it is uncommon and so I wonder if there could be another accessible solution that I am not aware of. Personally I'd rather avoid a HTML select simply because it looks awful in a main menu. — drake035, Aug 26 '14 at 22:06
I think I understand what you mean. Basically a horizontal menu( with vertical stacked sub menus) without JavaScript? — xDaevax, Aug 26 '14 at 22:26
Wow I didn't know that technology, that's awesome (and exactly what I need). Maybe you can create an answer with this jsfiddle you gave in it so I can validate it? — drake035, Aug 27 '14 at 11:06
Using a select for navigation (esp. with an onchange handler and no submit button) for navigation is not recommended. Not sure why you think using JavaScript would make the navigation inaccessible. The main thing you want to ensure is that the menu is marked up logically and [keyboard navigable](http://www.w3.org/TR/WCAG20/#keyboard-operation-keyboard-operable). — steveax, Aug 27 '14 at 14:57
Lack of javascript is not an accessibility issue (see http://lists.w3.org/Archives/Public/w3c-wai-ig/2012OctDec/0223.html). You may wish to cater for people who don't receive JavaScript, but that is not the same thing. For example, the number of people using screen readers without JavaScript is the same as the general population. I'd suggest removing the accessibility tag from this question. Avoiding JavaScript will probably make it less accessible. — AlastairC, Aug 28 '14 at 13:50

score 2 · Accepted Answer · edited May 23 '17 at 12:06

Non-JavaScript menus are surprisingly common and are often times just as clean and can be more efficient than their JavaScript counterparts. You can use JavaScript but it's important to have graceful degradation if you want your menu to be accessible and functional for all users.

There are many examples of these online but the basic premise is to have a normal navigation menu (using UL and LI elements), and use CSS to change the look and appearance based on the user interaction (such as a hover).

Here is an example of a basic menu that will work without CSS or JavaScript and still be perfectly usable (some of the code taken from this answer: https://stackoverflow.com/a/12279190/937012)

<div class="wrapper">
    <navigation role="navigation" class="primary-nav">
        <ul role="menubar">
            <li role="presentation">
               <a role="menu-item" href="#" title="First Link">First Link</a>
            </li>
            <li role="presentation" class="sub-container"> <a role="menu-item" aria-haspopup="true" href="#" title="Second Link">Second Link</a>
                <ul role="menu">
                    <li role="presentation"> <a role="menu-item" href="#" title="Sub Menu Item 1">Sub Item 1</a>
                    </li>
                    <li role="presentation"> <a role="menu-item" href="#" title="Sub Menu Item 2">Sub Item 2</a>
                    </li>
                    <li role="presentation"> <a role="menu-item" href="#" title="Sub Menu Item 3">Sub Item 3</a>
                    </li>
                </ul>
            </li>
            <li role="presentation">
                <a role="menu-item" href="#" title="Third Link">Third Link</a>

            </li>
        </ul>
    </navigation>
</div>

As is, this will create a navigation menu (using some accessibility attributes) that is cross-browser and accessible. You can read more about accessibility best practices here: https://www.webaccessibility.com/best_practices.php

You can then apply whichever CSS you like to change the appearance and give the desired "drop-down" effect.

Here is some CSS for the above markup that produces a horizontal menu that features a sub-menu that appears below the second link when the mouse is moved over the second list item.

A {
    text-decoration: none;
}
A:HOVER {
    color: blue;
}
.wrapper {
    width: 90%;
    display: block;
}
.primary-nav {
    display: block;
    margin: 0px auto;
    width: 100%;
    padding: 0px;
}
.primary-nav UL {
     background-color: #ababcd;
    list-style-type: none;
    margin-left: 0px;
    padding-left: 0px;
    text-indent: 0px;
}
.primary-nav > UL {
    display: inline;
    border: solid 1px #000000;
    text-indent: 0px;
    float: left;
    height: 24px;
    margin: 0px;
    width: 100%;
    list-style-type: none;
    border-collapse: collapse;
}
.primary-nav LI {
    max-width: 150px;
    text-align: center;
}
.primary-nav > UL LI {
    display: inline;
    float: left;
    padding: 0px 3px 0px 3px;
    width: 32%;
    line-height: 24px;
    vertical-align: top;
    margin-top: 0px;
    text-align: center;
}
.primary-nav > UL LI UL {
    display: none;
    width: 100%;
}
.primary-nav > UL LI.sub-container:HOVER UL {
    display: inline-block;
    float: left;
    margin-left: 0px;
    clear: both;
    border: inset 1px #898989;
    box-shadow: 2px 2px 4px #000000;
}
.primary-nav > UL LI.sub-container:HOVER UL LI {
    margin-top: 2px;
    text-align: left;
    clear: both;
    width: 100%;
    padding: 0px;
}
.primary-nav LI A:HOVER {
    background-color: #cdcdef;
}
.primary-nav LI A {
    display: block;
}
.primary-nav > UL LI.sub-container:HOVER UL LI A {
    padding: 1px 3px;
    margin: 0px 3px;
}

Here is a fiddle that stitches it all together: http://jsfiddle.net/xDaevax/osu7t9ty/

Though usable, to people with a mouse, this response is not accessible at all to people using a keyboard alone. Since the intent of the original question was an accessible keyboard, I don't think this response meets that intent. Try something like this, but it is still not in line with the true Aria guidelines https://jsfiddle.net/cfWpE/. — AndyBean, Apr 23 '15 at 19:26

Alternatives to Javascript-powered drop down lists for accessibility purposes

1 Answers1