JAWS 不读取带有 aria-label 的标头内跨度的 aria-label答案

【问题标题】：JAWS does not read aria-label for span inside header with aria-labelJAWS 不读取带有 aria-label 的标头内跨度的 aria-label
【发布时间】：2020-06-18 11:50:49
【问题描述】：

我有一个跨度，用作标题内的按钮：

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

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

【问题讨论】：

标签： html accessibility wai-aria jaws-screen-reader

【解决方案1】：

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

使用原生 <button> 元素，或
在您的span 上使用role="button"，否则JAWS 不会以任何方式知道这个特定的span 应该被视为一个按钮。但请首选第一种方法，除非您绝对必须在这里使用span。请把它从您的h3 中取出，这样会更容易访问。

【讨论】：

【解决方案2】：

span 既不是地标也不是交互式内容。 aria-label 不会被屏幕阅读器读取（这是正确的）。

改为使用<button> 元素。这将解决您的问题，并且更易于访问。

【讨论】：

我正在使用带有 aria-label 的按钮，但未读取 aria-label 中的文本。有什么想法可以让它发挥作用吗？
@zero_cool 没有足够的上下文（也没有代码）来回答。建议您将其作为新问题发布，以便其他人也可以查看。

【解决方案3】：

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

【讨论】：