Accessibility 有没有办法防止屏幕阅读器在';显示更多';情况如何?

Accessibility 有没有办法防止屏幕阅读器在';显示更多';情况如何?,accessibility,page-jump,Accessibility,Page Jump,背景:我们以一种非常特定的方式从各种连接器接收信息,然后通过我们的接口,通过特定的品牌,将信息吐出。正因为如此,我们无法控制我们获得的信息 理想情况下,我们会有一个简短的摘要和一个冗长的摘要,但是我们必须从冗长的摘要中提取出来来创建简短的摘要 我们有两个选择——一个是做一个“…查看更多”的简短摘要和“从上面看不到…”的长摘要。但我们决定的选择是,当文本跳转到完整摘要时,只需重复约500个字符(移动设备为约200个字符)。这意味着用户必须重新阅读他们刚刚阅读的内容;在屏幕阅读器的情况下,它会大声重

背景:我们以一种非常特定的方式从各种连接器接收信息,然后通过我们的接口,通过特定的品牌,将信息吐出。正因为如此,我们无法控制我们获得的信息

理想情况下,我们会有一个简短的摘要和一个冗长的摘要,但是我们必须从冗长的摘要中提取出来来创建简短的摘要

我们有两个选择——一个是做一个“…查看更多”的简短摘要和“从上面看不到…”的长摘要。但我们决定的选择是,当文本跳转到完整摘要时,只需重复约500个字符(移动设备为约200个字符)。这意味着用户必须重新阅读他们刚刚阅读的内容;在屏幕阅读器的情况下,它会大声重读整段内容,而盲人无法“扫描他们离开的地方”


我想我的问题是,这有多难接近?对有视力的用户和有视力障碍的用户?我们这里没有太多的选项。

为什么不使用aria hidden?请看这里:

您可以使用aria hidden来包装您不希望非视力用户听到的内容。因此,每当用户跳到该部分时,屏幕阅读器就会跳过该部分


这样,视力正常的用户只需跳到他们尚未阅读的部分,而使用屏幕阅读器的非视力用户将跳到您确定为隐藏的部分后的第一段

从纯粹的可访问性角度(WCAG)来看,您还可以。您的文本是可访问的。你的问题实际上更多的是关于“用户体验”,当与可访问性相结合时,这是一个非常好的问题。这意味着你不仅仅是在可访问性列表上“勾选一个框”,而且希望让每个人都能享受到这种体验

对于“查看更多”链接,要记住一件事,确保链接上有一个
aria descripbeby
属性,这样,如果屏幕阅读器用户只是在所有链接中点击标签,或者打开显示所有链接的对话框,他们就不会只听到“查看更多”而不知道其上下文。如果需要,我可以提供更多关于如何实现这一点的提示

我还想拼出“continued”而不是“con't”,但在描述你的问题时,你可能会缩短它,因为完整的单词出现在你的屏幕截图上

另一种可能是有两个链接到继续描述。一个是你现在在截图上看到的。我猜“查看更多”链接会将您的注意力转移到“继续摘要”部分(语法上不太正确-摘要不是“继续”,因为您再次重复第一部分-它实际上是“完整”摘要)

可以有第二个视觉隐藏链接(屏幕读取器用户)将焦点移动到完整摘要,并将焦点集中在前面简短摘要结束的段落的中间。这样做的缺点是会有一些键盘用户可能会注意到的视觉隐藏的制表位。也就是说,他们将通过tab键“查看更多”,在链接周围看到一个轮廓或一些可见的焦点指示器,然后再次tab键,焦点似乎会从屏幕上消失(因为它位于隐藏链接上),然后再次tab键,焦点会出现在下一个可聚焦对象上(第一次行动调用下的“信息”链接)

如果你尝试这个“隐藏”链接,你可能想做一些快速的可用性测试,看看它是否有意义

可见链接可以是“阅读完整摘要”,隐藏链接可以是“继续阅读完整摘要”。这是一个微妙的差异,你可能不得不与内容或设计专家调整。或者,让两个链接都可见可能对每个人都有好处


或者,您的“查看更多”可以扩展当前摘要,而不是将您带到页面上的其他位置。这正是我对“查看更多”链接的期望。

您可以做的最简单的事情是使“查看更多”链接指向文本的其余部分(而不是文本的开头)

摘要的开始
开始总结
这是课文的其余部分
这样,屏幕阅读器用户在单击“查看完整摘要”时不会阅读两次相同的文本

阅读整页时仍会出现重复,但这是无法避免的。例如,使用软件放大镜和屏幕阅读器的低视力用户必须能够使其屏幕阅读器读取屏幕上显示的内容。不管它是否已经被阅读过。这是完全不可避免的

出于同样的原因,永远不要使用隐藏的可访问性链接,这对使用屏幕放大镜的用户没有好处


但是你可以做一些改进:如果你可以写一个新的段落,并且正如@slagolicious所建议的那样,更清楚地指出不同部分的标题,比如“摘要”和“完整摘要”而不是“摘要”和“继续摘要”.

为什么不在长描述中链接到一个锚定,从短描述结束的地方开始?有很多人使用屏幕阅读器,但他们并非完全失明。添加
aria hidden
对他们来说不是一个解决方案,因为他们无法阅读屏幕上可以看到的文本。谢谢!这太棒了
<div class="summary">Beginnning of summary <a href="#rest">view full summary</a></div>

<!-- other things -->

<div class="summary_rest">Beginnning of summary 
    <a id="rest" tabindex="-1"></a> This is the rest of the text</div>