DataTables and ARIA

DataTables and ARIA

JakoothJakooth Posts: 2Questions: 0Answers: 0

Hi,

I was looking for way to disable ARIA for DataTables recently and found this topic, but it is now closed and I would like to give you a little feedback on my side:
http://datatables.net/forums/discussion/16035/how-to-totally-disable-aria

I'm a usability engineer and I'm strongly focused on designing accessible applications, my primary tool for testing ARIA is the JAWS screen reader (but also NVDA) and I found couple of important issues with it.

The first one is a major one, but very easy to fix - simply add aria-label or aria-labelledby attribute to the Table with grid role. The reason is JAWS has a special functionality to list all input element and ARIA widgets (INSERT + F5) and according our tests with visually impaired people they are using this feature.
When the table does not have aria-label JAWS will automatically take the text from all inputs elements and ARIA widgets, inside the grid and combine it into one huge label.

For example the label for the demo table on your site will be:
NamePositionOfficeAgeStart dateSlaryNamePositionOfficeAgeStart dateSlaryAirSatouAccountant Tokyo332008/11/28... and goes forever

If you simply add aria-label="DataTables example" JAWS will instead read:
DataTables example table

I personally am doing even more and to be absolutely compliant with Section 508/WCAG I place hidden caption inside the table and use it like a label:

DataTable example

Note I'm also adding a heading to facilitate the navigation, but this is optional.

The second problem and the reason I want to disable ARIA entirely is that we are using customization with check boxes selection inside the table. When check boxes or any other input is inside ARIA widget JAWS/NVDA will ignore it.
This behavior brings value, if you are using custom keyboard navigation and is better combined with role="listbox" (see Google Drive for exmaple).
But for DataTables you have a perfect and semantically correct HTML using native TABLE element. Even without ARIA screen readers will read the content very well, but the difference is the grid role will prevent all check boxes inside to be seen. The only way to navigate between them will be the TAB key.
For this reason ARIA is not bringing me value and I would like to have the option to disable it.

The second is just my use case for DataTables, but for the first one I will highly recommend you do the small fix and add the option to specify label/caption for the table.

Cheers,
Ivan

Replies

  • allanallan Posts: 61,723Questions: 1Answers: 10,108 Site admin
    edited October 2014

    Hi Ivan,

    Thanks for your input.

    .1. aria-label / aria-labelledby - my first thought is to use the caption text to apply that to the attribute, but that is redundant and potentially confusing if the screenreader reads both the aria-label and the caption.

    As such, you would need to add that aria-label attribute yourself, since DataTables doesn't know what label to give it. Unless you have a better suggestion?

    .2. Disabling ARIA - there is no option for that in DataTables. You would need to modify the software, or remove the attributes once they have been added.

    Allan

This discussion has been closed.