YouTube嵌入播放器中player-controls-a11y-toggle按钮获焦不可见问题咨询

问题性质 #

这是YouTube嵌入播放器的预期行为，但确实违背了“可聚焦元素获得焦点时必须可见”的无障碍最佳实践。这个player-controls-a11y-toggle按钮是为屏幕阅读器用户设计的快捷控制入口，默认状态下仅通过辅助技术暴露，不显示在视觉界面中，但YouTube的实现没有兼顾键盘导航用户的体验，导致Tab键切换焦点时，用户会看到焦点“跳到了看不见的地方”。

解决办法 #

可以通过自定义CSS强制让这个按钮在获得焦点时显示出来，步骤如下：

1. 给嵌入YouTube播放器的容器添加一个自定义类名，比如custom-youtube-player
2. 添加以下CSS代码：

.custom-youtube-player #player-controls-a11y-toggle:focus {
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 999 !important;
}

这段代码会覆盖按钮的默认隐藏样式，确保它在获得键盘焦点时变得可见。

注意：YouTube嵌入iframe的内部DOM结构可能会随平台更新发生变化，这个方案可能在未来版本中失效，需要定期验证兼容性。

内容的提问来源于stack exchange，提问作者Roger