Skip to content

Commit 9f6bb82

Browse files
Apply suggestions from code review
Co-authored-by: Sarah <[email protected]>
1 parent 7ff7fe1 commit 9f6bb82

File tree

1 file changed

+11
-11
lines changed
  • packages/paste-website/src/pages/foundations/data-visualization/for-engineers

1 file changed

+11
-11
lines changed

packages/paste-website/src/pages/foundations/data-visualization/for-engineers/accessibility.mdx

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -58,29 +58,29 @@ export const getStaticProps = async () => {
5858
</Callout>
5959
</Box>
6060

61-
Highcharts offers an accessibility module which we recommend always enabling. If using our [BaseChart](foundations/data-visualization/for-engineers#basechart) implementation this is taken care of. It provides many useful features that help visually impaired users interact and understand charts. More information on this module can be found [here](https://www.highcharts.com/docs/accessibility/accessibility-module). Features that are offered are:
62-
- Announces chart meta data such as title, subtitle, and description.
63-
- Allows keyboard navigation of series, points and legend items.
61+
Highcharts offers an accessibility module which we recommend always enabling. If using our [BaseChart](foundations/data-visualization/for-engineers#basechart) implementation, this is taken care of. It provides many useful features that help visually impaired users interact and understand charts. More information on this module can be found on [Highcharts docs](https://www.highcharts.com/docs/accessibility/accessibility-module). Features that are offered are:
62+
- Announces chart metadata such as title, subtitle, and description.
63+
- Allows keyboard navigation of series, points, and legend items.
6464
- Describes series when focused.
6565
- Describes points when focused.
6666
- Announces the legend item when focused and describes whether the series is hidden or shown.
67-
- Toggle series visibility via keyboard.
67+
- Toggles series visibility via keyboard.
6868
- Switching from series the legend items announces they are used to toggle series along with title of chart.
6969

70-
## Announcements
70+
## Screen reader announcements
7171

7272
The accessibility module provides announcements by default for the series and point formatters. These can be overridden by passing additional props. See below for more details. Note that the default formats are in English only - any translations would need to be overridden.
7373

74-
- When switching points, announce the point index and x axis then value. 2 (point 2) x 3 (x axis = 3) 8105 (y value) Installation [series name].
75-
- When focusing on a series, announce series name, sereis position of total and how many points. e.g. Installation, line 1 of 2 with 8 data points.
74+
- When switching points, announce the point index, _x_-axis, value, and series name. Example: "2, _x_ 3, 8105, Installation", which means it is the 2nd point in the series, with _x_-axis = 3, and a value of 8105 (_y_-axis) in the series "Installation".
75+
- When focusing on a series, announce the series name, series position of total, and how many points. Example: "Installation, line 1 of 2 with 8 data points."
7676

77-
### Customizing Announcements
77+
### Customizing announcements
7878

7979
To override the default announcements you can set the `accessibility` attribute in the support options of the [Chart Provider](components/chart-provider/api#charttypeoptions)
8080

81-
The point and series will be passed to the `descriptionFormatter` to retrieve the correct values such as axis values and series names.
81+
The point and series will be passed to the `descriptionFormatter` to retrieve the correct values, such as axis values and series names.
8282

83-
## Example
83+
## Custom example
8484

8585
Below is an example of a chart with custom `descriptionFormatter` for the series and point. The title and sub title are both specified but hidden. They will still be included in the screen reader announcements to give context to visually impaired users but not be visible on the chart.
8686

@@ -98,7 +98,7 @@ If you inspect the rendered chart element you will see that an aria-label is app
9898

9999
## Notes
100100

101-
- When focusing on points the tooltip is not announced by screen readers. Instead the point description is read out. If you have key information in the tooltip be sure to include it in the `point.descriptionFormatter`.
101+
- When focusing on points, the tooltip is not announced by screen readers. Instead the point description is read out. If you have key information in the tooltip, be sure to include it in the `point.descriptionFormatter`.
102102

103103
</content>
104104

0 commit comments

Comments
 (0)