Keyboard accessibility for responsive Datatables?

pstewart6

Hello, I am currently working on a project that needs to meet AA W3C standards using Vite / Vue3 & Datatables, when using screen readers it does tab, but not as expected.

Inside each of the <th> elements, it has the <span class="dt-column-order"> as source as that has a 'role="button" on that element but has no text value or aria-label for that element.

Is there any chance where the functionality can render the HTML via Vue3 / Vite ?

<thead>
    <th aria-label="Column 1 sort by" role="button" tabindex="0">.
        <span class="dt-column-title">Column 1</span>
        <span class="dt-column-sort"></span>
    </th>
    <th aria-label="Column 1 sort by" role="button" tabindex="0">.
        <span class="dt-column-title">Column 1</span>
        <span class="dt-column-sort"></span>
    </th>
</thead>

or update the "dt-column-sort" class to include a text description that is screen readable?

<thead>
    <th>
        <span class="dt-column-title">Column 1</span>
        <span class="dt-column-sort" aria-label="Column 1 sort by" role="button" tabindex="0"></span>
    </th>
    <th>.
        <span class="dt-column-title">Column 1</span>
        <span class="dt-column-sort" aria-label="Column 1 sort by" role="button" tabindex="0"></span>
    </th>
</thead>

I have used the example workings for Vue3 and Datatables using all available properties.

Also same applies to when the responsive view is activated for the <td> that controls the "dtr-details". An aria label would be nice as well to differentiate from the data which I have rendering two properties {{surname}} and {{firstName}}

Something like this?

        <td class="lh-1 sorting_1 dtr-control" tabindex="0" aria-label="Expand / Collapase : firstName surname">
            firstName surname
        </td>

Any help, advice or updates to DataTables would be awesome!

Thanks,
Paul

allan

Hi Paul,

I think you are using an old version of DataTables? DataTables 2.2 has the role="button" on the span element for the column sorting - you can see that here. That's where the aria-label is as well.

Allan