0

I have an HTML structure similar to this representing the row header cell of a table:

<th role="rowheader" tabindex="0">
  ...
  <div role="button" tabindex="0">
    <button role="presentation" tabindex="-1" />
  </div>
</th>

The purpose of the div/button is to enable dynamically adding a new row header, so it lies at the bottom separating the existing row headers.

In VoiceOver, only the localization text assigned to the div is announced when tabbing to the div. However, in JAWS, it reads the contents of the th as the rowheader for the div, even though the div is contained within it. I've searched documentation for some sort of property that will allow the div to ignore the row header, but have come up empty. I'd appreciate any assistance you can offer.

Thanks!

Matthew DeMougin
  • 167
  • 1
  • 9

1 Answers1

1

Did you try using scope="row" before adding role="rowheader" (since that is all that role does)? And what is the tabindex="0" for on the th (unless you have content that is otherwise hidden unless the user scrolls, thus using the tabindex to allow a keyboard user to see it)?

Why do you have a div acting as a button (role="button") but then remove the semantics (and tab-stop) from the real button (role="presentation" tabindex="-1")? Without seeing any text for the new or demoted button, let alone in the th it is hard to see what you expect to happen.

If you have a URL where this can be tested then I will adjust my answer, but right now you have a lot of weird role remapping and tab-stopping that I suspect is confusing the issue.

I couldn't fit all this in a comment, sadly, hence the answer that does not answer your question but attempts to get it to a point where I can answer it.

aardrian
  • 8,581
  • 30
  • 40