如何使屏幕截图图像易于访问？

Question

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

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

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

Answer 1

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

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

基本上，您在图像上设置 aria-describedby 属性，指向具有相应 ID 和所需信息的元素，如：

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

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

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

Answer 2

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

Answer 3

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

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

Situation B: If a short description can not serve the same purpose and present the same information as the non-text content (e.g., a chart or diagram):

G95: Providing short text alternatives that provide a brief description of the non-text content using one of the following Short text alternative techniques for Situation B AND one of the following Long text alternative techniques for Situation B :

[...]

Like longdesc, descriptive text provided using aria-describedby is separate from the short name provided using the alt attribute in HTML.

例如，在使用 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>

如何使屏幕截图图像易于访问？

How do I make a screenshot image accessible?

html

css

accessibility

wai-aria