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.

Sign up for GitHub

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

Jump to bottom

Social Media Widget Icons WAI-ARIA Role of "img" Fails Accessibility Checks #12338

Closed
kellyhelming opened this issue May 10, 2019 · 0 comments · Fixed by #12339
Closed

Social Media Widget Icons WAI-ARIA Role of "img" Fails Accessibility Checks #12338

kellyhelming opened this issue May 10, 2019 · 0 comments · Fixed by #12339
Assignees
@jeherve
Labels
[Feature] Extra Sidebar Widgets [Focus] Accessibility Improving usability for all users (a11y) [Pri] Normal [Type] Bug When a feature is broken and / or not performing as intended
Milestone
7.4

Comments

@kellyhelming
Copy link

Is your feature request related to a problem? Please describe.

Please amend the WAI-ARIA role to comply with WCAG requirements: https://www.w3.org/TR/WCAG20-TECHS/ARIA6.html

1.1.1 Non-text Content
Description of this issue:
The WAI-ARIA image, created with role="img", does not have an accessible name.

Describe the solution you'd like

How to fix it:
If the image is informative or functional, use either the WAI-ARIA attribute 'aria-label' or 'aria-labelledby' to create an alternative text for the image.

If the image is purely decorative, use the WAI-ARIA attribute role="presentation" instead of role="img" for the image. This will cause assistive technologies to ignore the image.

Describe alternatives you've considered

This solution was tested with via Chrome's "inspect" with Siteimprove's checker plug-in. When the role was changed from "img" to "presentation", the errors cleared.

Additional context

Screen Shot 2019-05-10 at 9 21 32 AM
@jeherve jeherve added [Pri] Normal [Type] Bug When a feature is broken and / or not performing as intended [Focus] Accessibility Improving usability for all users (a11y) [Feature] Extra Sidebar Widgets labels May 10, 2019
@jeherve jeherve self-assigned this May 10, 2019
@jeherve jeherve added this to the 7.4 milestone May 10, 2019
@jeherve jeherve changed the title Jetpak Social Media Widget Icons WAI-ARIA Role of "img" Fails Accessibility Checks Social Media Widget Icons WAI-ARIA Role of "img" Fails Accessibility Checks May 10, 2019
jeherve added a commit that referenced this issue May 10, 2019
@jeherve
Social Icons SVG: switch to the presentation role
22ef0cb 
Fixes #12338

Since the image is mostly decorative, and since we already hide it from screen readers with `aria-hidden="true"`, let's also set it as a decorative element.
@jeherve jeherve mentioned this issue May 10, 2019
Merged
jeherve added a commit that referenced this issue May 13, 2019
@jeherve
Social Icons SVG: switch to the presentation role (#12339)
a220a56 
Fixes #12338

Since the image is mostly decorative, and since we already hide it from screen readers with `aria-hidden="true"`, let's also set it as a decorative element.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@jeherve jeherve

Labels
[Feature] Extra Sidebar Widgets [Focus] Accessibility Improving usability for all users (a11y) [Pri] Normal [Type] Bug When a feature is broken and / or not performing as intended
Projects
None yet
Milestone
7.4
Development

Successfully merging a pull request may close this issue.

Social Icons SVG: switch to the presentation role Automattic/jetpack
2 participants
@jeherve @kellyhelming