辅助功能和链接 - 屏幕阅读器将链接文本的每一行作为单独的链接读取

Question

我已将我正在开发的网站发送给检查其是否可访问的人，并且测试返回时拒绝了该网站中的某些链接。

有 7 个链接，每个链接都在自己的可悬停框中，每个框中都有文本、标题和大约 3-4 行的详细信息。 我对设计本身（视觉上）很满意，并希望坚持下去。

最初，代码如下所示：

<a href=# target="_blank" rel="noopener noreferrer">
    <strong> some headline </strong>
    <span> info1 <br/> info2 <br/> info3 </span>
</a>

屏幕阅读器是这样读的：“链接 - 一些标题”，然后是“链接 - info1”等等......即使它是一个链接！

在阅读了一些关于可访问性的内容后，我决定不使用<br>元素，因为它会导致屏幕阅读问题。

因此，我将其更改为：

<a href=# target="_blank" rel="noopener noreferrer">
    <p><strong>some headline</strong>
       info1
       info2
       info3
    </p>
</a>

使用 css 处理具有“空白：前线”属性的断线； 应用于<p>元素。

令人惊讶的是，屏幕阅读器仍然存在同样的问题。 这个怎么可能？ 只有一个<a>元素。

我还尝试在<a>和<p>之间切换位置，以获得类似的结果，但它也搞砸了设计。

追问：会不会是他们的阅读器不好用？ 我有这个怀疑

想了解一下这方面的知识，谢谢。

Answer 1

当我开始使我的网站可访问时，我下载了一些插件（以模拟阅读器）和一些阅读器。 结果是他们有不同的规则。

误区 4：所有屏幕阅读器都完全相同 并非所有屏幕阅读器都与每个操作系统、浏览器和应用程序兼容（或兼容），用户界面可能会有很大差异。 精通 Apple VoiceOver 的人在切换到 Android 的 TalkBack 时可能会遇到学习曲线。 用户会有他们的最爱，这是开发人员不应该在单一计算环境中测试他们的内容的另一个原因。

来自互联网无障碍局

Mozilla 指南谈到了如何取得平衡。

ARIA 屏幕阅读器实施者指南 Live Regions 这只是一个指南。 实时区域标记是一个复杂的领域，在某种程度上可以解释。 以下旨在提供尊重屏幕阅读器开发人员需要尝试不同事物的实施指南。 目的是在为如何使用标记的预期含义提供有用的指导和支持实时区域作为屏幕阅读器创新和竞争的区域之间取得平衡。

来自Aria 的 Mozilla 指南