一切为了无障碍：让web下拉菜单拥抱更多的可能

2024-01-13 17:19:16

当浏览网页时，下拉菜单是常见的导航控件，它们允许用户从列表中进行选择，从而快速访问所需信息。然而，对于那些因残障而无法使用鼠标或触控屏幕的用户来说，下拉菜单却成为了一道难以逾越的障碍，阻隔了他们与数字世界的自由沟通。

为实现无障碍的web，有必要确保下拉菜单也能为所有用户无缝使用。为此，我们以“鼠标操作+hover”的模式作为实现方案，该方法简单易行，却能为用户带来良好的交互体验。

实现步骤：

HTML结构 ：
- 使用<nav>元素作为导航容器，在其中创建<ul>元素作为下拉菜单列表。
- 每个下拉菜单项用<li>元素表示，并设置role="menuitem"属性。
- 为每个下拉菜单项添加一个<a>元素，并设置href属性指向相关页面或功能。
CSS样式 ：
- 使用CSS样式隐藏下拉菜单，初始状态下，display: none;。
- 为<li>元素设置float: left;，以便它们水平排列。
- 为<a>元素设置display: block;，使其在<li>元素中占据全部宽度。
- 设置下拉菜单的样式，包括背景颜色、边框、字体等。
JavaScript代码 ：
- 为导航容器绑定鼠标移入事件，当鼠标移入时，显示下拉菜单，display: block;。
- 为导航容器绑定鼠标移出事件，当鼠标移出时，隐藏下拉菜单，display: none;。

实例演示：

让我们通过一个简单的示例来演示下拉菜单的无障碍访问实现：

<nav>
  <ul>
    <li role="menuitem">
      <a href="home.html">首页</a>
    </li>
    <li role="menuitem">
      <a href="about.html">关于我们</a>
    </li>
    <li role="menuitem">
      <a href="contact.html">联系我们</a>
    </li>
  </ul>
</nav>

nav {
  background-color: #f2f2f2;
  padding: 10px;
  margin-bottom: 20px;
}

nav ul {
  list-style-type: none;
  display: flex;
}

nav li {
  float: left;
  margin-right: 10px;
}

nav a {
  display: block;
  padding: 5px 10px;
  text-decoration: none;
  color: #333;
}

nav li:hover a {
  background-color: #ccc;
}

nav ul.dropdown {
  display: none;
}

nav li:hover ul.dropdown {
  display: block;
}

// 获取导航容器元素
const nav = document.querySelector('nav');

// 绑定鼠标移入事件
nav.addEventListener('mouseover', () => {
  // 显示下拉菜单
  const dropdown = nav.querySelector('ul.dropdown');
  dropdown.style.display = 'block';
});

// 绑定鼠标移出事件
nav.addEventListener('mouseout', () => {
  // 隐藏下拉菜单
  const dropdown = nav.querySelector('ul.dropdown');
  dropdown.style.display = 'none';
});