如何为屏幕阅读器添加上下文不在页面上？

如何解决如何为屏幕阅读器添加上下文不在页面上？

为了获得良好的可访问性，屏幕阅读器的文本是否应该与网页的文本相同？

我正在思考的问题：对于无法在视觉上“在上下文中”看到项目的人来说，上下文可能会有所不同。

例如：

我的页面有一个表，标题行带有文本“总计：200”
200 是行数。

我可以为屏幕阅读器的“订单数为 200”添加 aria-label，实际为 200（在一个范围内），这样屏幕阅读器就不会只说“200”。

我的问题是，考虑到视障用户缺乏上下文，咏叹调标签是否应该更具描述性，例如“记录总数为 200”。或者是否可以，因为他们将通过了解他们在那里导航的方式和原因而拥有自己的上下文，假设一个相当简单的页面，例如我的示例，其中该页面本质上是一个记录表。

解决方法

使用 caption 来描述 table，然后会有上下文。

如果添加 caption 会增加上下文的冗余，比如已经有标题可以了解上下文，您可以使用 sr-only CSS 类将其从 UI 中隐藏，但为屏幕阅读器保留它。下面的代码片段来自 Bootstrap CSS。

// Only display content to screen readers
// See: http://a11yproject.com/posts/how-to-hide-content/
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
}

如果 HTML 语义标签用于此目的，请避免使用 aria 属性。