时间戳

首页 > 解决方案 > 我们如何在分页中使省略号可访问？

html - 我们如何在分页中使省略号可访问？

问题描述

我正在尝试使分页模块可访问。我对此感觉很好，但不知道如何处理用来表示我们正在跳过一堆页面的省略号。

我的直觉是在“视觉隐藏”的范围内包含一些解释性文本，就像我在这里所做的那样。

<nav aria-label="pagination">
  <ul class="pagination__list">
    <li class="pagination__item">
      <a href="#"><span class="visually-hidden">Page </span>1</a>
    </li>
    <!-- skipping pages 2 - 10 to keep things manageable -->
    <li class="pagination__item">
      <span class="pagiantion__skip-indicator"><span class="visually-hidden">Skipping pages 2 to 10</span>&hellip;</span>
    </li>
    <li class="pagination__item">
      <a href="#"><span class="visually-hidden">Page </span>11</a>
    </li>
    <li class="pagination__item">
      <a href="#"><span class="visually-hidden">Page </span>12</a>
    </li>
    <li class="ti_pagination__item">
      <a href="#" class="active" aria-current="page"><span class="visually-hidden">Page </span>13</a>
    </li>
    <li class="pagination__item">
      <a href="#"><span class="visually-hidden">Page </span>14</a>
    </li>
    <li class="pagination__item">
      <a href="#"><span class="visually-hidden">Page </span>15</a>
    </li>
    <!-- skipping pages 16-99 to keep things manageable -->
    <li class="pagination__item">
      <span class="pagiantion__skip-indicator"><span class="visually-hidden">Skipping pages 16 to 99</span>&hellip;</span>
    </li>
    <!-- Last page -->
    <li class="pagination__item">
      <a href="#"><span class="visually-hidden">Page </span>100</a>
    </li>
  </ul>
</nav>

我希望有人可以让我知道这是否是在这种情况下制作的最好的柠檬水，或者向我指出一些好的资源。

标签： htmlpaginationaccessibility

解决方案

我最近遇到了同样的问题，在考虑了与您的代码中的选项类似的几个选项之后，我想出了这个：使用role="img"和aria-label="ellipses"来显示视觉隐藏的元素包含省略号。

这将是：

<li class="skiped-pages">
   <span class="sr-only" role="img" aria-label="ellipses">...</span>
</li>

大多数屏幕阅读器会将“...”读作长时间的停顿，即使它是在段落上下文之外使用的。这就是为什么我在 aria-label 中添加了“省略号”这个词，对于中断指示器的目的来说，它不太冗长和有意义。

<span>role="img" 的目的是允许使用 aria-label（在or中使用时不会被屏幕阅读器读出<li>）。它由屏幕阅读器显示为图像，这对我来说在语义上是可以的，因为“...”实际上是某种代表省略号的符号或图标（在我的例子中，我通过 CSS 用一条花哨的长线替换了省略号）。例如 NVDA (v. 2017 with Chrome 79/FFox 57) 读取"link: page 15" , "Image: ellipses" , "link: page 100"。看看心智模型与您在视觉设计中呈现的心智模型有何相似之处。

考虑到渐进增强，我会在视觉隐藏的元素文本中使用“...”，因为任何单词在样式之前都会看起来很奇怪。

--

在寻找支持此答案的资源时，我注意到 MDN 文档在此处的第三个用例中对表情符号提出了类似的观点：

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Role_Img

推荐阅读