Accessibility

Victory provides a number of features to make your charts more accessible. This guide will walk you through some of the most important features.

Basic

Containers like VictoryChart set the role attribute to img and expose the desc prop to provide a description of the chart for screen readers.

Chart types like VictoryLine and VictoryBar expose aria props like aria-label to provide additional context for screen readers. Adding a tabIndex attribute will make the data components focusable. (click on chart and press TAB key to focus)

Live View

Live Editor

<VictoryChart
  aria-label="Simple Chart One"
  desc="Simple Chart One Description"
  domainPadding={{ x: 20 }}
  theme={VictoryTheme.clean}
>
  <VictoryBar
    ariaLabel="Bar Chart One"
    desc="Bar Chart One Description"
    data={[
      { x: 1, y: 2 },
      { x: 2, y: 3 },
      { x: 3, y: 5 },
      { x: 4, y: 4 },
      { x: 5, y: 7 },
    ]}
    dataComponent={
      <Bar
        ariaLabel={({ datum }) =>
          `x: ${datum.x}`
        }
        tabIndex={0}
      />
    }
  />
</VictoryChart>

Groups

Use VictoryAccessibleGroup to wrap a group of chart components. This will add a role="group" attribute to the SVG element, which will make the chart more accessible to screen readers. Adding a tabIndex attribute will make the group focusable. (click on chart and press TAB key to focus)

Live View

Live Editor

<VictoryChart
  desc="Simple Chart Two"
  domainPadding={{ x: 20 }}
  theme={VictoryTheme.clean}
>
  <VictoryStack
    groupComponent={
      <VictoryAccessibleGroup
        aria-label="Group Description Two"
        desc="Group Description Two Description"
      />
    }
  >
    <VictoryBar
      ariaLabel="Bar Chart Two"
      desc="Bar Chart Two Description"
      data={[
        { x: 1, y: 2 },
        { x: 2, y: 3 },
        { x: 3, y: 5 },
        { x: 4, y: 4 },
        { x: 5, y: 7 },
      ]}
      dataComponent={
      <Bar
        ariaLabel={({ datum }) =>
          `x: ${datum.x}`
        }
        tabIndex={0}
      />
      }
    />
    <VictoryBar
      ariaLabel="Bar Chart Three"
      desc="Bar Chart Three Description"
      data={[
        { x: 1, y: 2 },
        { x: 2, y: 3 },
        { x: 3, y: 5 },
        { x: 4, y: 4 },
        { x: 5, y: 7 },
      ]}
      dataComponent={
      <Bar
        ariaLabel={({ datum }) =>
          `x: ${datum.x}`
        }
        tabIndex={0}
      />
      }
    />
  </VictoryGroup>
</VictoryChart>

Basic​

Groups​

Basic

Groups