3
votes

I have a span which serves as a button which is inside a header:

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

However, whenever I tab to the span, it reads "Header Aria Label". How do I force JAWS to read the aria-label in the span?

3

3 Answers

4
votes

First of all, please don't be offended but what you are doing is poor design, at least, accessibility-wise.
A button inside a heading (not a header, BTW, in HTML 5 there is a separate <header> element which is a quite different thing from <h3> you use here) is a bad idea. Really.
But anyway, if you want JAWS to treat your span as a button, either:

  1. Use a native <button> element, or
  2. Use role="button" on your span, otherwise JAWS wouldn't know in any way that this particular span should be treated as a button. But please prefer the first method unless you absolutely have to use a span here. And please, pull it out of your h3, this will be far more accessible.
2
votes

A span is neither landmark nor interactive content. An aria-label will not be read by a screen reader (and rightly so).

Instead, use a <button> element. That will address your problem, and be more accessible.

0
votes

I encounter similar issues to this. From my experience it doesn't seem to make any difference whether it's a span, a div or other tag. Even when multiple aria attributes are applied such as role and aria-hidden="false", the aria-label is not always read out. To me, the condition for aria-labels to be read by JAWS seems to be based on some other rule(s). It would be helpful to see the conditional flow of when an aria-label is read by JAWS. I'm guessing only someone with access the the JAWS source code would really be able to answer this. In the meantime I'll keep trying different things to try to get it to work. JAWS finds the element in the DOM, because it can read the inner html (such as reading the word "Button" in the example above). I'm wondering if the decision to read the aria-label is based on it's parent structure, roles and attributes.