随着互联网的普及，越来越多的人使用 Web 应用程序来满足他们的需求。但是，我们不能忽视一些用户的需要，例如视觉障碍者、运动障碍者、老年人等等。这些用户可能无法使用鼠标或触摸屏来浏览网站，他们需要使用键盘来导航。
在本文中，我们将介绍如何创建一个友好的键盘导航，以确保你的 Web 应用程序对所有人都是可用的。
键盘访问性
键盘访问性是指通过键盘操作访问网站或应用程序的能力。对于视觉障碍者、运动障碍者或手部受伤的人来说，使用鼠标或触摸屏可能会造成困难。因此，我们需要确保他们可以使用键盘来访问我们的应用程序。
在 HTML 中，可以使用 tabindex 属性指定跳过的元素顺序，这样用户可以通过按 Tab 来导航。但是，这不是一个完整的解决方案。我们仍然需要确保导航是有逻辑的，并且易于使用。
如何创建一个友好的键盘导航
1. 排序聚焦元素
首先，你需要确保键盘焦点按照逻辑顺序从一个元素跳转到下一个元素。这意味着你需要确保所有表单元素、导航元素、按钮等都在正确的顺序中。
<form> <label for="firstname">First name:</label> <input type="text" id="firstname" name="firstname"><br><br> <label for="lastname">Last name:</label> <input type="text" id="lastname" name="lastname"><br><br> <button type="submit">Submit</button> </form>
如上所示，我们使用了 label 标签，而不是像 placeholder 那样使用 input 里的内容占位符。这样可以让屏幕阅读器读取标签而不是 placeholder 内容。
2. 提供键盘快捷键
你可以提供一些键盘快捷键来帮助用户直接跳转到目标元素。例如，你可以在菜单上提供 Alt+键盘快捷键，这将允许用户通过键盘导航到菜单项。
<nav>
<ul>
<li><a href="#" accesskey="h">Home</a></li>
<li><a href="#" accesskey="a">About</a></li>
<li><a href="#" accesskey="c">Contact</a></li>
</ul>
</nav>在上面的示例中，我们使用了 accesskey 属性来指定快捷键。
3. 显示焦点状态
确保在元素上设置明确的焦点状态，这将有助于用户确定他们正在使用哪个元素，并有助于视觉障碍者。你可以使用 CSS 样式来设置焦点状态。
:focus {
outline: 2px solid #f00;
}4. 支持键盘操作
确保所有功能都可以通过键盘操作访问。例如，对于网页上的下拉菜单，用户应该能够使用向上或向下箭头来滚动菜单项，并且可以使用 Enter 键来选择所需的选项。
<select> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="opel">Opel</option> <option value="audi">Audi</option> </select>
如上所示，您可以使用 select 元素来创建下拉菜单。用户还可以使用 Tab 键跳转到下一个元素。
总结
在创建 Web 应用程序时，我们必须考虑到所有用户的需要。友好的键盘导航是提高键盘访问性的关键。通过项目中正逆向重构，我们可以逐步优化键盘访问性。最后，我们应该针对真实用户来测试您的键盘导航，以确保它是可用、易于使用并且逻辑清晰。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65b1c0f3add4f0e0ffaf4911