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

Question

I have an image element with title and alt attributes that is required for SEO optimization. But when the user hovers over the image. The screen reader (NVDA) reads the image and alt text even if they have the same text. I need to find a way to make the screen reader ignore one of them especially alt. Does anyone know a solution? Thanks

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

Answer 1

You generally shouldn't have an alt attribute and a title attribute on the same image. It's not invalid, but it doesn't make much logical sense, considering that they do many of the same things. Many browser/screen-readers will also read both, one after the other, which can be a less than ideal experience.

There is a visual component to title where it will appear on hover (which alt doesn't have), but it's not usually clear which elements can be hovered over to produce a tooltip and which can't.

It's also worth noting that title is made for advisory information, whereas alt is made for a textually equivalent description of an image.

For these reasons, I think it's usually best to just avoid the title attribute unless you have some really good reason to be using it and use alt instead. I would remove the title attribute on your image since alt takes precedence in the accessible name computation .

If you really want to, you can remove alt and just have the title attribute. It's not typically the done thing, and some automated checkers may complain about this, but it is valid HTML.

It's also worth mentioning that alt and title aren't SEO attributes. You may be doing these things as part of an SEO review, but these attributes are designed for accessibility. If search engines can also benefit from them, then so be it. At the end of the day, both SEO and accessibility are about making things machine-readable.

Answer 2

You should remove the title and use only alt.

All screen readers handle alt and title differently. They all read alt, but when title is also present, their behavior differs and in fact it's configurable (for example Jaws allow to configure that).

• Some screen readers read only alt and totally ignore title
• Some screen readers read both, alt and then title
• Some screen readers read both, title and then alt
• Some screen readers read both but only if they are different
• Some screen readers read only the longest of the two and ignore the other one
• ...

This is the reason why using title is discouraged, as it's impossible to know exactly what will actually be read. The alt attribute is the only reliable alternative text to use.

Additionally, forget about all that SEO thing. No one really knows if what you do has any influence. This is always pure speculations. Think first about users before thinking about machines.

Answer 3

you can add aria-hidden="true", if alt and title both are present