CODEWITHSUNDEEP
htmlaccessibilitycss-tableswai-aria
TCR
TCR

Reputation: 65

How to Rename a Table Header Element With Aria

I have a table with a table header structure as follows. The last four column headers have the same name, as there is a photo appended above that adds contextual value. However, for screen reader accessibility, I want to have the screen reader say a different name for the last four table headers, which would help provide additional context to what the photos do. Currently, it just says "Title" but I would like to add context to make the screen reader say something like "Title This", "Title That", "Title whatever", etc.

I have tried adding title="", aria-labelledby="", aria-label="", to the 'th' elements and none have seemed to work. Also, I do not want to change the actual name that is displayed for each column header.

 <th class="text-right text-dark">Name Title</th>
 <th class="text-center text-dark" name="name 1">Title</th>
 <th class="text-center text-dark" name="name 2">Title</th>
 <th class="text-center text-dark" name="name 3">Title</th>
 <th class="text-center text-dark" name="name 4">Title</th>

Any thoughts or suggestions are apprecieated!

Upvotes: 1

Views: 916

Answers (2)

Josh
Josh

Reputation: 4322

You're not going to be able to use aria attributes to override the innerText of a table header element -- at least not reliably and consistently.

The reason for this is that the spec for the accessible name computation is poorly defined, so assistive technologies all do their own interpretation of how to handle aria-label, aria-labelledby and aria-describedby. You could make it work in JAWS, but not NVDA or Voiceover, so it will never be consistent.

Here's a testing page that outlines how each screen reader handles these aria attributes. In my limited testing using NVDA, I found the results to be accurate even though they are a couple of years old.

You might be better off doing something like this:

<!-- HTML -->
<th>
    <span aria-hiddden="true">Text invisible to screen readers</span>
    <span class="sr-only">Text just for screen readers</span>
</th>

<!-- CSS -->
<style>
.sr-only {
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    width: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
}
</style>

The problem with the above approach is that you would be offering different content to users of assistive technology as opposed to everyone else. While that's not necessarily bad, you should definitely have a very good reason for wanting to do that that goes beyond stylistic or design choices.

Upvotes: 1

The Software Squad
The Software Squad

Reputation: 224

I wanted to put this answer as a comment but I don't have enough reputation so my answer is here. you can achieve this goal with few lines of jquery

<table>
 <th class="text-right text-dark">Name Title</th>
 <th class="text-center text-dark" id="titleThis" name="name 1">Title</th>
 <th class="text-center text-dark" id="titlewhatever" name="name 2">Title</th>
 <th class="text-center text-dark" name="name 3">Title</th>
 <th class="text-center text-dark" name="name 4">Title</th>
</table>

<script>
$(document).ready(function() {
  $("#titleThis").html('Title this');
  $("#titlewhatever").html('Title Whatever');
});
</script>

result of above code will be Name Title Title this Title Whatever Title Title if it solves your problem then please mark this answer so that next time I can put my answers in comments.

Upvotes: 0

Related Questions