<a href="#" role="button" >
<span aria-hidden="true"> First</span>
<img src="D:/kk.JPG" alt="First name" width="20px" height="20px"/>
</a>JAWS reads it as First First name button instead of First name button.
Is this a Firefox issue? How do I resolve this without using aria-label for the outer anchor tag.
The problem, here, is that JAWS does not consider this element itself, but it is used in the calculation of the text alternative for the link.
To solve this, you can try to remove the redundant text from the img alternative name.
I would make a guess on the pertinence of the image alt here as it is inside a link with other text, so you don't have to describe the image but the purpose of the link.
Of course, if you hadn't said so, I would have suggested to use aria-label.
See the following page: webaim.org/blog/alt-text-and-linked-images In the above example, because text within the link provides the content of the image and the function of the link, the image itself can be given an empty alt value. An image within a link is something very specific: you don't have to consider the image alternative but the link alternative.
According to WCAG, when an image is the only element inside a link, it should describe the purpose of the link. When you use aria-hidden=true on the only other element, you fall in this situation. As a consequence: the alt for this image should describe the purpose of the link and you have to forget about the description of the image. That's being said, as this does not work in Jaws/Firefox, if you can remove the redundant part, it's the best option