column vis Buttons Accessibility seems broken
column vis Buttons Accessibility seems broken
digitalchallenger
Posts: 9Questions: 1Answers: 0
Hello
column visibility extension seems broken in terms of accessibility. I am using it on a table where I am pulling data from sheets & there is a link that appears called “column visibility” & being a blind user who use screen reader when I press enter on the link it does not function any action.
I was able to open the options by using mouse pointer & the options come in the footer of the page for the screen reader. The visual & DOM order do not match, in the example provided on the datatables.net the column visibility is a button & expand/collapse buttons properly, they are also in right tab order. This is not the case for my implementation, the developer said he followed your documentation.
Are we doing something wrong?
In terms of accessibility, the visibility options need to be checkboxes & not buttons or links. I choose which columns show & do not show, on datatables.net they are buttons so giving aria-pressed for each button when activated will also fix this. But ideally from user experience point these are checkbox elements.
This is the code I see on my page,
<a class="dt-button buttons-column Visibility active" tabindex="0" aria-controls="main-table" here="#" data-cv-idx="0"><span>issueid</span></a>
Happy to provide more information & get this accessible. I am an accessibility specialist, so any help I can provide here please let me know.
Answers
Awesome - delighted to have you here! I'd very much like to pick your brains on a few things in that case! We've tried to do accessibility stuff before, but we haven't had many actual accessibility users (be it screen readers, brail, or whatever) giving is feedback, so this is invaluable. Thank you. For example any thoughts you have on this thread would be welcome.
Regarding the issue you are seeing, we have done some work recently to improve accessibility for Buttons, with the input of @silkspin from this thread.
I've just put this little example together using our dev builds - does that work better for you?
Regards,
Allan
Hello,
Thank you for your quick response, I will be here & will help with accessibility.
For this example, here are the comments
http://datatables.net/dev/colvis
remove the aria-haspopup, let us not treat this as a menu, this will complicate things for screen reader & other assistive tech users.
this is more of a expand/collapse control [accordion[ so let us treat it like that.
Once the button expand content there are multiple button that enable/disable the visibility of columns.
Change these buttons to checkboxes, this way assistive tech users get the state change. Currently when I press button I am not sure if the column is hidden or enabled.
Checkboxes give feedback like checked/unchecked, so we know that action performed.
If buttons cannot be changed then use aria-pressed state on button. When I activate button the button will be announced as pressed.
Here are some examples of accordion & aria-pressed
Aria-pressed
https://www.w3.org/TR/wai-aria-practices-1.1/examples/button/button.html
expand/collapse
https://a11y.nicolas-hoffmann.net/hide-show/
Hello Allan,
there is another bug, when there are columns that exceed screen side they are hidden from DOM for screen reader users, we need to press some + button according to my sight assist to expand all columns.
This button is not keyboard operable, I cannot tab to the element as a result I cannot activate it. Currently this is a blocker, is there a way to fix this quickly?
I have 14columns & currently I see 10 columns with my screenreader. this is the button I guess, this is coming through a class I guess
<td class="dtr-control"></td>
one of the fix i see is to provide a button or checkbox above the table to show all columns.