我遇到过这样一种情况，当div处于焦点位置时，NVDA屏幕阅读器读取div中所有元素的aria标签。
这是我为重新创建Codepen - NVDA Screen reader而创建的代码笔
HTML中有三个主要的div和类名-first-row、separator和second-row。
类为second-row的div具有tabindex="0"以使其可聚焦。这是要求的一部分。此div还包含类为header、content和footer的3个子div，每个子div都具有aria-label的可聚焦元素。footer子div也具有tabindex="0"，这也是要求的一部分。
当焦点在second-row或footer上时，NVDA屏幕阅读器会显示div的所有内容，如下所示
second-row-宣布文本如下
footer-宣布文本如下
我们的要求是不要让NVDA公布div内容，这会增加用户的困惑。
- 问题**
1.这个行为正确吗？NVDA屏幕阅读器应该公布可聚焦div的内容吗？
1.我可以尝试在这些可聚焦的div上使用aria-hidden="true"，但这也会链接到子元素，因此当焦点在子元素上时，屏幕阅读器不会通知它们。我可以编写focus-in和focus-out事件来更新aria-hidden的标志，但是否有其他解决方法？
1.大多数情况下，当焦点到达可聚焦div的第一个可聚焦元素时，NVDA不会发出任何通知，在codepen示例中，是footer div的第一个input元素。
1条答案
按热度按时间unhi4e5o1#
你观察到的行为是绝对正确的。当一个元素被聚焦时，可访问的内容必须完全被屏幕阅读器读取。这是它功能的核心，告诉用户现在聚焦的是什么。
基本问题是有重叠的可聚焦元素。可聚焦元素绝不能重叠，或者换句话说，一个可聚焦元素绝不能位于另一个可聚焦元素之内。
这样做会产生一些问题，比如你观察到的内容读了两遍就会混淆。但是，当焦点在内部元素时，键盘事件是否仍然应该发送到这两个元素？以什么顺序？当点击它时，同样的问题是，哪个元素（s）是否应获取焦点和/或发送事件？一个、另一个或两者都有，会根据情况依次给你安排，没有一个万能的好答案，知道是在内部还是外部也不总是很清楚：它是文本或图像的确切形状，考虑透明部分与否，还是整个矩形区域？它取决于CSS背景？等等。
简而言之，它太容易让用户感到疯狂的困惑，所以你必须真正避免它。
好消息是tabindex=0在这里完全没有用，应该删除它们。
当且仅当 * 可以与元素交互时， 元素必须是可聚焦的。如果元素不提供任何交互，则它不应是可聚焦的。*
你会关注一些你不能做任何事情的东西吗？往好了说，这是浪费精力/效率/时间，因为你不得不再一次毫无意义地使用Tab键，往坏了说，这只会让用户感到困惑，他们可能无法立即意识到被关注的元素没有任何用处。还有什么比在空白中写作更烦人的呢？
这里，你的div不提供任何交互，所以它们不应该是可聚焦的。删除这些完全无用的tabindex=0，问题就解决了。