Success criteria

The following success criteria will help you create graphs that effectively communicate insights and are accessible for everyone. Some criteria are most relevant for designers, while others are more relevant for developers.

The criteria are put into four categories:

• Cognitive: Is the graph understandable for everyone?
• Visual: Are the visual elements possible to perceive for everyone?
• Keyboard: Can interactive charts be operated using keyboard navigation?
• Screen reader: Is all the information accessible for people using a screen reader?

Credit

The success criteria are adapted from accessibility criteria formulated by Sarah Fossheim, based on WCAG success criteria and inspired by the Chartability framework.

Cognitive accessibility

Our graphs should be easy to understand for everyone. Therefore, we use clear language and explain terminology, data, and interaction where necessary. Clear titles, descriptions, and labels can provide additional context to the data. Legends can explain categorisation, and in-line labelling and annotations can guide the user.

1. Use plain language

Avoid long and complicated words. Explain abbreviations that readers might not be familiar with.

2. Include a descriptive title

Clarify what the graph represents. For example, what data or variables are presented. You may also include the main message or key takeaway of the graph.

3. Provide a summary or description

If not articulated in the title, include information about the data or variables presented. If possible, include a description of the main insight of the graph.

4. Use clear data labels

A data label is a text element that explains the data point or value you are examining. Where possible, labels should be in-line (close to the number or visual data element). If data labels are presented on hover, they should also be accessible via keyboard navigation and for screen readers.

5. Explain colour coding

Ensure to explain colour-coded categories in the graph and use a legend if necessary.

Whenever feasible, avoid using a legend and label data directly. For legends to be effective, the user must be able to associate the legend with corresponding elements in the chart, which can be challenging for many.

You don't need a legend if you only have one data category.

6. Communicate statistical uncertainty

If there is uncertainty in the underlying data, this should be communicated to the user, in text and/or visually.

7. Provide context

Numbers in isolation can be challenging to comprehend. Consider whether it's easier to understand the information if you provide context. For example:

• Historical trend: Are we doing better than last week?
• Compared to others: Are we doing better than average?
• Compared to something relatable. Example: Emissions compared to the number of people flying London–New York is easier to understand than tonnes of CO2.

8. Label the axes

Clarify what the axes represent, preferably using a text label next to the axes.

9. Explain unconventional charts

You can assume that most people know how bar charts or line charts work. But you're using an unconventional or uncommon chart, ensure that the users receive an explanation of how to interpret it.

10. The data/chart is not misleading

Ensure that the data is collected, calculated, and filtered in a truthful way. For example, be aware of any gaps or biases in the dataset.

When presenting the data, make it clear:

• Where the data originates from
• What is included and excluded
• If there might be any gaps or biases in the data.

Also, make sure to choose a chart type that is appropriate for displaying the data.