如何使网页中的屏幕阅读器可以访问图像?图像可访问是什么意思?

Question

这是我的 2 个图像元素，我添加了title和alt属性：

<img src="images/dog.jpg" title="dog" alt="Picture of a dog">
<img src="images/dog-house.jpg" title="dog in house" alt="Picture of a dog in it's house">

那么我如何使这 2 张图像可访问，这是否足以让图像被视为可访问？

Answer 1

根据您发布的<img>标签，我将向您推荐有助于屏幕阅读器更容易访问您的网页的内容。

• 不要为带有标题和修饰的图片提供alt文字

如果您的图像已使用已描述它们的标题分组或仅用于装饰。在这些情况下，替代文本可能看起来是多余的或不必要的。在图像已使用文本内容进行解释或不为页面添加含义的情况下，<img>仍然需要alt属性，但可以将其设置为空字符串。下面是一个示例：

<img src="visualDecoration.jpeg" alt="">

• 不要为了SEO而写alt标签

用关键字填充alt标签可能会损害您的搜索引擎排名而不是帮助它，因为您可能会被视为垃圾邮件。

• 保留唯一的alt标签

除了关键字堆砌之外，对多张图片使用相同的alt标签和关键字可能会显示为垃圾邮件。每个图像都应具有唯一的alt标记。

Answer 2

这是在 html 中访问图像的方式。但请确保文件夹和图像正确。例如，如果图像在文件夹中，则 src 应该是文件夹/图像.jpg。如果图像与html页面在一起，而不仅仅是添加图像.jpg在src中。

<img src="images/dog.jpg" alt="Picture of a dog">
<img src="images/dog-house.jpg" alt="Picture of a dog>