Voice Over不读取行选择中表行的aria标签的内容

问题描述 投票:0回答:1

我通过使用onClick(事件,索引)方法的event.currentTarget对象在行单击事件上添加aria-label。咏叹调标签的内容没有被Voice over读取。我测试了chrome和safari浏览器Voice over一直忽略所选行上的aria-label内容。

aria-label的内容具有文本“Row selected”。在onClick on row上动态添加aria-label的目的是使画外音将行读取为onClick of row上选择的行。

如果在声明过程中将aria-label添加到tr标签,则Voice Over会按预期读取所选行的aria-label内容而不是行单元格内容。

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

isSelected是布尔变量,它将在行选择中设置为true。

但是,当我尝试动态添加咏叹调标签时,单击行语音即使在点击行时使用aria-label属性更新了Dom元素,也不会读取咏叹调标签内容。

请帮我解决这个问题。

我尝试将aria-live =“assertive”和aria-live =“polite”属性添加到下面

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

当我添加咏叹调实时语音首先读取单元格内容然后它读取咏叹调标签内容。但是如果我在行上使用aria-live属性而不是在我选择新行时读取先前选择的行单元格内容,则会导致语音被读取为Cell contents followed by Row selected,而不是将其作为Row selected followed by cell Content读取。这是因为我删除了aria-label onBlur事件的行,因为onBlur上的行更新是前一行Voice over也读取前一行内容。

所以请告诉我是否有任何其他解决方法可以使用画外音来阅读在点击行时添加的aria-label的内容。

javascript reactjs accessibility wai-aria voiceover
1个回答
0
投票

咏叹调标签的内容没有被Voice over读取

更改aria-label不会被屏幕阅读器读取。但是,如果您导航元素并返回到元素上,则应正确读取。

指定aria-live无济于事,因为它适用于该元素的内容(子DOM元素)而不适用于该元素的属性。

但是,如果您已经在使用aria-label,则不应添加aria-selected来指示行已被选中。 aria-selected就足够了。

© www.soinside.com 2019 - 2024. All rights reserved.