Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

b-table sortable A11y screen reader announces "Click to sort ..." from aria-label instead of th content #4487

Closed
fl-frontend opened this issue Dec 11, 2019 · 5 comments · Fixed by #4488 or mariazevedo88/hash-generator-js#24 · May be fixed by tghelere/CL#8

Comments

@fl-frontend
Copy link

@fl-frontend fl-frontend commented Dec 11, 2019

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

  1. Using a Screenreader Go to https://bootstrap-vue.js.org/docs/components/table/#sorting
  2. Navigate to the the b-table sorting example
  3. Navigate to the 1st th element in the table
  4. Screen reader announces "Click to sort Ascending" but does not announce the text content "Last Name" of the th element.

Expected behavior

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

Versions

Libraries:

  • BootstrapVue: 2.1.0

Environment:

  • Device: Laptop
  • OS: Windows 10
  • Browser: Chrome 78 (with Narrator screen reader) Firefox 71 (with NVDA)
  • Also tested with tota11y screen reader tool https://khan.github.io/tota11y/
    image

Demo link

https://bootstrap-vue.js.org/docs/components/table/#sorting

Additional 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

<th role="columnheader" scope="col" tabindex="0" aria-colindex="1" aria-sort="none" class="b-table-sort-icon-left">Last Name <span class="sr-only">Click to sort Ascending</span></th>

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:

<th role="columnheader" scope="col" aria-colindex="1" aria-sort="none" class="b-table-sort-icon-left"><button class="btn btn-link w-100">Last Name <span class="sr-only">Sort by Last Name in ascending order</span></button</th>

@tmorehouse

This comment has been minimized.

Copy link
Member

@tmorehouse tmorehouse commented Dec 11, 2019

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 aria-sort attribute (ascending, descending or none) if hte aria-sort attribute is not present then the column isn't sortable.

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 <span> (or <p>) in front of any user header content might suffice?

@fl-frontend

This comment has been minimized.

Copy link
Author

@fl-frontend fl-frontend commented Dec 11, 2019

Have tested with NVDA and aria sort is announced when actioned and when the th is focussed by tabbing. On Windows 10 and don't have JAWS so can't test that but will test with Voiceover on macOS and iOS as soon as I can

@tmorehouse

This comment has been minimized.

Copy link
Member

@tmorehouse tmorehouse commented Dec 11, 2019

OK cool, thanks!

@tmorehouse

This comment has been minimized.

Copy link
Member

@tmorehouse tmorehouse commented Dec 11, 2019

@fl-frontend I've created PR #4488 which switches to an sr-only span in the header cell. You can try it out at:

https://deploy-preview-4488--bootstrap-vue.netlify.com/docs/components/table/#sorting

@fl-frontend

This comment has been minimized.

Copy link
Author

@fl-frontend fl-frontend commented Dec 12, 2019

@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.

<div class="sr-only" aria-live="polite" aria-atomic="true">Table sorted by: {{ sortBy }}, sort direction: {{ sortDesc ? 'Descending' : 'Ascending' }}</div>

This could just be added as an implementation note in the docs
Waiting on the keys to the test cupboard, but will update on voiceover on iOS and macOS asap

jackmu95 added a commit that referenced this issue Dec 13, 2019
…#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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
2 participants
You can’t perform that action at this time.