如何从屏幕阅读器中隐藏“显示更多”按钮？答案

【问题标题】：How do I hide a 'show more' button from a screen reader?如何从屏幕阅读器中隐藏“显示更多”按钮？
【发布时间】：2021-11-25 14:57:33
【问题描述】：

我的网页上有一个横幅，其中包含一些截断的文本和一个“显示更多”按钮，有视力的用户可以单击该按钮以获取全文。我想在页面上包含全文（但在视觉上是隐藏的），并为屏幕阅读器隐藏“显示更多”按钮，这样他们就不必为本质上是一种可视化、节省空间的布局进行额外的点击。

乍一看aria-hidden="true" 似乎是正确的方法，但这不适用于可聚焦的元素。我可以使用tabindex="-1" 将其从选项卡索引中删除，但我希望按钮对于有视力的用户来说是可聚焦的。

我怎样才能做到这一点？

【问题讨论】：

不要。开发人员应努力为依赖屏幕阅读器的用户提供平等（不仅仅是公平）的体验。如果视力正常的用户有“显示更多”按钮，那么使用辅助技术的用户也应该有。否则，我们就会陷入构建单独体验的陷阱。

标签： html wai-aria semantic-markup

【解决方案1】：

我认为这里有一个小小的假设，即屏幕阅读器用户不需要像有视力的用户那样在页面上展开全文。虽然您可以通过多种方式将隐藏文本传达给屏幕阅读器（例如使用 aria-describedby），但这将不允许屏幕阅读器用户使用虚拟光标浏览全文。

例如，当我使用屏幕阅读器阅读正文时，我可能想跳过几个单词或段落，或者我可能想跳到一个我不认识的单词以按字符阅读特点。除非屏幕阅读器可以看到文本并且虚拟光标可以导航到它，否则我无法执行此操作。

对此我的解决方案是使用aria-describedby 或隐藏文本向屏幕阅读器用户传达“显示更多”按钮，然后保持“显示更多”可访问（即不要使用@987654323 @ 在按钮上，不要使用 aria-hidden)。也许您可以确保当用户按下“显示更多”按钮时焦点移动到全文正文。

【讨论】：

谢谢，很高兴收到用户的来信。当文本不存在时，向前扫描很困难，这是一个很好的观点。
没问题。只是为了澄清（因为我不想给您留下错误的印象）当我说我使用屏幕阅读器时，这是因为我每天都使用 JAWS 和 NVDA 作为可访问性测试人员和 JAWS 脚本编写人员。我经常与视障用户互动，因此我对他们的需求有所了解。但我自己并没有视力障碍，所以我不会认为自己是一个典型的屏幕阅读器用户，只是一个使用屏幕阅读器作为工作一部分的无障碍测试员/工程师。

【解决方案2】：

简单的答案是你不能做你想做的事，但考虑一下是个好主意。因为您无法查询屏幕阅读器是否正在运行，所以您无法真正调整页面。如果您想让有视力的用户点击按钮以查看更多文本，它必须是键盘可聚焦的 (WCAG 2.1.1) 并且必须宣布按钮的名称 (WCAG 4.1.2)。没有办法向屏幕阅读器用户隐藏按钮，这也不会影响有视力的用户。

您说得对，aria-hidden 和 tabindex="-1" 都会给某些用户带来问题。

两种选择只是为了让“显示更多”界面对所有用户都一样工作，并且不必担心屏幕阅读器用户会看到全文，除非他们选择“显示更多”。是的，屏幕阅读器用户不受屏幕空间的限制，并且可以为他们提供全文而不需要按钮，但可以为所有用户提供相同的 UX。但同样，很高兴您考虑到屏幕阅读器用户的体验。

另一种选择是为屏幕阅读器用户提供全文，并在“显示更多”按钮上显示隐藏标签，说明该按钮主要供有视力的用户显示全文，以便屏幕阅读器用户可以忽略它.粗略地说，它可能看起来像这样：

<p aria=hidden="true">Lorem ipsum dolor...<p>
<p class="sr-only">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<button aria-describedby="foo">
  show more
</button>
<span class="sr-only" id="foo">expands the full text for sighted users but the full text is already there for screen readers</span>

【讨论】：

我选择了第一个选项，因为我认为在用户使用按钮展开后让文本可能重复会更令人讨厌。我们对 a11y 树没有这样的控制权有点烦人，但我想这是有具体原因的。
当“可访问性对象模型”（AOM，类似于 DOM）变为已发布时，您将控制 a11y 树。但是现在，你是对的，我们不能直接控制 a11y 树。