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

Question

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

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

<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>

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

Answer 1

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

这将是：

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

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

role="img" 的目的是允许使用 aria-label（在<span>或<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

Answer 2

除非您针对的是有认知障碍的人，否则页面导航中省略号的替代文本似乎是多余的，因为这是非常常见的事情。

听“Skipping pages 16 to 99”会很烦人，因为它提供了人们可以自己推断的信息

提供用于跳转到指定页面的输入字段可能是一个更有用的补充。

Answer 3

可以使用视觉隐藏的元素来传达省略号，就像您所做的那样。 我还建议用aria-hidden="true"省略号的 HTML 实体。 所以代码是：

<span class="visually-hidden">Ellipsis</span><span aria-hidden="true">&hellip;</span>

您在视觉隐藏元素中Skipping pages 16 to 99的写作对我来说也很好。