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 accessibility issue: <svg> elements with an img role must have an alternative text #477

Merged
merged 2 commits into from
Dec 11, 2024

Conversation

nali-github
Copy link
Collaborator

@nali-github nali-github commented Dec 9, 2024

Description

Fix accessibility issue: <svg> elements with an img role must have an alternative text

Related Issue

#474

Motivation and Context

AEP- Sky Kraken team has using Basic bar, Line, Donut chart to render dashboards. (Area, Scatter, BigNumber might be in the future.) We got accessibility issue tickets like: PLAT-182431 and PLAT-188199 that complains aria-label, which is also applicable for RSC charts.

In this PR, I covered the charts that we are using and going to use.

How Has This Been Tested?

Verified on preview story book, there is no <svg> elements with an img role must have an alternative text issue from axe DevTools for related chart types.

Screenshots (if appropriate):

Screenshot 2024-12-09 at 2 53 57 PM

Types of changes

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

  • I have signed the Adobe Open Source CLA.
  • My code follows the code style of this project.
  • My change requires a change to the documentation.
  • I have updated the documentation accordingly.
  • I have read the CONTRIBUTING document.
  • I have added tests to cover my changes.
  • All new and existing tests passed.

@nali-github nali-github mentioned this pull request Dec 9, 2024
10 tasks
Copy link

sonarqubecloud bot commented Dec 9, 2024

Copy link

github-actions bot commented Dec 9, 2024

@nali-github nali-github marked this pull request as ready for review December 9, 2024 23:08
@nali-github nali-github changed the title Fix accessibility issue Fix accessibility issue: <svg> elements with an img role must have an alternative text Dec 9, 2024
@frankelavsky
Copy link

I love to see work on an accessibility-related issue!

But worth noting: The issue mentioned affects <canvas> elements with role="image" as well as <svg>, so changing the rendering type might cause unexpected results for users who leverage screen readers. And worse: devs might not realize that their accessibility is lost when changing rendering type.

However, feedback on the PR: "line0" repeating is not a good solution for the aria/alt for chart elements. This is not descriptive of the contents of this line and all lines have the same text "line0." The real solution here would provide rich, data-driven descriptions for each line segment and possibly also datapoints within the line.

That being said, I've already forked the repo and will be working on a prototype closely related to this leveraging data-navigator over the next several weeks into late Jan. Goals are to enable not only root-level description but also rich navigation and descriptions within the chart space too (lines/marks/derived groups/etc).

Screen reader caption: Line0, line mark container. VoiceOver screenshot navigating a line chart.

@marshallpete marshallpete merged commit b690296 into main Dec 11, 2024
6 checks passed
@marshallpete marshallpete deleted the nli1/chart-aria-label-fix branch December 11, 2024 16:24
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants