Navigating Through Charts on Screen Reader

When the screen reader is enabled, a user can navigate through the chart using the computer arrow keys and will describe the contents of the chart such as the x-axis, y-axis, and data points of the chart.

All of these chart types are also accessible outside of Quorum as we can save them as SVGs. SVGs are scalable vector graphics which give us the ability to maintain accessible features including being able to resize our charts and using the arrow keys to navigate through the individual parts. We will discuss how to save our charts later in the tutorial.

To view the chart we just created, feel free to display it using the following on Quorum Studio:

BarChart chart = frame:BarChart()
chart:SetColorPaletteToCalm() // will create a softer and cooler color palette
chart: SetColorPaletteToColorgorical // uses the constructed color palettes references by article
chart:SetColorPaletteToExciting // will create a bright and vibrant color palette

Run the Program

This runnable example demonstrates how to use the accessibility features with charts. Note that we must have screen reader enabled to go through all the individial parts of the chart.

For this example, the data may not make sense to the chart type. However, we will be discussing what makes a good chart in the next section.

In order to use accessible navigation within the IDE, we want to use the up, down left, and right arrow keys to access individual columms of the charts. The up and down arrows will access the smaller individual parts of a chart such as names and points/bars. The left and right arrows will navigate sections such as the legend, the axis, and the chart itself. You will want to use your up and down arrow keys to indiviually read each piece of the chart when screen reader is enabled.

Next Tutorial

In the next tutorial, we will discuss Good Charts, which describes how to make good charts as a data scientist.