如何使截图图像可访问？

Question

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

在我的页面上，我希望用户能够读取/浏览此图像中的文本，因此我需要屏幕阅读器基本上能够读取此图像中的所有文本。但是，有太多信息无法容纳<img>的alt属性 - 我无法保留屏幕截图中显示的文本结构。

我当然愿意转录整个图像，但我不知道如何格式化转录。有没有什么方法可以在<img>标签上使用咏叹调标签或其他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

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

您的问题在WCAG的1.1.1 Non-text Content中有所涉及：

  

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

     

G95: Providing short text alternatives that provide a brief description of the non-text content使用以下其中一种短文替代技术进行情境B AND 以下为情况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>

Answer 3

我认为你会给图像标签css一个mediatype的屏幕，然后创建一个内部文本的div或其他东西，有媒体类型的语音。