屏幕阅读器 NVDA 读取图像标题和替代。 需要读者只读标题并忽略alt

Question

我有一个 SEO 优化所需的带有 title 和 alt 属性的图像元素。 但是当用户将鼠标悬停在图像上时。 屏幕阅读器 (NVDA) 会读取图像和替代文本，即使它们具有相同的文本。 我需要找到一种方法让屏幕阅读器忽略其中一个，尤其是 alt。 有谁知道解决方案？ 谢谢

<img
    className={className}
    src={src}
    alt={alt}
    title={title}
    loading="lazy"
    {...props}
  />

Answer 1

您通常不应该在同一张图片上同时拥有alt属性和title属性。 这不是无效的，但考虑到他们做许多相同的事情，它没有多大逻辑意义。 许多浏览器/屏幕阅读器也会一个接一个地阅读两者，这可能是一种不太理想的体验。

有一个可视化的组件title ，它会在悬停时出现（ alt没有），但通常不清楚哪些元素可以悬停以产生工具提示，哪些不能。

还值得注意的是， title是为咨询信息而制作的，而alt是为图像的文本等效描述而制作的。

由于这些原因，我认为通常最好避免使用title属性，除非您有充分的理由使用它并使用alt代替。 我会删除图像上的title属性，因为alt在可访问名称计算中具有优先权。

如果你真的想，你可以删除alt并只拥有title属性。 这通常不是完成的事情，一些自动检查器可能会抱怨这一点，但它是有效的 HTML。

还值得一提的是alt和title不是 SEO 属性。 您可能会将这些事情作为 SEO 审查的一部分，但这些属性是为可访问性而设计的。 如果搜索引擎也可以从中受益，那就这样吧。 归根结底，SEO 和可访问性都是为了让机器可读。

Answer 2

您应该删除标题并仅使用 alt。

所有屏幕阅读器都以不同的方式处理 alt 和 title。 它们都读取 alt，但是当 title 也存在时，它们的行为会有所不同，实际上它是可配置的（例如 Jaws 允许配置它）。

• 一些屏幕阅读器只读取 alt 而完全忽略标题
• 一些屏幕阅读器会同时阅读 alt 和 title
• 一些屏幕阅读器会同时阅读标题和 alt
• 一些屏幕阅读器会同时阅读，但前提是它们不同
• 一些屏幕阅读器只阅读两者中最长的一个而忽略另一个
• ...

这就是为什么不鼓励使用 title 的原因，因为不可能确切地知道实际阅读的内容。 alt 属性是唯一可以使用的可靠替代文本。

此外，忘记所有那些搜索引擎优化的事情。 没有人真正知道你的所作所为是否有任何影响。 这始终是纯粹的猜测。 在考虑机器之前先考虑用户。

Answer 3

如果 alt 和 title 都存在，您可以添加 aria-hidden="true"