我有一个网站需要完全可访问。我们的动态内容位于单个页面上(不会重新加载(，并在屏幕上进行更改。
为了让屏幕阅读器跟上这一步，我添加了一些JS逻辑，其中添加了属性aria-hidden="true"或aria-live= "polite"来隐藏和显示目标元素。
尽管读取了元素的aria-label，但我遇到了一个问题，即role属性被遗漏了。
情况1
<div role="button" aria-label="This is a label" aria-hidden="true"></div>
当需要在页面上读取此按钮时，我使用JS删除属性aria-hidden并添加aria-live="polite"
这使得屏幕阅读器然后读取"strong"；这是一个标签">
情况2
<div role="button" aria-label="This is a label"></div>
然而，如果内容从一开始就被读取而没有被隐藏，即没有aria-hidden="true"，则它读取为"strong"；这是一个标签，按钮">
我想要这种行为，但我能够控制这种行为的发生。
我在最新的Chrome浏览器上使用iOS屏幕阅读器。
我已经尝试了很多技巧来绕过这个：
- 将
aria-hidden="true"设置为父对象和个体元素导致角色仍然被省略 - 不是用
aria-live="polite"来揭示而是相反aria-hidden="false"。然而，这甚至不会被屏幕阅读器
非常感谢任何帮助或指导。
附加的JSFiddle，有一个简化的例子(你可以使用Apple屏幕阅读器，点击窗口来阅读内容(：
https://jsfiddle.net/qf4jv6g9/2/
到目前为止，所有的评论都很不错，但都避免了这个问题。无论您使用的是真正的<button>还是<div role="button">都无关紧要。使用<div>当然需要做更多的工作，因为您需要tabindex、事件处理程序和aria-label等等，但如果所有这些都存在，那么使用哪种辅助技术并不重要。
关于aria-live，它并不意味着是一个动态属性。也就是说，它不是一个你想在飞行中添加的属性。当页面已加载并且元素已设置aria-live时，效果最佳。
aria-live的目的是宣布对元素(或子元素，如果在容器上设置了aria-live(的更改。因此，当页面被加载并且正确的元素具有aria live时，无论何时您向元素(或子元素(添加文本、添加/删除子元素或隐藏/取消隐藏子元素，这些更改都将被宣布。但只公布文本。(请参阅aria-relevant以控制宣布的更改类型。(
如果使用aria-live动态添加元素，然后将子元素添加到新的活动区域，则可能会遇到时间问题。应该立即宣布新添加的子项，还是显示/刷新周期需要在"开始"之前进行一次；"活力"；产生影响？很难说，因为浏览器和操作系统的组合工作方式有点不同。
我发现，当我不动态添加该属性时，aria live的效果非常好。
你的fiddle示例在电脑上的NVDA上根本不起作用。也就是说，当新按钮出现时，什么都不会宣布，这正是我所期望的，因为你正在取消隐藏一个按钮并向其添加aria-live。所以我认为aria-live的目的有点误解。如果在隐藏按钮周围添加一个容器，并且该容器具有aria-live，那么当按钮被取消隐藏时，它将被宣布。
我把你的小提琴改成了
<div aria-live="polite">
<button aria-hidden="true" class="newButton hidden" role="button">
New Content
</button>
</div>
我更改JS以删除CCD_ 27行
activeButton.addEventListener('click',function testFunc() {
//newButton.setAttribute("aria-live","polite");
newButton.removeAttribute("aria-hidden");
newButton.classList.remove("hidden");
}
现在，当我点击"；显示"；按钮，我听到"；新内容"；。我没有听到"；按钮"；但这没关系。aria-live旨在宣布文本更改，而不是元素的角色。