屏幕閱讀器 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"