Accessibility: Silence sorting content symbol for screen readers

hchang

I'm using DataTables 1.13.1 in a project and encountering this while using a screen reader. When sorting is on for a table, there is this from the datables css

table.dataTable thead > tr > th.sorting:before, table.dataTable thead > tr > th.sorting_asc:before, table.dataTable thead > tr > th.sorting_desc:before, table.dataTable thead > tr > th.sorting_asc_disabled:before, table.dataTable thead > tr > th.sorting_desc_disabled:before,
table.dataTable thead > tr > td.sorting:before,
table.dataTable thead > tr > td.sorting_asc:before,
table.dataTable thead > tr > td.sorting_desc:before,
table.dataTable thead > tr > td.sorting_asc_disabled:before,
table.dataTable thead > tr > td.sorting_desc_disabled:before {
  bottom: 50%;
  content: "▲";
}
table.dataTable thead > tr > th.sorting:after, table.dataTable thead > tr > th.sorting_asc:after, table.dataTable thead > tr > th.sorting_desc:after, table.dataTable thead > tr > th.sorting_asc_disabled:after, table.dataTable thead > tr > th.sorting_desc_disabled:after,
table.dataTable thead > tr > td.sorting:after,
table.dataTable thead > tr > td.sorting_asc:after,
table.dataTable thead > tr > td.sorting_desc:after,
table.dataTable thead > tr > td.sorting_asc_disabled:after,
table.dataTable thead > tr > td.sorting_desc_disabled:after {
  top: 50%;
  content: "▼";
}

For screen readers, moving through each column of a table reads like this.
filled up pointing triangle (header text) filled down pointing triangle (column value)

I'd like to silence the reading of the symbols. As a quick test, I modified the datatables css with the / alt text so that it becomes:
content: "▲" / "";

This worked exactly as i needed, however implementing this in my own css to override the default has been a struggle. I'd like to propose setting the alt text as part of the default css. I don't believe it's necessary to have those symbols read by screen readers, and it would improve accessibility without developers having to find their own work-arounds.

allan

100% agree! Thanks for posting this. I'll get it commiited in tomorrow and post back here when done.

Allan

allan

Fix committed here. It will be in the nightly build shortly.

What browser, OS and screen reader are you using btw? MDN notes that neither Firefox nor Safari support this alternative text syntax. It also says:

CSS-generated content is not included in the DOM. Because of this, it will not be represented in the accessibility tree and certain assistive technology/browser combinations will not announce it.

Screen reader support is frustratingly a case of finding the right combination of hacks! Do you use a screen reader on a day to day basis yourself? I'd love to get any more insight you have if so.

Allan

hchang

Thanks for the quick response and fix! I haven't had a chance to try it out but will report back when I do.

Interesting that it's not supposed to work with Firefox. The quick test I mentioned, I used Firefox with NVDA. I'm blind and use NVDA on a daily basis. Happy to answer any questions. I agree very much about the frustration of finding the right combination of hacks!

allan

I'm sorry to hear of your blindness, but if you are willing to provide feedback on DataTables' accessibility, I would greatly appreciate it, as I'm sure would others who would benefit from any changes we can make. Having the input from someone who uses screen assistive technology on a daily basis would be exceedingly helpful.

Allan

hchang

I'd be happy to give feedback. Should I make posts here whenever I find something, or did you have something else in mind?

I've recently been getting back involved with projects that use DataTables so should have opportunities to find issues if any. From past experience, it's pretty good out of the box.

Helen

allan

Posts here would be absolutely ideal! Thank you.

Allan

hchang

Sorry for the slow response. I tested with the file from the nightly build. It seems having both the one with and without the alt text works fine in Chrome but not in Firefox. Let me know if you want any other info.

allan

Many thanks for checking it.

That I guess is because Firefox doesn't appear to support the alt text syntax for content.

I found this article which mentions that content will indeed we read by screenreaders.

I've also found this Firefox bug for implement alt content support, but it is 7 years old and no sign of recent movement.

I don't know of any other way to prevent the screen reader from reading the CSS content. I wonder if @media speech as a media query would have any effect... I'll get a Windows machine set up and try it out.

Allan

allan

Digging into that a bit more, it appears that NVDA doesn't support @media speech at all, and the speak CSS attribute is supported by Chrome, but not Firefox.

I think this might be a case where we need the browser to add support for the alt content syntax.

Allan

hchang

Thanks for looking into it. I'd say having it work for at least some browsers is better than nothing.

Raidek

Hello @hchang, I would like to know how you have solved the problem of moving with the "tabulate" key inside the filters and cells of the tables. Since I had to scrap an entire project with this great tool because of it and very strict accessibility rules from the client.

I leave a post where I discussed these problems with @allan
https://datatables.net/forums/discussion/74722/avoid-simulating-lists-with-tables#latest

Thank you so much