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
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).
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.
you can add aria-hidden="true" , if alt and title both are present