Sort span missing aria-labelledby attribute

jeranU

Link to test case:
1. Use any implementation (using zero config example provided from DataTables Examples: https://datatables.net/examples/basic_init/zero_configuration.html
2. run the Axe DevTools analyzer on the table (Chrome Browser extension: https://chromewebstore.google.com/detail/axe-devtools-web-accessib/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US)

Debugger code (debug.datatables.net):
Error messages shown:
ARIA commands must have an accessible name

Description of problem:
It appears there is a missing ARIA attribute on the sort span. Recommended fix to remove this minor issue is as follows:

add aria-labelledby attribute to corresponding TH

ex:
before:

<tr>
    <th data-dt-column="0" rowspan="1" colspan="1" class="dt-orderable-asc dt-orderable-desc"
        aria-label="Name: Activate to sort"><span class="dt-column-title">Name</span><span class="dt-column-order"
            role="button" tabindex="0"></span></th>
    <th data-dt-column="1" rowspan="1" colspan="1" class="dt-orderable-asc dt-orderable-desc"
        aria-label="Position: Activate to sort"><span class="dt-column-title">Position</span><span
            class="dt-column-order" role="button" tabindex="0"></span></th>
    <th data-dt-column="2" rowspan="1" colspan="1" class="dt-orderable-asc dt-orderable-desc"
        aria-label="Office: Activate to sort"><span class="dt-column-title">Office</span><span class="dt-column-order"
            role="button" tabindex="0"></span></th>
    <th data-dt-column="3" rowspan="1" colspan="1" class="dt-type-numeric dt-orderable-asc dt-orderable-desc"
        aria-label="Age: Activate to sort"><span class="dt-column-title">Age</span><span class="dt-column-order"
            role="button" tabindex="0"></span></th>
    <th data-dt-column="4" rowspan="1" colspan="1" class="dt-type-date dt-orderable-asc dt-orderable-desc"
        aria-label="Start date: Activate to sort"><span class="dt-column-title">Start date</span><span
            class="dt-column-order" role="button" tabindex="0"></span></th>
    <th data-dt-column="5" rowspan="1" colspan="1" class="dt-type-numeric dt-orderable-asc dt-orderable-desc"
        aria-label="Salary: Activate to sort"><span class="dt-column-title">Salary</span><span class="dt-column-order"
            role="button" tabindex="0"></span></th>
</tr>

after:

<tr>
    <th data-dt-column="0" rowspan="1" colspan="1" class="dt-orderable-asc dt-orderable-desc" id="name" 
        aria-label="Name: Activate to sort"><span class="dt-column-title">Name</span><span class="dt-column-order"
            role="button" tabindex="0" aria-labelledby="name"></span></th>
    <th data-dt-column="1" rowspan="1" colspan="1" class="dt-orderable-asc dt-orderable-desc" id="position" 
        aria-label="Position: Activate to sort"><span class="dt-column-title">Position</span><span
            class="dt-column-order" role="button" tabindex="0" aria-labelledby="position"></span></th>
    <th data-dt-column="2" rowspan="1" colspan="1" class="dt-orderable-asc dt-orderable-desc" id="office" 
        aria-label="Office: Activate to sort"><span class="dt-column-title">Office</span><span class="dt-column-order"
            role="button" tabindex="0" aria-labelledby="office"></span></th>
    <th data-dt-column="3" rowspan="1" colspan="1" class="dt-type-numeric dt-orderable-asc dt-orderable-desc" id="age" 
        aria-label="Age: Activate to sort"><span class="dt-column-title">Age</span><span class="dt-column-order"
            role="button" tabindex="0" aria-labelledby="age"></span></th>
    <th data-dt-column="4" rowspan="1" colspan="1" class="dt-type-date dt-orderable-asc dt-orderable-desc" id="startDate" 
        aria-label="Start date: Activate to sort"><span class="dt-column-title">Start date</span><span
            class="dt-column-order" role="button" tabindex="0" aria-labelledby="startDate"></span></th>
    <th data-dt-column="5" rowspan="1" colspan="1" class="dt-type-numeric dt-orderable-asc dt-orderable-desc" id="salary" 
        aria-label="Salary: Activate to sort"><span class="dt-column-title">Salary</span><span class="dt-column-order"
            role="button" tabindex="0" aria-labelledby="salary"></span></th>
</tr>

Thank you for the great work and in advance for your help and review!

jeranU

Also, here is the difference using the NVDA reader on my local example since I can't correctly have new html classes applied when sorting after I change your html in the browser:

Read using NVDA:

Name of TH: Name
Steps:
1. Tab to sorting button
2. Sort
3. Tab out and back in

before:

1. Column 1 button
2. Column 1 sorted ascending button
3. Column 1 sorted descending button

after:

1. Column 1 Name activate to sort button
2. Column 1 sorted ascended Name activate to invert sorting button
3. Column 1 sorted descended Name activate to remove sorting button

allan

Thanks for letting me know about this. I've committed a change to move the aria-label onto the element with role="button" for the column sorting.

Allan

jeranU

Hello,

It does appear from the nightly builds you have the issue will be resolved. I just wanted to check when your next planned release will be that includes this? Thank you very much!

allan

Currently thinking tomorrow . There are a few little tweaks in the nightly ready for release.

Allan

jeranU

Just tested the updated released and the issues are gone. The screen reader reads as follows (same as example above)

Column 1 Name activate to sort button
Column 1 sorted ascended Name activate to invert sorting button
Column 1 sorted descended Name activate to remove sorting button

Thank you again so much!

allan

Awesome - thanks for confirming

Allan