小心屏幕外可访问文本被挤压

J. Renée Beach

在几次讨论中，Matt 提到文本字符串“显示更多反应”被挤压在一起，读起来像“Showmorereactions”。

事实证明，一种流行的视觉隐藏内容（但对辅助技术不隐藏）的技术涉及设置 width: 1px;，这迫使单词每行一个单词换行，并带有“换行符”断行，而辅助技术没有将这些断行视为空格。

Facebook 必须更新其可访问的隐藏类以包含 white-space: nowrap; 来解决此问题。Gaël Poupard 建议用更新的 clip 替换已弃用的 clip 值，除了回退之外。

.accessible_elem {
  clip: rect(1px 1px 1px 1px); /* IE 6/7 */
  clip: inset(50%); /* fix */
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap; /* fix */
  width: 1px;
}

直接链接 →