digitalfabrik
Hide links to images without alt-tag for screen readers
Motivation
The problem are images that don't have an alt-tag, we automatically give them an alt-tag of an empty string. That then means that a screen reader skips them. But the images are wrapped in an anchor tag linking to the image location. Since those anchor tags don't have any text to read out (remember, the content of the anchor is an image that the screen reader skips), the screen reader reads out the last part of the address of the image, which is the name that the file had when it was uploaded. That's pretty confusing.
Proposed Solution
We decided in the weekly tech meeting that images that don't need to be described by the screen reader also don't need to have the ability to click on them, especially since the linking to image location is mainly so that a user can enlarge the picture. If the picture isn't important to see, a bigger version of it is unlikely to be important either.
The way to do that is to add the attribute aria-hidden="true" to the surrounding anchor tag.
So the idea is: if an image has no alt-tag or an alt-tag of an empty string, also give it an aria-hidden="true".
Alternatives
We could also remove the links entirely for images without an alt-tag since those probably don't need to be enlarged.
User Story
Additional Context
We also discussed this in https://github.com/digitalfabrik/integreat-app/pull/2765
Could you assign this issue to a milestone?
We had a chat and agreed that is a nice-to-have in the near future, but not urgent. Therefore I added it to 24Q4
