Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://github.com/bootstrap-vue/bootstrap-vue/issues/4487 below:

b-table sortable A11y screen reader announces "Click to sort ..." from aria-label instead of th content · Issue #4487 · bootstrap-vue/bootstrap-vue · GitHub

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

1. Using a Screenreader Go to https://bootstrap-vue.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.

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

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/
  

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

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>

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4