Screen readers announce header buttons as header titles

bsingleton

No test case, but this is demonstrable on https://datatables.net/examples/basic_init/zero_configuration.html. If you are navigating the table with a keyboard and screen reader, the button aria-label 'Activate to sort ascending' is read after the column title for each cell of the table. This results in a very long and confusing string of text, like when the first name is focused, the screen reader announces 'Row 2 Name Name: Activate to sort column ascending column 1 Airi Satou'. In order to make this clear, it should instead read 'Row 2 Name column 1 Airi Satou'

I have explored options around customizing the header (placing this non column title text in a hidden span outside the <th> and referencing with aria-describedby has worked for me in the past), but have not found any options that can do that

I am guessing this is a bug that is best handled by DataTables, but am open to suggestions for workarounds.

allan

Hi,

I've never been sure how to handle this properly. I agree, I don't really like it as it is, but I've never found a better way while still allowing the fact that the there is an action on the cell to be know.

placing this non column title text in a hidden span outside the <th>

I don't quite understand - do you mean the span should be a child of the tr? That wouldn't be valid HTML.

Do you use a screenreader for day-to-day use? I've had feedback from accessibility experts in the past, but having feedback from people actually using the technology is worth its weight in gold and I'd appreciate your thoughts on how you've seen it work in the past.

Allan

bsingleton

Thanks for getting back to me, I completely sympathize as I am a bit new to the accessibility scene. I am coming from the same place as a developer who wants to make the accessible experience as seamless as possible, but does not use these tools on the daily.

To clarify my suggestion, I am talking about placing the span outside the table altogether, so as to not break HTML syntax. I stumbled onto this approach working on a column that is not sortable (so I had easy control over the header) that contained checkboxes for selecting table rows.

I needed the header checkbox to read 'Select All checkbox', and each row's checkbox to just be 'Select column checkbox'. The (reduced) html that worked for me was

<span id="select_all_label" class="sr-only">Select All</span>
<div class="dataTables_wrapper">
  ...
  <table>
    <thead>
      <tr>
        <th class="sorting_diabled" aria-label="Select">
          <span class="sr-only"> Select </span>
          <input type="checkbox" id="select_all" aria-labelledby="select_all_label">
        </th>
        ...
      </tr>
    </thead>
    ...
  </table>
</div>

Note that the aria-label="Select" comes from DataTables, and does not seem to impact this behavior (removing the span.sr-only from the <th> resulted in the cells being announced as just 'Column 1 checkbox' instead of 'Select column 1 checkbox'.

Not sure if this is best practice, it could be a quirk with NVDA that is not repeatable with alternatives. I also recognize that this could have been a special case since there was no visible text in the header. But in this case it produced the desired behavior, so that when the header is focused it reads 'Select all checkbox not checked', and when the row's checkboxes are focused they read 'Select column 1 checkbox not checked'.