Is it possible to make datatables accessible to screen readers?

Is it possible to make datatables accessible to screen readers?

kprohaszkakprohaszka Posts: 32Questions: 5Answers: 0

I have reached out to screen reader users to test the datatable directory that I have been working on, and their feedback for use via screen readers was disappointing. Comments included:
* the alphabet bar is read as one word, and does not have an option to navigate in or out of it. When tabbing through the page, it is skipped altogether.
* the actual rows of information cannot be tabbed through or read (e.g. can navigate down and expand a child row if the row's details are collapsed, but there is no way to tab through the actual information to read it)
* unable to use arrow keys to get out of the generated dropdown filter for departments - can tab into the dropdown, but once something is selected via enter, if tab is pressed again it takes you out of the table and into the pagination.

This is incredibly important to have functioning for our users and also for abiding by ADA regulations, and I'd really like to be able to deploy this directory using datatables. Do you have any resources or additional information that can help remedy this?

You can see how it works with keyboard navigation here: https://live.datatables.net/qajomele/2/edit

This question has an accepted answers - jump to answer

Answers

  • kprohaszkakprohaszka Posts: 32Questions: 5Answers: 0

    Addition to indicate that screen reader software being used is NVDA and Read & Write.

  • allanallan Posts: 63,699Questions: 1Answers: 10,501 Site admin

    I think it is important to clarify that DataTables core is as accessible as I know how to make it. Accessibility experts have helped ensure that is the case by providing feedback and I am always open to additional feedback and pull requests, particularly from those who actually use accessibility software on a day to day basis.

    Your first question is about the alphabet search plug-in. That is not a core part of DataTables, but a plugin. Indeed, I haven't specifically done any accessibility work on that and would welcome the opportunity to do so, or a pull request to add that.

    Second: It sounds like you are using the Responsive extension here? Or are you displaying custom child rows? The child row control can be tabbed through if configured for that.

    Third: You have custom code implementing the dropdown filters. It doesn't actually work in the example you linked to, so I'm not certain what the correct fix there is. In this example a tab in a select will move you along to the next select box.

    Allan

  • kprohaszkakprohaszka Posts: 32Questions: 5Answers: 0

    Thank you Allan for addressing my points. I am still pretty new to development and API use, so I apologize if I confused the datatables core with any additional features outside of it.

    I would like to be able to use the alphabet bar if it can be made accessibly; how would I submit a pull request?

    I am using the responsive extension that you and Kevin helped me to get working on my last discussion post. So I think that is working as expected, as I can indeed use tabbing/"enter" to expand or collapse a row, but the content will not be read, which I think may be related to something with the datatable core?

    For the department dropdown, it does work on my end at least, where it's populating the department names and I can select and filter out by a specific one. I will have to dig into that some other way though, I think it was code that I had borrowed from a datatables discussion previously in order to get it working.

    If I need to provide any more information, let me know.

  • kprohaszkakprohaszka Posts: 32Questions: 5Answers: 0

    I did notice on the example on the home page here that it seems to have the same tabbing problem that I am having, where I can tab around the dropdowns, search box, and headings, but I cannot actually tab through the row data itself.

  • kthorngrenkthorngren Posts: 21,483Questions: 26Answers: 4,978
    Answer ✓

    I did notice on the example on the home page here that it seems to have the same tabbing problem

    I don't know anything about screen readers but I suspect you will need to use responsive.details.renderer to render the child rows in a way they can be tabbed through. See this example to get an idea.

    I would like to be able to use the alphabet bar if it can be made accessibly; how would I submit a pull request?

    I think the intension is for you to develop the code to support the screen readers. The Alphabet search plugin can be found at this GitHub page. From there you can get the code make the necessary changes and use the pull request to let Allan review the changes before applying them to the plugin.

    Kevin

  • allanallan Posts: 63,699Questions: 1Answers: 10,501 Site admin

    The example on the home page doesn't use the technique for displaying the child row control in the example I linked to. I'll look at updating that. The reason it isn't the default for Responsive is that it requires extra configuration and HTML (i.e. the extra column that can be tabbed through).

    Allan

  • kprohaszkakprohaszka Posts: 32Questions: 5Answers: 0

    Thank you both for the information. If I have any additional questions, I will follow up.

Sign In or Register to comment.