在现代社会，网页已经成为人们获取信息的主要途径之一。然而，对于一些身体或认知上存在障碍的人来说，使用网页可能会带来很大的困难。为了让更多的人能够方便地访问网页，无障碍网页设计变得越来越重要。
本文将介绍如何使用 Tab 键实现无障碍访问，这是一种简单而有效的无障碍设计技术。我们将讨论如何为网站添加 Tab 键导航，以及如何确保 Tab 键导航的可访问性和可用性。
什么是 Tab 键导航
Tab 键导航是指使用 Tab 键来浏览网页上的链接和表单元素。当用户按下 Tab 键时，焦点将自动移动到下一个可聚焦的元素上，例如链接、按钮、输入框等。这种导航方式可以让用户快速地浏览网页，并且不需要使用鼠标。
为网站添加 Tab 键导航
为网站添加 Tab 键导航非常简单。我们只需要为网站中的每个可聚焦元素添加一个 tabindex 属性。tabindex 属性指定了元素在 Tab 键顺序中的位置，数值越小，优先级越高。例如：
<a href="#" tabindex="1">Link 1</a> <a href="#" tabindex="2">Link 2</a> <input type="text" tabindex="3"> <button tabindex="4">Submit</button>
在上面的代码中，我们为两个链接、一个输入框和一个按钮添加了 tabindex 属性。当用户按下 Tab 键时，焦点将依次移动到 Link 1、Link 2、输入框和按钮上。
需要注意的是，不是所有的元素都可以聚焦。例如，div 元素默认是不能聚焦的。如果我们想让一个 div 元素聚焦，可以将其设置为 tabindex="-1"，然后在 JavaScript 中使用 focus() 方法来聚焦它。
确保 Tab 键导航的可访问性和可用性
为网站添加 Tab 键导航并不意味着我们已经实现了无障碍访问。我们还需要确保 Tab 键导航的可访问性和可用性。
可访问性
在无障碍设计中，可访问性是指网站能够被所有人访问，包括那些身体或认知上存在障碍的人。为了确保 Tab 键导航的可访问性，我们需要遵循以下几点：
- 确保 tabindex 属性的值是唯一的，并且按顺序排列。
- 不要将 tabindex 属性的值设为负数，因为这会使元素跳过 Tab 键顺序。
- 不要在 tabindex 属性中使用太大的数值，因为这可能会导致键盘焦点跳过一些元素。
- 确保网站可以通过键盘进行所有操作，而不需要使用鼠标。
可用性
在无障碍设计中，可用性是指网站的功能和界面可以被所有人轻松理解和使用。为了确保 Tab 键导航的可用性，我们需要遵循以下几点：
- 确保网站的 Tab 键顺序是有意义的，而不是随意排列。
- 确保网站的 Tab 键顺序是一致的，不会因为页面的不同部分而改变。
- 确保网站的 Tab 键顺序是可预测的，用户可以预测下一个聚焦的元素是什么。
- 确保网站的 Tab 键顺序是可见的，用户可以看到当前聚焦的元素是哪一个。
示例代码
下面是一个简单的示例代码，演示了如何使用 Tab 键实现无障碍访问。在这个示例中，我们为一个表单添加了 Tab 键导航，并且在输入框中添加了一些验证逻辑，以确保用户输入的内容符合要求。
// www.javascriptcn.com code example
<form>
<label for="name">Name:</label>
<input type="text" id="name" tabindex="1" required>
<br>
<label for="email">Email:</label>
<input type="email" id="email" tabindex="2" required>
<br>
<label for="password">Password:</label>
<input type="password" id="password" tabindex="3" required>
<br>
<button type="submit" tabindex="4">Submit</button>
</form>
<script>
const form = document.querySelector('form');
const nameInput = document.querySelector('#name');
const emailInput = document.querySelector('#email');
const passwordInput = document.querySelector('#password');
form.addEventListener('submit', e => {
e.preventDefault();
if (nameInput.value.trim() === '') {
alert('Name is required');
nameInput.focus();
return;
}
if (emailInput.value.trim() === '') {
alert('Email is required');
emailInput.focus();
return;
}
if (passwordInput.value.trim() === '') {
alert('Password is required');
passwordInput.focus();
return;
}
alert('Form submitted successfully');
});
</script>在上面的代码中，我们为表单中的每个输入框和按钮添加了 tabindex 属性，以实现 Tab 键导航。我们还在 JavaScript 中添加了一些验证逻辑，以确保用户输入的内容符合要求。当用户按下 Tab 键时，焦点将自动移动到下一个可聚焦的元素上，用户可以方便地完成表单的填写和提交。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d14654a941bf71342b0712