Four key points are to be followed when building a friendly navigation menu: first, use semantic HTML tags, such as wrapping the navigation area with

OK, the accessibility of the website navigation menu is indeed a key issue. Many people tend to ignore this point, but in fact it directly affects the user experience of some users, especially visually impaired users or those who rely on keyboard operations. A truly easy-to-use menu not only looks beautiful and has smooth interaction, but more importantly, it can allow everyone to understand and use it smoothly.

Let’s start from several common perspectives and talk about how to build a more friendly navigation menu.

1. Use semantic HTML tags

This is the most basic and easiest to overlook. Many people use a bunch of divs or spans to build menu structures, which is very unfriendly to screen readers.

The correct way to do it is:

<li> Wrap the entire navigation area with <nav></nav> and tell assistive technology "This is a piece of navigation" <li> Menu items are organized with unordered lists <ul></ul> and <li> <li> Each link must use <a></a> or element with role="link" to ensure that the keyboard focus can reach

for example:

 <nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About Us</a></li>
    <li><a href="/contact">Contact us</a></li>
  </ul>
</nav>

After doing this, the screen reader can correctly recognize that this is a navigation menu and read out the contents of each option.

2. Make sure the keyboard is accessible

Some websites only consider the experience of mouse users and ignore those who rely entirely on keyboard operations. For example, the drop-down menu is only displayed when the mouse is hovered, but the keyboard user cannot trigger it at all.

Solutions include:

<li> The drop-down menu should be able to focus on the parent menu item through the Tab key, press Enter or arrow keys to expand<li> The expanded submenu must also be able to navigate through the Tab or arrow keys.<li> When the menu is closed or hidden, make sure the focus is back to the right place to avoid "focus loss"

A common way to implement it is to add tabindex to a menu item and listen for keyboard events. For example, after clicking an item with a submenu, the focus will be automatically moved to the first child.

3. Use ARIA attributes to enhance accessibility

Although semantic tags can already handle most of the situations, in some complex interactions (download menus, folded panels), ARIA needs to be used to supplement information.

Commonly used ARIA properties are:

<li> aria-haspopup="true" : means that the current item has a submenu<li> aria-expanded : used for buttons or menu items, indicating whether it is currently expanded<li> aria-label / aria-labelledby : Provides description information for elements without visible text<li> role="menu" / role="menuitem" : Applicable to simulate native menu behavior when customizing menu structure (note that this requires additional keyboard support)

For example, if there is a hamburger menu button, it is best to add:

 <button aria-expanded="false" aria-label="Open navigation menu">
  ?
</button>

In this way, the screen reader knows the function of this button and can prompt the user whether the menu has been expanded according to the status.

4. Small details on visual and interactive design

In addition to the code level, visual and interaction design can also affect accessibility:

<li> Color contrast : The color of the link should have sufficient contrast with the background, so that users with weak eyes can see clearly <li> Focus Style : The default browser focus box is sometimes removed by the designer, but this will make keyboard users lose. It is recommended to keep or customize clear focus instructions <li> Animation control : The animation time of the menu expansion and closing should not be too long, otherwise it will interfere with the rhythm of the screen reader; it is also better to provide the "reduce animation" option. <li> Responsive adaptation : Mobile menus may require reorganization, such as turning multi-level menus into layered pages instead of folding and expanding

These seem to be issues with UI design, but they are actually part of accessibility.

Basically that's all. To make an accessible navigation menu, there is actually no need for too complex tools. The key is to understand the user's real needs and then consider users with different abilities in terms of structure, interaction and performance. Many problems are not technical problems, but awareness issues.

The above is the detailed content of Building Accessible Navigation Menus. For more information, please follow other related articles on the PHP Chinese website!