标准答案
- 如果内容要视觉隐藏但保留给屏幕阅读器读取，不能用 display: none 或 visibility: hidden，它们通常会把内容从可访问树中移除。
- opacity: 0 也不是理想方案，因为元素仍然占位，还可能接收点击或键盘焦点。
- 常见做法是 visually-hidden 或 sr-only：把元素裁剪到 1px，绝对定位到页面布局之外，隐藏溢出，同时保留在 DOM 和可访问树中。
- 它适合给图标按钮补充可访问名称、给表单补充说明、给跳过导航链接提供文本。
- 如果元素需要键盘聚焦，比如“跳过主内容”链接，focus 时要恢复可见，不能一直隐藏。
题目解析
这题的核心是区分视觉隐藏和语义隐藏。display: none 是两者都隐藏，visually-hidden 是只视觉隐藏。
如果内容本来就不应该被辅助技术读取，应使用 aria-hidden 或不渲染，而不是 visually-hidden。
代码示例
经典 sr-only 样式可以保留屏幕阅读器可读性。
CSS
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.skip-link:focus {
position: static;
width: auto;
height: auto;
margin: 0;
overflow: visible;
clip: auto;
}常见误区
- 用 display: none 写辅助说明，导致屏幕阅读器也读不到。
- 用 opacity: 0 隐藏可交互元素，导致看不见但能聚焦或点击。
- 跳过链接聚焦后仍然不可见，键盘用户无法确认焦点位置。