HTML 和 CSS | Tabindex 属性和导航栏

在现代的网站开发中，导航栏是必不可少的部分。在构建导航栏时，我们可以使用 tabindex 属性来改善可访问性，使得导航栏更容易使用，并且能够在页面上正确地焦点移动。本文将介绍 tabaindex 属性的使用，以及如何构建一个简单的导航栏。

tabindex 属性

tabindex 属性用于确定 DOM 中元素的焦点顺序。当用户使用 tab 键遍历页面上的元素时，tabindex 属性会决定焦点的顺序。更重要的是，如果 tabindex 属性不正确地设置，可能会导致无法使用键盘或者屏幕阅读器等辅助技术来访问页面。

基本使用

tabindex 属性可以设置任何大于 0 的整数，其中 tabindex="1" 表示焦点顺序的第一个，tabindex="2" 表示第二，以此类推。同时，tabindex="-1" 可以用于表示元素无法通过 tab 键聚焦，但仍可以通过编程方式聚焦。

下面是一个例子，我们使用 tabindex 属性来设置焦点顺序：

<input type="text" tabindex="1">
<input type="text" tabindex="2">
<input type="text" tabindex="3">
<button tabindex="4">Submit</button>

在上面的例子中，焦点的顺序依次为输入框1、输入框2、输入框3、提交按钮。

对可访问性的影响

在设置 tabindex 属性之前，你应该需要知道它如何对可访问性产生影响。例如，在某些情况下，tabindex 可能会使剩余的页面布局更难以访问。

大多数情况下，仅需使用 tab 键，就可以轻松访问页面。你不应该需要通过 tabindex 修改默认焦点顺序。在需要调整焦点顺序时，你应该首选自然文档流中的元素顺序。

注意事项

在设置 tabindex 属性时需要注意以下几点：

• 不应该给所有元素设置 tabindex。这会使键盘命令在整个文档上变得缓慢和困难。
• 不应该将 tabindex 排除在真正表单的输入字段之外。在某些情况下，无论 tabindex 是什么，它都会干扰用户的导航。
• 不应使用 tabindex 替代重复的元素。如果要多次使用类似的元素，应该使用 CSS 来控制它们的外观和行为。

导航栏

导航栏是一个网站最重要和最基本的部分。一个好的导航栏可以让用户更快地找到他们想要的内容。下面是一个简单的导航栏的例子：

<nav>
  <ul>
    <li>
       <a href="#">Home</a>
    </li>
    <li>
      <a href="#">About</a>
    </li>
    <li>
      <a href="#">Contact</a>
    </li>
    <li>
      <a href="#">Services</a>
    </li>
  </ul>
</nav>

在上面的例子中，我们使用了 HTML5 新的语义标签 <nav>，并使用了无序列表 <ul> 来创建导航列表。接下来，我们使用 CSS 样式来美化导航栏。

nav {
  background-color: #333;
  height: 50px;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  height: 100%;
}

nav ul li {
  height: 100%;
  padding: 0 10px;
}

nav ul li a {
  text-decoration: none;
  color: white;
  font-weight: bold;
  height: 100%;
  display: flex;
  align-items: center;
}

在上面的 CSS 样式中，我们设置了导航栏的背景颜色和高度。我们还使用弹性盒模型设置了列表的布局和样式。最后，我们使用了文本装饰来去除链接的下划线，并将链接的文本样式设置为粗体。

现在，我们已经拥有了一个美丽的导航栏，可以帮助用户更快地找到他们想要的内容。与此同时，我们使用了 tabindex 属性来增加了导航栏的可访问性，使得所有用户都可以更轻松地使用它。