Images are not accessible to assistive technology

[steverep]

The images used for age, adoption, passing, and confidence level are not accessible to screen readers. Currently, the markdown looks like:

![age](...)

The text in the square brackets should be useful alternative text. Just repeating the title is not describe the meaning of the image. The markdown simply needs to be adjusted to reflect actual age, percentage, or confidence level.

[rarkins]

Unfortunately I'm not sure this is achievable.

Renovate inserts the markdown with the help of this preset, and it is static.

Then the image itself is rendered dynamically from a separate backend.

Even if it were possible for Renovate to insert actual values into the markdown:

• Such values could only be adjusted any time Renovate runs (so they would often be "wrong"/contradicting what's in the image)
• It would mean PR content might be updated 100s of times in their life as the values change. The PRs would show up as edited/"last updated" recently at most times

This sounds like a shared problem for all types of badges inserted into markdown. Are you aware of any solutions where badges in Pull Requests have their text updated dynamically?

[steverep]

The SVG generated is actually already accessible with appropriate text (they include role="img" aria-label="..." and also have a <title>). The problem is that info cannot make it into the document using an <img> element. It needs to instead be embedded using <object>, <iframe>, or possibly even nested in another <svg>. I'm not sure which, if any, of those GH markdown will allow.

[HonkingGoose]

We should definitely make the badges accessible to screen readers!

Such values could only be adjusted any time Renovate runs (so they would often be "wrong"/contradicting what's in the image)

Right now screen reader users don't know anything about the content of the images. I would prefer some information, even if outdated, over having no information. Ideally the screenreader matches the image.

How about adding a warning to the PR body about the accessible text not always matching the "image text"?

It would mean PR content might be updated 100s of times in their life as the values change. The PRs would show up as edited/"last updated" recently at most times

GitHub allows you to filter out Issues or PRs based on the author, for Renovate you need the author:app prefix and the - NOT logical operator. For example: is:open is:pr -author:app/renovate. Here's an example that lists all PRs on the renovate repository, except those from the Renovate app. We could add an explanation about filtering PRs in the PR body text, and our docs. This helps those who are annoyed that Renovate bumps the PR body text. 😄

I'm not sure which, if any, of those GH markdown will allow.

I think the only way to find out is to try to mock up each of the methods you listed. I don't know enough to mock this up myself though.

---

I wonder why we don't drop images and use plain text, that would solve the accessibility problem. @rarkins can you explain why you, or your team, picked images instead of text?

[rarkins]

@rarkins can you explain why you, or your team, picked images instead of text?

Plain text within PR bodies would be inefficient because it requires the PR body to be updated every time the value changes. e.g. initially a new version would have 0% adoption, then 1%, then 2%, etc. The PR would be "out of date" regularly, and then needing to be edited potentially dozens of times. Instead, images can be updated. Pretty standard reason why people use badges.

Same applies to the original request - Renovate would need to increase its API use on GitHub dramatically and run much more often in order to keep values updated.