Fix ARIA roles for the SVG images (icons) #7663
Merged
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
🎩 What? Why?
There are several issues with the WAI-ARIA roles for the SVG icon images in Decidim:
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 userole="presentation" aria-hidden="true"
for these cases.<svg role="img">
, the images always need anaria-label
as an alternative text (WCAG 2.1 A / SC 4.1.2)aria-hidden
SVG image. Add proper labels for these.📌 Related Issues
Testing
Audit the whole service using several automated accessibility audit tools.
📋 Checklist
docs/
.