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!