我正在尝试使分页模块可访问。我对此感觉很好，但是不确定如何处理用来表示我们正在跳过一堆页面的省略号。
我的直觉是像在此所做的那样，在“可视隐藏”范围内包含一些解释性文本。
const { validation, ...rest } = this.state;
JSON.stringify(rest);
我希望有人能告诉我这是否是在这种情况下制作的最佳柠檬水，或者让我指点一些好的资源。
答案 0 :(得分：2)
我最近遇到了同一问题，在考虑了与您的代码中的选项类似的几个选项之后，我想到了一个选项：将 role =“ img” 与 aria-label =“省略号” 表示包含省略号的视觉隐藏元素。
应该是：
<li class="skiped-pages">
<span class="sr-only" role="img" aria-label="ellipses">...</span>
</li>
即使在段落上下文之外使用大多数屏幕阅读器，它们也会长时间停顿地读取“ ...”。这就是为什么我在咏叹调标签上添加了“省略号”一词的目的，对于中断指示器而言，它不够冗长和有意义。
role =“ img”的目的是允许使用aria标签（在<span>或<li>中使用时，屏幕阅读器不会读取该标签）。屏幕阅读器将其显示为图像，对我来说在语义上是可以的，因为“ ...”实际上是代表省略号的某种符号或图标（在我的情况下，我通过CSS用花哨的长行替换了椭圆）。例如NVDA（v。2017 with Chrome 79 / FFox 57）读取“链接：第15页” ，“图像：椭圆” ，“链接：第100页“ 。了解心理模型与您在视觉设计中呈现的模型如何相似。
考虑到渐进增强，我将在视觉隐藏的元素文本中使用“ ...”，因为任何单词在样式之前看起来都会很奇怪。
-
在寻找资源来备份此答案时，我注意到MDN文档在第三个用例中对表情符号提出了类似的观点：
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Role_Img
答案 1 :(得分：0)
除非您以认知障碍者为目标，否则在页面导航中用省略号替代文本似乎是多余的，因为这是完全正常的事情。
收听“跳过第16页到第99页”会很烦人，因为它提供了人们可以自己推断的信息
提供输入字段以跳转到指定页面可能是更有用的补充。