时间戳

首页 > 解决方案 > 使用视觉隐藏技术是否比 img alt 文本更好？

html - 使用视觉隐藏技术是否比 img alt 文本更好？

问题描述

我很好奇 CSS 视觉隐藏技术，最常用于字体图标，替代图像文本是否比使用 alt 属性更可取。反对 alt 属性的论点是屏幕阅读器在看到任何时候都会宣布“图形”，<img>这不太自然。例如：

<p>ABC <img src="right-arrow.png" src="converts to"> XYZ</p>

读作“ABC 图形转换为 XYZ”

<p>
  ABC
  <span class="visually-hidden">converts to</span>
  <img src="right-arrow.png" src="" aria-hidden="true">
  XYZ
</p>

读作“ABC 转换为 XYZ”

标签： htmlaccessibility

解决方案

我可以同意，当我们每次关注某个图像时，屏幕阅读器都会读取“图形”，这不太自然。另一方面，对内容类型的直截了当的解释对于有障碍的人来说可能是极其重要的。浏览网站已经够难了，所以如果我们可以缩小解释的范围，建议这样做。

我的意思是用屏幕阅读器上网并不是一种完美的体验。但就目前而言，我们必须坚持下去，通过让一些东西更示意性，我们实际上让它更清晰一点。

我们还可以查看有关此问题的 WCAG 文档，其中有一些建议的技术可供选择。

情况 A：如果简短描述可以起到与非文本内容相同的目的并呈现相同的信息： G94：为具有相同目的并呈现与非文本内容相同的信息的非文本内容提供短文本替代内容使用以下技术之一： 情况 A 的短文本替代技术：

ARIA6：使用 aria-label 为对象提供标签

ARIA10：使用 aria-labelledby 为非文本内容提供文本替代

G196：在一组图像中的一个项目上使用替代文本，描述该组中的所有项目

H2：为同一资源组合相邻的图像和文本链接

H35：在小程序元素上提供替代文本

H37：在 img 元素上使用 alt 属性

H53：使用对象元素的主体

H86：为 ASCII 艺术、表情符号和 leetpeak 提供替代文本

所以基本上我们也可以从 aria-attributes 中进行选择（有时我们可以，但前提是 alt 还不够）但是还有一个更强有力的论据来使用alt属性 - SEO 在图像上使用 alt 文本可以带来更好的用户体验，但它也可能有助于为您赢得显式和隐式 SEO 好处。除了实施图像标题和文件命名最佳实践外，包括 alt 文本也可能有助于图像 SEO。

尽管多年来搜索引擎图像识别技术有了很大的改进，但搜索爬虫仍然无法像我们一样“看到”网站页面上的图像，因此将解释权交给他们是不明智的。如果他们不理解或弄错了，您可能会为非预期的关键字排名或完全错过排名。

从这里引用

推荐阅读