Voice Over Not reading the content of aria-label of table row on Row selection

Question

I am adding aria-label to row on row click event by using event.currentTarget object of onClick(event, index) method. content of the aria-label is not being reading by the Voice over. I tested on both chrome and safari browser Voice over keeps ignoring the aria-label content on selected row.

Content of the aria-label is having text " Row selected ". the purpose of adding aria-label dynamically onClick on row is to make voiceover to read the row as row selected onClick of row.

If add aria-label to tr tag during declaration like below Voice over reads the aria-label content of selected row as expected instead of row cell contents.

<tr role="row" aria-selected={isSelected} aria-label="row selected"/>

isSelected is boolean variable which will set true on row selection.

But when I try to add aria-label dynamically on click of row voice over is not reading the aria-label content even though Dom element is updated with aria-label attribute on click of row.

Please help me in resolving this voice over issue.

I tried adding aria-live="assertive" and aria-live="polite" attributes to like bellow

<tr role="row" aria-selected={isSelected} aria-live="assertive"/>

When I add aria-live voice over first reads cell content and then it reads aria-label contents. but this results in voice over being read row as Cell contents followed by Row selected instead of reading it as Row selected followed by cell Content and another issue that I am facing if I use aria-live attribute on row than it reads the previously selected row cell content when i select new row. this is because i am removing aria-label onBlur event of row since row is updated on onBlur is previous row Voice over reads the previous row content as well.

So Please let me know if there is any other work-arround to make voiceover to read the content of aria-label that is added on click of row.

If you use role="row" and aria-selected="true" on the row, that will provide the correct context for screenreader users. What you're doing is too verbose and overworking the accessibility. Additionally, VO often ignores aria-label on non-focusable items. — Jason
role="row" and aria-selected="true" should work but not able to find out the reason why. so trying with aria-labels — supreeth mr
Since you're caring about a11y: Is the row selectable by keyboard? The pattern which is the most easy to understand for most users is a checkbox in front of each row. This would improve discoverability for all. — Andy
@Jason "Additionally, VO often ignores aria-label on non-focusable items". I'm not sure that's an accurate statement. aria-label might be ignored if the element doesn't have a role but should have nothing to do with the element being focusable. See "2.10 Practical Support: aria-label, aria-labelledby and aria-describedby" at w3.org/TR/using-aria/#label-support — slugolicious
@slugolicious - you're correct. I misspoke regarding a current issue with aria-label and svg not being announced unless hte svg is the child of a focusable element. — Jason

slugolicious slugolicious · Accepted Answer · 2019-04-06T01:13:25

content of the aria-label is not being reading by the Voice over

Changing an aria-label is not going to be read by a screen reader. However, if you navigate off your element and back onto it, it should be read properly.

Specifying aria-live won't help because that applies to the contents (child DOM elements) of that element and not the attributes on that element.

However, you should not be adding an aria-label to indicate the row is selected if you are already using aria-selected. aria-selected is sufficient.

Voice Over Not reading the content of aria-label of table row on Row selection

1 Answers