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

Question

为了良好的可访问性，屏幕 reader 的文本应该与网页的文本相同吗？

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

例如：

我的页面有一个 table，其中 header 行的文本为“总计：200”
200 是行数。

我可以添加 aria-label for 'Number of orders is 200' for reader for the screen reader on the actual 200 (it's on a span) 这样屏幕 reader 不只是说“200”。

我的问题是 aria 标签是否应该像 'Total number of records is 200' 那样更具描述性，因为视障用户缺乏上下文。还是可以，因为他们将知道他们如何以及为什么导航到那里，从而拥有自己的上下文，假设一个相当简单的页面，例如我的示例，其中页面基本上是 table 条记录。

Answer 1

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

如果添加caption会增加上下文冗余，比如已经有标题可以知道上下文，您可以使用sr-only CSS class来隐藏它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 属性。

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

How to add context (not on the page) for screen readers?

usability

accessibility

screen-readers