您的分页可能无法访问-DEV365 开发者社区

介绍

分页是一项广泛实现的功能，该功能在需要列出数据（例如博客，社交媒体和电子商务）的几个视觉接口中实现，因为它提供了更好的用户体验，并防止需要立即获取所有数据（想象一下！）

但是你做对吗？

by“ right”我的意思是“包括网络上的所有用户”。还是您只是在数字上堆叠漂亮的链接？甚至更糟糕的是：堆叠按钮（我们将讨论）！

初始代码

为了了解正在发生的事情，让我们从组件的非常基本的版本开始，然后就可以改进文章。在本教程中，出于教程，我们将仅使用HTML和CSS。无需动态渲染页数或类似的内容。

<nav>
  <ul class="pagination__list">
    <li class="pagination__list-item">
      <a class="pagination__anchor" href="path/to/page">Previous</a>
    </li>
    <li class="pagination__list-item">
      <a class="pagination__anchor" href="path/to/page">1</a>
    </li>
    <li>
      <a class="pagination__ellipsis">&#8230;</a>
    </li>
    <li class="pagination__list-item">
      <a class="pagination__anchor" href="path/to/page">6</a>
    </li>
    <li class="pagination__list-item">
      <a class="pagination__anchor" href="path/to/page">
        7
      </a>
    </li>
    <li class="pagination__list-item pagination__list-item--current">
      <a href="#" class="pagination__anchor">8</a>
    </li>
    <li class="pagination__list-item">
      <a class="pagination__anchor" href="path/to/page">9</a>
    </li>
    <li class="pagination__list-item">
      <a class="pagination__anchor" href="path/to/page">10</a>
    </li>
    <li>
      <a class="pagination__ellipsis">&#8230;</a>
    </li>
    <li class="pagination__list-item">
      <a class="pagination__anchor" href="path/to/page">20</a>
    </li>
    <li class="pagination__list-item">
      <a class="pagination__anchor" href="path/to/page">Next</a>
    </li>
  </ul>
</nav>

实际上，此版本是一个很好的开始。至少我们正在正确使用语义HTML，明确地说它是NAV组件，并正确列出了链接。但这远非易于访问：人们使用辅助技术（例如屏幕读者）将需要通过上下文猜测几件事！

为什么不按钮？

简单地说：不要让您的用户感到沮丧。有人在您的网站上导航的人期望元素的行为能力。

链接会将您重定向到同一页面中的新页面或部分，并且按钮将触发操作。

两者都是可集中的，但是人们通过键盘触发链接与enter键进行交互，以及与space键的按钮。

但是，关于它会改变路由器参数的过滤器，有有趣的讨论。但是我们将把它拒之门外。

请，没有事件听众的div标签。它需要很多代码，损害其他开发人员的可读性，并且根本不是语义！

最终代码

首先，让我们分解您将在下面看到的改进：

我们添加了一个aria-label="pagination"，因为这很可能不是页面上唯一的导航组件，，我们应该明确区分它与主纳入。。
请注意.visually-hidden类。 我们在跨度标签中使用它，为使用屏幕读取器的人们提供更多上下文，同时将其隐藏在视觉用户界面中。它是在以Radix-ui等以可访问性为注重的组件库中实现的。
对于当前页面，我们添加aria-current="page"作为活动链接的指标。 aria-label="page"提供了与视觉隐藏跨度相同的附加上下文。

<nav aria-label="pagination">
  <ul class="pagination__list">
    <li class="pagination__list-item">
      <a class="pagination__anchor" href="path/to/page">Previous <span class="visually-hidden">page</span></a>
    </li>
    <li class="pagination__list-item">
      <a class="pagination__anchor" href="path/to/page"><span class="visually-hidden">page</span> 1 <span class="visually-hidden">(first page)</span></a>
    </li>
    <li>
      <a class="pagination__ellipsis">&#8230;</a>
    </li>
    <li class="pagination__list-item">
      <a class="pagination__anchor" href="path/to/page"><span class="visually-hidden">page</span> 6</a>
    </li>
    <li class="pagination__list-item">
      <a class="pagination__anchor" href="path/to/page">
        <span class="visually-hidden">page</span> 7
      </a>
    </li>
    <li class="pagination__list-item pagination__list-item--current">
      <a href="#" class="pagination__anchor" aria-label="page 8" aria-current="page">8</a>
    </li>
    <li class="pagination__list-item">
      <a class="pagination__anchor" href="path/to/page"><span class="visually-hidden">page</span> 9</a>
    </li>
    <li class="pagination__list-item">
      <a class="pagination__anchor" href="path/to/page"><span class="visually-hidden">page</span> 10</a>
    </li>
    <li>
      <a class="pagination__ellipsis">&#8230;</a>
    </li>
    <li class="pagination__list-item">
      <a class="pagination__anchor" href="path/to/page"><span class="visually-hidden">page</span> 20 <span class="visually-hidden">(last page)</span></a>
    </li>
    <li class="pagination__list-item">
      <a class="pagination__anchor" href="path/to/page">Next <span class="visually-hidden">page</span></a>
    </li>
  </ul>
</nav>

这是完整的CSS：

/* Small reset */
body {
  box-sizing: border-box;
}

* {
  padding: 0;
  margin: 0;
  list-style-type: none;
}

.pagination__list {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
  gap: 5px;
}

.pagination__list-item {
  background-color: #4682b4;
  padding: 10px;
  border-radius: 5px;
  cursor: pointer;
}

.pagination__list-item--current {
  background-color: #191970;
}

.pagination__anchor {
  text-decoration: none;
  color: #ffffff;
}

.visually-hidden {
  border: 0;
  padding: 0;
  margin: 0;
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px 1px 1px 1px);
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  white-space: nowrap;
}

您也可以在代码沙箱中检查出来：

结论

请记住，总是有改进的余地。有不同的辅助技术，不同的残疾和与网站互动的不同方法。我们的主要目标是开始考虑最佳实践，并为每个人建立更好的网络。

。

请随时在评论中做出贡献。我们都在学习！

谢谢您的阅读。

目录

介绍

初始代码

为什么不按钮？

最终代码

结论

参考