如何覆盖可访问性中继承自父元素的子元素中的角色链接

Question

有一个工具提示，其中工具提示内容div是动态添加的，角色链接是根据需要添加到aria标签的。工具提示展开前的初始html为

<div class="tooltip" tabindex="0" aria-expanded="false" role="link" aria-label="click here">
<span>
<i class="icon-tooltip"></i>
</span>
</div>

用户点击工具提示图标后，下面将是html

<div class="tooltip" tabindex="0" aria-expanded="true" role="link" aria-label="click here">
<span>
<i class="icon-tooltip"></i>
</span>
<div class="tooltip content">   
<p class="title">This is title</p>
<div class="description">
<p>this is line 1</p>
<p>this is line 2</p>
</div>
</div>
</div>

在语音查看器中验证时，工具提示内容被读取为扩展链接标题，扩展链接这是line1，扩展链接这是line2而不是预期的这是标题，这是line1，这是line2．我试图为工具提示内容添加role=none/presentation，以删除扩展的链接以防止父角色到子元素，但仍然没有解决这个问题。是否有一种方法可以防止父角色和aria扩展继承到子元素?

Answer 1

这里有很多问题。由于代码目前正在编写(这与OP不同，它是在2021年2月编辑的)，aria-label将覆盖嵌套子元素中的所有文本，因此您将永远不会这是title"或者"展开，这是第一行"

由于代码最初编写时没有aria-label，无论您是否听到"expanded"每一行文本取决于你如何使用屏幕阅读器导航。通过一个简单的标签链接，你会听到所有的文本在一起:"这是标题这是第一行这是第二行展开链接">。

但是如果您在屏幕阅读器中使用向下箭头，您将导航到每个DOM元素。这将是每个单独的<p>元素，你会听到每段文本的展开状态，因为每段文本都是链接的一部分，链接被标记为展开。

• 扩展链接这是标题
• 展开链接这是第一行
• 展开链接这是第2行

这是正确行为。如果你有一个像这样的链接，你也会听到类似的提示:

<a href="#" aria-expanded="true">
line 1
<span>line 2</span>
<div>line 3</div>
<div>line 4</div>
line 5
</a>

如果您向下箭头导航到每个DOM元素，您将听到:

• 展开链接第一行第二行
• 展开链接第3行
• 展开链接第4行
• 展开链接第5行

(注意,"line1"one_answers";line2"因为<span>不是阻塞元素，所以将它们读在一起。)