victory

victory copied to clipboard

Describe the bug A clear and concise description of what the bug is. Alternative text is not provided for Graphs images. The Edge stats graphs should be having accessible name assigned. Screen reader Users fails to get exact information while navigating through Graphics Stats charts.

Victory version Which npm version are you using? 0.26.1

Code Sandbox link Please include a code sandbox link or a similar reproduction if possible. Victory | VictoryLegend (formidable.com) Victory | VictoryChart (formidable.com) To Reproduce Steps to reproduce the behavior:

1. Open the Above URL.
2. Verify whether the Alternative text is provided for the Graphs images or not.

Expected behavior The Victory graph images should have alternative text information to meet Accessibility compliant standards.

Screenshots If applicable, add screenshots to help explain your problem. (You can exclude this if you included a reproduction)

Desktop (please complete the following information):

• OS: Windows11 Enterprise version: 22621.1992
• Browser: Edge
• Version: 115.0.1901.188 (Official build) (64-bit)
• Application: Issues | Perf Lab | Edge Team

Hi @msabree, Any update on this issue?

@msftedad Are you looking for the aria-label property? https://formidable.com/open-source/victory/docs/new#accessibility-features

This issue is stale because it has been open for 90 days with no activity. If there is no activity in the next 7 days, the issue will be closed.

This issue was closed because it has been inactive for 7 days since being marked as stale. Please open a new issue if you believe you are encountering a related problem.

Hi @carbonrobot, Issue is that graph and images do not have alt-text. Check the guideline to understand the requirement Understanding Success Criterion 1.1.1: Non-text Content | WAI | W3C

Thanks @msftedad, I believe we already support that by the following techniques, suggested later in the doc.

ARIA6: Using aria-label to provide labels for objects and ARIA10: Using aria-labelledby to provide a text alternative for non-text content as well as ARIA15: Using aria-describedby to provide descriptions of images for long form content.

Example:

<VictoryBar
    horizontal
    style={{ data: { fill: "#c43a31", opacity: 0.9 } }}
    data={accessibilityGroupData.b}
    groupComponent={
      <VictoryAccessibleGroup
        aria-label="victory bar group 2"
        desc="accessible bar chart group 2"
        aria-describedby="accessible bar chart group 2 aria description"
        tabIndex={67}
      />
    }
  />

This applies a <g> tag to the rendered chart and assigns an aria-label and aria-describedby field for accessibility.