带有文字的图像文件：视障人士的可访问性？答案

【问题标题】：Image files with text on them: accessibility for visually impaired?带有文字的图像文件：视障人士的可访问性？
【发布时间】：2018-04-18 02:20:49
【问题描述】：

我有一个站点，其中包含许多呈现为图像的书面文档。如果我想让视障人士可以访问它们，我似乎需要在某处添加文本。

每个文档都呈现为一系列图像，每个页面一个图像（例如，参见this）。我是否希望将每个页面的文本放入其相应图像的alt 属性中，或者有更好的方法吗？而且，如果 alt 属性是要走的路，我可以将整个文档放在第一页的图像中，还是最好让每个属性中的文本与其所在的图像完全对应？

【问题讨论】：

标签： accessibility

【解决方案1】：

我不会使用 alt 属性，因为它仅用于简短描述。

使所有这些文本可访问意味着将其呈现为 HTML。在您的文档中，有列表，有表格，有定义列表；所有这些都需要通过 HTML 进行语义描述，以便可以访问。您将无法通过 alt 属性执行此操作。

我想了多种方法可以让你可以访问：

所有img 上的alt 为空，并在最后一张图片下方呈现HTML 中的所有文本。文本可以对所有人可见，或者仅对具有屏幕阅读器的人可见（通过使用特定的 CSS，例如，参见 Bootstrap 的“sr-only”类）。如果您希望文本对所有人可见而不占用太多视觉空间，您可以将其隐藏在切换按钮后面（使用aria-controls 和aria-expanded 属性）。
在每个img 上，都有一个简短的alt 属性和一个longdesc 属性。 alt 是当前页面的标题，如“目录”。 longdesc 是指向包含图像上所有文本的 HTML 页面的链接。
在每个img 之后，有一些带有图像文本的HTML。此描述仅对屏幕阅读器用户可见。通过图片上的aria-describedby 属性链接每个描述。

我会选择第一个解决方案，因为它通常是最容易处理的，并且对所有用户都有好处。

【讨论】：

感谢您的意见。

【解决方案2】：

大多数屏幕阅读器软件不会通过 alt 属性宣布整个页面的内容价值，更不用说整个文档了。它们有不同的截止点，但 alt 旨在对图片进行简短（一两句话）描述，而不是大量的段落、标题、表格等。您可以使用免费的屏幕阅读器（Apple 设备的 VoiceOver 或 NVDA）进行测试对于 Windows）自己确认。

更好的选择是使用 OCR 提取文本并将其放入 HTML 或使用模板样式的 Word 文档中。这样，看不到文本的人仍然可以读出文本，而且他们将能够使用所有常用的导航快捷方式，如目录和标题。您仍然可以将任何图表或图形作为带有 alt 的图像放入，并且您需要描述它们的文本量会更短且更易于编写。

【讨论】：

感谢您的回复。我不需要提取文本。原件都是doc格式。我导出到图像文件是因为我不喜欢嵌入式 pdf 的行为方式。所以，可能是HTML。现在，你能告诉我屏幕阅读器是否会阅读屏幕上未显示的文本吗？
是的，如果文本在 HTML 中但在视觉上被 CSS 隐藏，屏幕阅读器仍会宣布它。如果您需要为看不到页面的人提供更多详细信息或上下文，这会很有用。
如果可以的话，让我完全清楚这一点。我可以在一个 div 中添加 HTML 中的所有文本，将 div 的显示设置为无，屏幕阅读器仍然会阅读它，机器人仍然会抓取它？
啊，您澄清了一件好事：将其设置为 {display: none} 会将其从 DOM 中删除，因此根本没有人会得到它。将其设置为 visibility:hidden 或使用其他 CSS 视觉隐藏样式，会将其隐藏，但仍将其保留在 DOM 中，以便屏幕阅读器用户可以获取它。这篇文章解释了你的选择：a11yproject.com/posts/how-to-hide-content
谢谢。我担心可见性：隐藏在页面上创建大量空白，您的链接已经为我解决了这个问题。我不知道剪辑的事情；看起来它会为我完成这项工作。