Hide links to images without alt-tag for screen readers

[LeandraH]

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

[MizukiTemma]

@LeandraH Could you assign this issue to a milestone?

[JoeyStk]

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