You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Description:
This issue addresses two accessibility (A11y) concerns with the Tabulator table component:
Duplicate labels: The table currently contains duplicate labels for checkboxes(using rowSelection formatter), which can confuse screen reader users and hinder accessibility.
NVDA Issues:
a. Each column header receives additional screen reader focus and is read as "blank", which can cause confusion and disrupt the user experience.
b. The screen reader fails to properly announce the Rating values in the table(using star formatter), instead reading them as "column number Rating" without conveying the actual rating values (0, 1, 2, 3, 4, or 5).
Explanation:
Duplicate labels:
The presence of duplicate labels for checkboxes violates accessibility best practices as it can lead to confusion for screen reader users. This issue needs to be addressed by ensuring that each checkbox in the table has a unique and descriptive label, improving clarity and usability for all users.
NVDA Issues:
a. Additional screen reader focus on column headers: The behaviour of receiving additional screen reader focus and being read as "blank" for column headers disrupts the user experience and may cause confusion. While one focus is expected for reading and another for sorting, the sort function should not read as "blank." This issue needs to be investigated and resolved to ensure a seamless and understandable experience for screen reader users.
b. Missing Rating values announcement: The failure of the screen reader to properly announce the Rating values in the table deprives users of important information. This issue needs to be addressed to ensure that the Rating values are correctly announced, providing users with a complete understanding of the content presented in the table.
To Reproduce
A step by step guide to recreate the issue in your JS Fiddle or Codepen:
Go to the above jsFiddle link
Use a screen reader (e.g., NVDA) to navigate through the checkboxes -Note that the screen reader announces duplicate labels for the checkboxes.
Use a screen reader (e.g., NVDA) to navigate through the table headers - Note that each column header receives additional screen reader focus and is read as "blank".
Use a screen reader (e.g., NVDA) to navigate through the Rating values - Note that the screen reader fails to properly announce the Rating values, instead reading them as "column number Rating" without conveying the actual rating values (0, 1, 2, 3, 4, or 5).
Expected behavior
The checkboxes in the table should have unique and descriptive labels to ensure clarity and usability for screen reader users.
Each column header should receive focus and be read accurately, sort function should not be read as "blank".
The screen reader should properly announce the Rating values in the table, providing users with a complete understanding of the content presented.
Desktop (please complete the following information):
OS: Windows
Browser [chrome, safari]
Version [latest]
The text was updated successfully, but these errors were encountered:
Description:
This issue addresses two accessibility (A11y) concerns with the Tabulator table component:
rowSelection
formatter), which can confuse screen reader users and hinder accessibility.a. Each column header receives additional screen reader focus and is read as "blank", which can cause confusion and disrupt the user experience.
b. The screen reader fails to properly announce the Rating values in the table(using
star
formatter), instead reading them as "column number Rating" without conveying the actual rating values (0, 1, 2, 3, 4, or 5).Explanation:
Duplicate labels:
a. Additional screen reader focus on column headers: The behaviour of receiving additional screen reader focus and being read as "blank" for column headers disrupts the user experience and may cause confusion. While one focus is expected for reading and another for sorting, the sort function should not read as "blank." This issue needs to be investigated and resolved to ensure a seamless and understandable experience for screen reader users.
b. Missing Rating values announcement: The failure of the screen reader to properly announce the Rating values in the table deprives users of important information. This issue needs to be addressed to ensure that the Rating values are correctly announced, providing users with a complete understanding of the content presented in the table.
Working Example
Working example
To Reproduce
A step by step guide to recreate the issue in your JS Fiddle or Codepen:
Expected behavior
Desktop (please complete the following information):
The text was updated successfully, but these errors were encountered: