M016: Vertical navigation mechanisms for narrow width screens

User Problem

Many websites are designed for a desktop viewing experience. Seen on the narrow display of a mobile device, this means that the browser's viewport shows just a part of the content. The width of content elements like horizontal menus often exceeds the width of display. On sites that are not responsive, this necessitates horizontal panning in order to activate menu items that are not within the current viewport.

Solution and Examples

Responsive Web Design (RWD) can alleviate this problem by offering a navigation menu in different formats depending on the actual width of the device screen (technically, the width of the browser viewport(). A menu that is shown as horizontal band in a desktop browser can be shown as vertical list onto the narrow screen of a mobile device.

The RWD approach uses so-called break points (CSS 3 @media selectors) that define different content renderings for specific ranges of viewport widths. Designers often use breakpoints to define different site layouts for the desktop, for tablets, and for smartphones.

A very common RWD pattern is to render the main navigation menu as single menu toggle button on narrow viewports. The aim is to ensure that main content stays visible even on small screens. Toggling this menu button then expands the main menu as a vertical list of options and pushes main page content further down.

Requirements for implementations

Note: The following list of requirements is probably incomplete and possibly inaccurate in places. It needs vetting by web designers and testing with different input scenarios, like mobile screen readers and mobile with connected keyboards.

• Ensure that the menu toggle button receives focus when the mobile site is used with an external keyboard.
• Ensure that the menu toggle button has a meaningful accessible name (preferably visible as text). While the so-called hamburger button without label is getting quite common, user resarch shows that a button with the visible name "menu" is better understood. Another option is to use the hamburger icon but to provide a text legend like "open menu" after it (changing to "close menu" once the menu is expanded).
• Ensure that the menu toggle button reflects the current state of the menu (collapsed/expanded) either using the aria-expanded attribute on the button or changing the accessible name to reflect the state
• Ensure a focus order where the menu items in the expanded navigation menu immediately follow the toggle button(either by implementing this order in the DOM or by dynamically setting the focus to the menu when it is expanded (note that this may not work well in all contexts)
• Ensure that menu items can be focused and activated via pointer, touch and keyboard

Example 1

http://examples.anysurfer.be/dropdown/

(I have asked Bart Simons (anysurfer) who agrees code example here. The example has the menu visible by default, to be toggled by a "hamburger" button. We might modify the example to include a visible label like "open menu" next to the toggle button

Applicable Operating System or Device

The vertical navigation menu is used by many responsive websites to optimise the display in mobile browsers in different mobile OSs (iOS, Android, Windows Phone, Blackberry).

References

• WCAG REFERENCE
• OR OUTSIDE REFERENCE

Tests

Procedure

1. Check that the menu button has a descriptive accessible name that dynamically reflects the toggle state of the menu (e.g. using a DOM inspect tool)
2. Check that the toggle button can be activated in different interaction modes (keyboard, pointer, touch, touch with activated built-in screen reader)
3. Check that menu items directly follow the toggle button in terms of focus order

Expected Results

• All checks above are true.