Improve hellothere flex cards accessibility

[pmario]

This PR should improve the accessibility settings for screen readers. Tested with Narrator Windows-11

The PR

• Adds a new alt-text field to every image I could find. Especially those used for HelloThere - flex cards
• Improve flex-card procedure to render alt-text for images, so they can be read by screen readers
• It aria-hides the new-badge because it causes problems -- Full card text is read out 2 times

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
tiddlywiki5	✅ Ready (Inspect)	Visit Preview	Jun 30, 2024 0:31am

[Jermolene]

Great idea, thanks @pmario

[pmario]

For me it works OK, but I do not really need / use a screen reader. When I test keyboard handling, I switch it on from time to time, to see if I can reach every element in the ui. So I can hear, what narrator sees.

I found out, that it wants to read the link URLs from the flex cards, which contain all the URL escape characters like eg: %20 and so on. Which does not make real sense. So I tried to improve it.

I'll create a post at Talk and ask screen reader users if the changes actually are an improvement. So we should get some feedback there.

[CrossEye]

@pmario:

I found out, that it wants to read the link URLs from the flex cards, which contain all the URL escape characters like eg: %20 and so on.

Perhaps one day #7990 will fix this.

[pmario]

@Jermolene -- There has not been much feedback at Talk - So I think it should be merged, then we will see.

[Jermolene]

Hi @pmario there is a conflict that prevents merging

[pmario]

@Jermolene -- This is documentation only and conflicts have been resolved.

[Jermolene]

Thanks @pmario