skip to Main Content

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}
  />

2

Answers


  1. 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.

    Login or Signup to reply.
  2. you can add aria-hidden="true" , if alt and title both are present

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search