🎩 What? Why?

There are several issues with the WAI-ARIA roles for the SVG icon images in Decidim:

• Apparently the double role none presentation is not allowed in all accessibility audit tools although it is a suggested implementation in some resources. The reason being that not all browsers understand the double role. According to role="none presentation" should not be a violation dequelabs/axe-core#1462 we should use role="presentation" aria-hidden="true" for these cases.
• When using <svg role="img">, the images always need an aria-label as an alternative text (WCAG 2.1 A / SC 4.1.2)
• When we have multiple "avatar" images on the page, the ARIA labels should be unique, so add the user names to these labels.
• We cannot have links with only content being an aria-hidden SVG image. Add proper labels for these.

📌 Related Issues

• Related to Seek alternatives to design changes due to accessibility #5942, Accessibility/final #6246, Improve accessibility vol 2 #6124, Improve accessibility issues #5684

Testing

Audit the whole service using several automated accessibility audit tools.

📋 Checklist

• ❓ CONSIDER adding a unit test if your PR resolves an issue.
• ✔️ DO check open PR's to avoid duplicates.
• ✔️ DO keep pull requests small so they can be easily reviewed.
• ✔️ DO build locally before pushing.
• ✔️ DO make sure tests pass.
• ✔️ DO make sure any new changes are documented in docs/.
• ✔️ DO add and modify seeds if necessary.
• ✔️ DO add CHANGELOG upgrade notes if required.
• ✔️ DO add to GraphQL API if there are new public fields.
• ✔️ DO add link to MetaDecidim if it's a new feature.
• ❌AVOID breaking the continuous integration build.
• ❌AVOID making significant changes to the overall architecture.