Join GitHub today
GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.Sign up
b-table sortable A11y screen reader announces "Click to sort ..." from aria-label instead of th content #4487
Describe the bug
When using a screen reader the content of the aria-label is announced instead of the text content of the TH element, this makes the context of the table content inaccessible to screenreaders/AT
Steps to reproduce the bug
Screen reader should announce the text content of the th element "Last Name" as well as the sort actions as otherwise the table content loses context
When the aria-label attribute is added to an element most screen readers announce the content of the aria-label attribute instead of the text content of the element it is applied to, for more info https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute. An alternative could be to add in a span of visually hidden text to describe the sort action
Or instead of making the table header itself clickable wrap the text in a button which would remove the need to instruct the user to click:
Another option, might be to forgo the aria label, if the screen readers do indicate the sort direction (sortability) based on the value of the
I would be hesitant to wrap the content of the header in a button, as some users may have custom headers that include interactive elements which are not allowed inside button elements.
But perhaps adding the sr-only
@tmorehouse works well in firefox with nvda both when the sort action happens and when focussed. Chrome it announces the aria sort on focus but not on the sort action. An additional visually hidden div with an aria-live="polite" attribute similar to the div in the example could work as a belt and braces approach as chrome announces the live region when it updates, Firefox announce both the aria-sort and the live region, which is a little verbose but don't think it's too much.
This could just be added as an implementation note in the docs
…#4488) * feat(b-table): better sort labeling for screen readers * Update mixin-thead.js * Update mixin-thead.js * Update mixin-thead.js * Update mixin-thead.js * Update mixin-thead.js * Update mixin-sorting.js * Update mixin-sorting.js * Update table-sorting.spec.js * Update package.json * Update table-sorting.spec.js * Update table-sorting.spec.js * Update mixin-thead.js * Update mixin-thead.js