(a11y): Add img alt tags / aria-hidden

[programmiri]

Description

Most of our images currently have "image" as alt text. This text is relevant especially for screen reader users. We should give those users the same additional context and information like others.

Todo

• check if it's possible to add aria-hidden to images via markdown - purely decorative images don't need an alt text for most screen readres
  • Important: Not all screen reader support aria-hidden, so the images still need an alt text
• add valuable descriptions to images

[mathieu-anderson]

There is no way to provide aria-hidden to an md image tag indeed. However, if we use mdx, we can use an Image react component inline, which will have access to all props on the HTML img tag. It is more work, though, as the path to the static asset will only be correctly resolved if we import the asset in the mdx file (there might be another solution, but I have not come across it).

This is the implementation poc: 2fcf9db

You can see the imports here: 2fcf9db#diff-3ffb4186dc0c5cce43288759b74bda3442b6c4fc2e821fe8016dc6ee66bcb8d6R9-R11

And a usage of the component here: 2fcf9db#diff-3ffb4186dc0c5cce43288759b74bda3442b6c4fc2e821fe8016dc6ee66bcb8d6R90-R93

The result looks like this:

Screen.Recording.2023-09-21.at.10.39.41.mov

Should we pursue this, or should we forgo aria-hidden and only provide good alt text?

I think probably the most critical issue is the alt text. We can refine our approach afterwards.