我在Chrome中搞乱了ARIA和VoiceOver。
我所拥有的是一个隐藏的文本区域和一个包裹在shell div元素中的“编辑器”区域。我有嵌套的编辑器,用于在隐藏的文本区域和外壳之间进行聚焦。这是我正在做的事情。简而言之,用户将输入隐藏文本区域,并将文本区域的内容以跨度的形式添加到编辑器中。
类似这样的东西:
/*----------------
<hiddentextarea>
----------------*/
<div id="shell">
<div id="editor">
<span>HERE IS WHERE CONTENT APPEARS</span>
</div>
</div>
我希望发生的事情是,让屏幕阅读器将外壳识别为可编辑的外壳,而不是将其识别为一组,并让键入到编辑器的每个单词在屏幕阅读器键入时由屏幕阅读器读取。
我一直在使用ARIA角色和实时属性进行尝试。
在使用列出的aria属性测试屏幕阅读器时,我发现了以下内容:
不读取任何内容/宣布shell div为编辑文本
shell | ROLE: textbox | LIVE: | ATOMIC:
editor | ROLE: | LIVE: assertive | ATOMIC: true or false
无论ATOMIC设置如何,都读取全部内容/宣布shell div为编辑文本
shell | ROLE: textbox | LIVE: assertive | ATOMIC: true or false
editor | ROLE: | LIVE: | ATOMIC:
按需要阅读并遵守ATOMIC设置/将shell div声明为组
shell | ROLE: | LIVE: assertive | ATOMIC: true or false
editor | ROLE: | LIVE: | ATOMIC:
or
shell | ROLE: | LIVE: | ATOMIC:
editor | ROLE: | LIVE: assertive | ATOMIC: true or false
对我来说,最奇怪的一点是,为什么aria-live属性在其父级具有role属性的子元素中不起作用。
我有上面列出的实际代码,我只是想出了一个问题就足够了。非常感谢您的帮助,在此先感谢您!