JAWS没有使用aria-label读取带有标题的span内部的aria-label

Question

我有一个span作为标题内的按钮：

<h3 aria-label="Header Aria Label">
  <span tabindex="0" aria-label="Span Aria Label">Button</span>
</h3>

但是，每当我选择跨度时，它都会显示“Header Aria Label”。如何强制JAWS读取跨度中的aria-label？

Answer 1

首先，请不要被冒犯，但你所做的是糟糕的设计，至少是可访问性。
标题内的一个按钮（不是标题，BTW，在HTML 5中有一个单独的<header>元素，这与你在这里使用的<h3>完全不同）是一个坏主意。真的。
但无论如何，如果您希望JAWS将span视为按钮，请执行以下操作：

1. 使用原生<button>元素或
2. 在role="button"上使用span，否则JAWS无法以任何方式知道此特定span应被视为按钮。但是除非你绝对必须在这里使用span，否则请更喜欢第一种方法。请将其从h3中取出，这将更容易获得。

Answer 2

span既不是具有里程碑意义也不是互动内容。 <{1}}将不会被屏幕阅读器读取（这是正确的）。

相反，请使用aria-label元素。这将解决您的问题，并且更易于访问。

Answer 3

我遇到类似的问题。根据我的经验，它是一个跨度，一个div还是其他标签似乎都没有什么区别。即使应用了多个aria属性（例如role和aria-hidden =“ false”），也不总是读出aria标签。对我来说，JAWS读取aria标签的条件似乎是基于其他规则。看看JAWS读取aria标签的条件流程将很有帮助。我猜只有访问JAWS源代码的人才能真正回答这个问题。同时，我将继续尝试不同的方法来使其正常工作。 JAWS在DOM中找到元素，因为它可以读取内部html（例如，在上面的示例中读取单词“ Button”）。我想知道读取aria标签的决定是否基于其父结构，角色和属性。