Accessibilty problems: Elements are only visually disabled

zexxar

Hi,

we recently had an accessibilty test and there were 2 problem they mentioned with our datatables. Both issues had to do with elements being disabled only by styling:

1. When Pagination is active but there aren't enough entries that it becomes neccessary, the pagination buttons become disabled (https://datatables.net/examples/basic_init/zero_configuration.html set pag size to 100). But the problem is that this is only happening visually but that is not visible for the screenreader which causes problems for visually impared users.

2.The column visibility (https://datatables.net/extensions/buttons/examples/column_visibility/simple.html) also has the problem that when columns are deactivated the only thing that happens is that the 'active' css-class is being removed but beside that there is no hint if a column is active or not andthat also is a problem for screenreaders.

I would like to ask if there are solutions for this problem or if they will be addressed in the future.

Thanks and kind regards
Kevin

allan

1) Good point. Would aria-hidden=true do that for you?

2) I'm not sure what the solution to this one would be. Possibly an aria-label with new i18n options? It does update the DOM in the table which the screen reader will see - we used to have it as a live area so the screen reader would read out any changes, but that was a massive pain.

Allan

zexxar

1) That would be perfect!

2) The problem wasn't only that the screenreader won't notice the change but it was also that you couldn't even find out the state because there is because there is no attribute in the button that states if it's active or not.
Something I thought about would maybe be a solution like in the picture (with better alignment )

Because then even a screenreader sould be able to detect the status by checking the checkbox. But I don't know how good this soultion would be for the normal use.

Thanks and kind regards
Kevin

zexxar

Any opinion on my suggestion ?