我在我的网页上有一个横幅，上面有一些截断的文本和一个"显示更多"按钮，视力正常的用户可以点击查看全文。我想在页面上包含全文(但在视觉上隐藏)，并为屏幕阅读器隐藏显示更多按钮，这样他们就不必为本质上是视觉上的，节省空间的布局做额外的点击。
乍一看，aria-hidden="true"似乎是正确的方法，但这并不适用于可聚焦的元素。我可以使用tabindex="-1"将其从选项卡索引中删除，但我希望按钮对视力正常的用户可聚焦。
我怎样才能做到这一点?
我认为这里有一个小小的假设，即屏幕阅读器用户不需要像视力正常的用户那样在页面上展开全文。虽然有一些方法可以将隐藏文本传递给屏幕阅读器(例如使用aria-describedby)，但这将不允许屏幕阅读器用户使用虚拟光标导航全文。
例如，当我使用屏幕阅读器阅读文本主体时，我可能想跳过几个单词或段落，或者我可能想跳到一个我不认识的单词，一个字符一个字符地阅读。我不能这样做，除非文本对屏幕阅读器是可见的，并且虚拟光标可以导航到它。
我的解决方案是使用aria-describedby或隐藏文本向屏幕阅读器用户传达有一个"显示更多";按钮，然后保持"显示更多"可访问(即不要在按钮上使用tabindex="-1"，也不要使用aria-hidden)。也许你可以确保当用户按下"显示更多"按钮时，焦点会移动到全文正文上。按钮。
简单的回答是，你不能做你想做的，但这是一个很好的想法。由于无法查询屏幕阅读器是否正在运行，因此无法真正调整页面。如果你想让视力正常的用户点击一个按钮来查看更多的文本，它必须是键盘可聚焦的(WCAG 2.1.1)，并且必须宣布按钮的名称(WCAG 4.1.2)。没有一种方法可以对屏幕阅读器用户隐藏按钮，而不会影响视力正常的用户。
你是正确的，aria-hidden和tabindex="-1"都会给一些用户带来问题。
有两种方法可以让"show more"显示更多内容。界面对所有用户都是一样的，不用担心屏幕阅读器用户的全文，除非他们选择"显示更多"。是的，屏幕阅读器用户不受屏幕实际面积的限制，全文可以为他们提供，而不是需要按钮，但为所有用户提供相同的用户体验是可以的。不过，你考虑的是屏幕阅读器用户的体验，这很好。
另一种选择是为屏幕阅读器用户提供全文，并在"显示更多"上显示隐藏标签。按钮，表示该按钮主要是为视力正常的用户显示全文，以便屏幕阅读器用户可以忽略它。大致上，它看起来像这样:
<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>