Skip navigation
Help

Menu

warning: Creating default object from empty value in /var/www/vhosts/sayforward.com/subdomains/recorder/httpdocs/modules/taxonomy/taxonomy.pages.inc on line 33.

Soupe du jour: tags. Image: clogozm/Flickr

Somewhere far in the web’s primordial past it was decided that the best way to mark up a menu in HTML was to use the unordered list element: <ul>. The vast majority of tutorials – if not all – you’ll ever see for creating navigation menus use the familiar list element structure, nesting links inside <li> tags. Menu plugins for WordPress and other popular publishing systems use lists for menus as well. Even the HTML5 spec uses an unordered list in its <nav> element examples.

There is, as CSS-Tricks’ Chris Coyier writes, “no debate” about how menus should be marked up. But HTML5 adds the <nav> element and there’s also a navigation role in WAI-ARIA so should we still be using lists to mark up menus?

Coyier says no. He’s dropped lists from his <nav> elements and instead uses just links and span tags. Coyier cites a talk by Reinhard Stebner, who is blind, and suggests that with most screen readers the far better solution for menus is to use divs and spans for menus.

Be sure to read through Coyier’s post for some more data on why ditching the list might be a good idea and check out Jim Doran’s write up on Stebner’s original talk, which makes a distinction between accessible and usable. That is, a technically “accessible” site might still be a usability nightmare for some users.

However, as Mozilla’s Chris Heilmann points out in the comments of Coyier’s post, the problems lists cause in some screen readers are really a result of the sorry state of screen readers. “Screen readers are damn slow to update and vary immensely between different versions… I gave up a long time ago calling something accessible or not when it works in Jaws.”

Lists for menus have advantages over the div and span route, like some extra elements for styling and the fact that they render as, well, lists even in the absence of CSS.

What do you think? Are lists for menus a legacy workaround we no longer need in the day and age of <nav> and role="navigation"? Or do they still offer enough advantages to keep using for menus?

For his part Coyier says he’s going to keep building list-free menus. “Until I see some solid research that suggests that’s dumb, I’m sticking to it,” he writes. “As always, the best would be to get more information from real screen reader users like Reinhard.”

0
Your rating: None


Click here to read The Ten Commandments Of Video Game Menus

A good video game menu is like a good roadie: It stays out of the way. But still, far too many menus waste far too much of our time. People want to play games, not mess around in menus! More »

0
Your rating: None

Integrating images as menu items

The ability to have images as menu items sounds like a common and straight forward task. Surprisingly, Drupal never has had this ability built into core, but there are a few modules that will help us accomplish our goal. Sprite Graphic Menu is probably the easiest one to use and the one that will be covered in this article.

It is possible to write some custom code using regex in your template.php which could parse the title field of a menu item to look for image filename extensions and then alter the menu output to print that menu item as an image. But wouldn't it be nice if a module could extend the current menu system and provide an image upload field. Even better, how about some CSS options to provide our own sprite background positioning. This is exactly what Sprite Graphic Menu does for us.

The current process is a bit janky and will hopefully be improved. Example: You will not see the image upload field when first creating a menu item. You must create the menu item and then edit it, then the image upload and configuration options will be displayed on the form.

Screenshot of Sprite Menu Graphic Configuration

0
Your rating: None