1
Hello my question is about accessibility: I am making the accessibility of a page and in it I have an image with a link, I am using the Jaws screen reader to go through all defined elements.
One of these elements is this image with link, I need that when arriving at this element (using TAB) the screen reader read the ALT of this image.
<a href="javascript:;" class=""><img src="imagem-qualquer.jpg" width="54" height="54" alt="Descurtir" title="Descurtir">
</a>
2
Jose you are using the aria-hidden as true, in that case the screen reader will ignore its element! Remove the Aria-Hidden that the Alt should work again.
User Agents determine an element’s Hidden status based on whether it is rendered, and the Rendering is usually Controlled by CSS. For example, an element Whose display Property is set to None is not rendered. An element is considered Hidden if it, or any of its ancestors are not rendered or have their Aria-Hidden attribute value set to true.
SOURCE: https://www.w3.org/TR/wai-aria/states_and_properties#Aria-Hidden
Here is a check list of Webaim that is very nice for you to understand how the screen reader interprets the image and its attributes https://webaim.org/articles/nvda/images.htm
Another thing, consider using the tag it is more semantic and has more attributes. See the example. (vc don’t need to use figcaption, or you can use css to take it off the screen, but make it visible to the screen reader)
<figure aria-labelledby="nome-da-img" role="img">
<img src="nome-da-imagem.jpg" alt="Descrição completa da imagem">
<figcaption id="nome-da-img">Descrição da imagem</figcaption>
</figure>
Here you can read more about Role, Type and Alt: https://www.w3.org/WAI/PF/HTML/wiki/RoleAttribute
Browser other questions tagged accessibility
You are not signed in. Login or sign up in order to post.
Hugocsl, not this with Aria-Hidden, I’ve used the Aria-labelledby, but it has no effect, this screen is all mounted by one . js, maybe that’s why there’s something stopping, I appreciate the help.
– josecarlos
@josecarlos in the quote I posted speaks like this: "An element is considered Hidden if it, or any of its ancestors are not rendered or have their Aria-Hidden" That means if the element’s FATHER has
aria-hidden="true" o filho vai ser ignorado pelo leitor de telaand in your code the image is inside a link witharia-hidden="true"<a href="javascript:;" class="" aria-hidden="true"> <img> </a>– hugocsl
hugocsl, yes vdd, but it was a test I did, with and without Aria-Hidden, but it did not have an expected effect, the reader informs as graphic and putting Aria-Hidden="true" and he ignores this information. Thanks.
– josecarlos
Jose take the Aria-Hidden="true" from the Link then put tabindex="0" in the <img> type like this
<a tabindex="0" href="javascript:;" class="" role="link" aria-label="Descurtir"><img tabindex="0" src="imagem-qualquer.jpg" width="54" height="54" alt="Descurtir" aria-labelledby="Descurtir"></a>If this doesn’t work it’s because there’s something else stopping Jaws from reading. I advise you to try it with another screen reader.– hugocsl
Hugocsl, I have tested without the Aria-Hidden="true", it has no effect, it is another thing that this preventing, I have tested with the NVDA tmb and it works.
– josecarlos