屏幕阅读器在元素展开时阅读内容

如何解决屏幕阅读器在元素展开时阅读内容

我有几个带有标题和阅读更多链接的 div 元素。当用户点击阅读更多时，div 元素展开，显示内容，“阅读更多”链接转换为“阅读更少”链接。当用户点击少读链接时，div 元素收缩，再次显示多读链接。

元素正常工作，但我正在尝试实现可访问性。

1. 我根据 div 标签是否在真/假之间切换 div 的 aria-expanded 属性 扩大或缩小

2. 我将 aria-label 添加到包含 div 正文内容的 less 链接

当我关闭链接并返回到 Less 链接时，后者有效。此外，当我重新使用 Tab 键时，我可以使用 Enter 键来收缩和展开 div 元素，然后屏幕阅读器才会读取内容 我尝试在 div 展开时使用 JavaScript 将焦点设置在 less 链接上，但这不起作用。

如何确保屏幕阅读器读取 div 元素初始展开上的内容？

我的查询类似于手风琴。我找到了两个无障碍手风琴示例，并注意到当答案在两种情况下都可见时，我的屏幕阅读器 (NVDA) 不会读取初始隐藏内容。

Accessible accordion example 1

Accessible accordion example 2（页面底部的示例）