Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix ARIA roles for the SVG images (icons) #7663

Merged
merged 6 commits into from Mar 23, 2021

Conversation

ahukkanen
Copy link
Contributor

@ahukkanen ahukkanen commented Mar 22, 2021

🎩 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

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.

@mrcasals mrcasals added the type: fix PRs that implement a fix for a bug label Mar 22, 2021
@mrcasals
Copy link
Contributor

@ahukkanen I'm not sure if this is done, ping me when it is!

@ahukkanen
Copy link
Contributor Author

@mrcasals Yes, it's done.

There's one place in admin panel which I didn't fix properly because I think I would have to add new translations.

Consider it a step forward.

@mrcasals
Copy link
Contributor

Awesome job @ahukkanen, thank you so much for all these PRs ❤️

@mrcasals mrcasals merged commit 1c16be9 into decidim:develop Mar 23, 2021
@ahukkanen ahukkanen deleted the chore/a11y-fix-img-roles branch March 23, 2021 15:16
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
type: fix PRs that implement a fix for a bug
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants