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

【问题标题】：How do we make an ellipsis accessible in pagination?我们如何在分页中使省略号可访问？
【发布时间】：2019-09-28 14:33:56
【问题描述】：

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

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

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

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

【问题讨论】：

标签： html pagination accessibility

【解决方案1】：

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

听“跳过第 16 到 99 页”会很烦人，因为它提供了人们可以自己推断的信息

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

【讨论】：

【解决方案2】：

我最近遇到了同样的问题，在考虑了与您代码中的选项类似的几个选项后，我想出了这个：使用 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

【讨论】：