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

Question

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

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

Answer 1

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

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

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

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

此外，忘记所有 SEO 的事情。没有人真正知道你所做的事情是否有任何影响。这始终是纯粹的猜测。在考虑机器之前首先考虑用户。