Search code examples
htmlreactjsaccessibilitynvda

Screen reader NVDA read image title and alt. Need that the reader read only title and ignore alt


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

Solution

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