如何使屏幕截图图像可访问？答案

【问题标题】：How do I make a screenshot image accessible?如何使屏幕截图图像可访问？
【发布时间】：2017-10-24 17:37:27
【问题描述】：

我正在尝试让屏幕阅读器等设备完全可以访问我的网站。在我网站的一个页面中，我有一个显示大量文本的应用程序的屏幕截图。作为参考，这是我的图片：

在我的页面上，我希望用户已经阅读/浏览了这张图片中的文字，所以我需要屏幕阅读器基本上能够阅读这张图片中的所有文字。但是，<img> 的 alt 属性中包含的信息太多了——我无法保留屏幕截图中显示的文本结构。

当然，我愿意转录整个图像，但我不知道如何格式化转录。有什么方法可以在 <img> 标签上使用 aria-label 或其他 ARIA 属性之一，还是应该将转录单独包含在一个不可见的块中？最好是使用<pre> 标记以纯文本形式重新创建图像，还是使用语义HTML 创建它？还是我应该完全采用其他方法？

【问题讨论】：

我想知道...如果它是某些软件的文档，您应该描述屏幕截图还是应该描述屏幕阅读器会说什么？
这不是软件本身的文档；我只是用一个截图来说明一个观点。在这种情况下，我描述了解决特定问题的过程，并且在某一时刻，我不得不在大量文件中搜索特定的文本。为了在我的博客文章中展示这一点，我刚刚在我的文本编辑器中添加了搜索结果的屏幕截图。因此，我对呈现屏幕截图的实际内容更感兴趣，而不仅仅是描述它。

标签： html css accessibility wai-aria

【解决方案1】：

请注意，您必须同时提供短文本替代和长文本替代

WCAG 的1.1.1 Non-text Content 涵盖了您的问题：

情况 B：如果简短的描述不能起到与非文本内容相同的目的并提供相同的信息（例如图表或图表）：

G95: Providing short text alternatives that provide a brief description of the non-text content 针对情况 B 使用以下短文本替代技术之一和以下针对情况 B 的长文本替代技术之一：

[...]

与longdesc 一样，使用aria-describedby 提供的描述性文本与使用HTML 中的alt 属性提供的短名称是分开的。

例如，使用alt 属性设置图像的标签（=简短描述）后，您可以使用aria-describedby 属性设置其描述，使用以下技术： ARIA15: Using aria-describedby to provide descriptions of images

<img src="screenshot.jpg"
   alt="Screenshot of my application"
   aria-describedby="long-alternative" />

<div id="long-alternative">insert your full text here</div>

【讨论】：

【解决方案2】：

请参阅以下技术以满足 WCAG 2.0 成功标准 1.3.1（信息和关系）和 3.3.2（标签和说明）：

https://www.w3.org/TR/WCAG20-TECHS/ARIA1.html

基本上你在你的图片上设置 aria- describeby 属性，指向一个具有相应 id 和所需信息的元素，如：

<img src="image.png" aria-describedby="description" />

<div id="description">
My description.
</div>

div 可以使用visibility hidden 或display none 对不需要辅助功能的用户隐藏它。

【讨论】：

【解决方案3】：

我认为你会给图像标签的 css 一个 screen 的媒体类型，然后创建一个 div 或里面有文本的东西，它有一个媒体类型的语音。

【讨论】：