v-data-table sortable columns lack aria-sort: need ARIA support for screen readers

Answer

No. Vuetify v-data-table does not automatically render aria-sort on sortable <th> elements in Vuetify 2.x or 3.x, and there is no built-in prop or configuration to enable it automatically. The supported workaround is a custom header slot where you bind aria-sort manually from the table’s sort state.

Confirmed facts

• The default v-data-table / VDataTable header renders sortable columns without aria-sort.
• No official prop exists to turn on automatic ARIA sort support.
• Accessibility improvements for data tables are tracked in the Vuetify project, but as of the last verified releases up to mid-2024 there is no scheduled built-in aria-sort implementation. Current status as of 2026-10-20 requires live verification.

Likely explanation

The component handles sorting logic internally but does not map its internal sort state to ARIA attributes. The team has historically relied on custom header slots for accessibility overrides.

Steps for this case

1. Use a custom header slot for each sortable column and preserve native sorting.
2. Bind aria-sort from the slot scope sort state, not from a parent reference.
3. Do not replace the header element; render the slot content inside the default <th> so click handlers remain intact.

Vuetify 3 example pattern:

<VDataTable :headers="headers" :items="items">
  <template #header.{value}="{ column, isSorted, sortDirection }">
    <span :aria-sort="isSorted ? sortDirection : 'none'">
      {{ column.title }}
    </span>
  </template>
</VDataTable>

Vuetify 2 example pattern:

<v-data-table :headers="headers" :items="items">
  <template v-slot:headers="{ props: { headers } }">
    <thead>
      <tr>
        <th v-for="h in headers" :key="h.value"
            :aria-sort="sortBy === h.value ? (sortDesc ? 'desc' : 'asc') : 'none'"
        >
          {{ h.text }}
        </th>
      </tr>
    </thead>
  </template>
</v-data-table>

Best practices with custom header slots

• Keep the native click handler; only wrap or augment the label, do not replace the <th> with a non-interactive element.
• Set aria-sort="none|ascending|descending". Use 'none' for unsorted columns.
• Verify with dev tools that the attribute updates on each sort click.
• Test announcement with a real screen reader, e.g., NVDA or VoiceOver, because attribute presence alone does not guarantee correct announcement.

Verification checklist:

• Inspect a header <th> after sorting and confirm aria-sort is 'ascending', 'descending' or 'none'.
• Confirm sorting still works after the slot change.
• Run a screen reader announcement test while changing sort direction.

Missing diagnostic needed to finalize the exact slot syntax: which Vuetify major version and component name you are using, Vuetify 2 v-data-table vs Vuetify 3 VDataTable. The slot prop names and header API differ between majors and change the binding expression.