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

Question

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

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

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

Answer 1

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

您的问题已包含在 1.1.1 Non-text Content 中WCAG 的:

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>