A chart is a visual way of presenting information. A chart helps the user understand complex information.
Pay attention to the type of chart; not all information is suitable for the same chart. A chart can be an image on the page or it can be interactive.
Bring information related to the chart, such as numbers, as close as possible to the elements of the chart. This helps the user grasp the content.
If understanding the chart does not require interactivity, a static image of the chart might suffice.
If the content of the chart updates automatically or if it contains a lot of data, an interactive chart is often a better choice.
It is good to note that a chart added as an image is generally faster to load and does not require additional chart libraries on the site.
Pay attention to where the chart is displayed. In mobile size, the image can become very small, and it is good to keep this in mind.
Make sure the text is not too small.
Ensure that you use descriptive titles and, if necessary, other descriptions to help people understand the chart.
When working with interactive charts, it is important to choose an accessible implementation. If the interactive chart is not accessible, some users may miss essential information.
Some chart implementations may automatically provide, among other things, a tabular alternative content. Familiarize yourself with different chart providers and choose the one that best fits your needs. If the information is not directly available on their site, ask the chart providers about the accessibility of their implementations.
Every chart must have a text alternative so that it can be understood without seeing the chart.
You will get the best text alternative by utilizing multiple methods:
The text alternative must describe the content of the chart in a way that its content can be understood.
The recommended maximum length for the alternative text of an image is about 150 characters. Therefore, it should not be a very long explanation. If the text is longer, leave the alternative text empty and add the description as a caption or alongside the text content.
Different parts of the chart can be distinguished from each other by colors only if there are very few of them. The contrast between each used color and the background color must be at least 3:1.
However, it is generally advisable to also use other means, such as:
Make sure the chart image also has a background color. That way the image stays readable regardless of the user's color theme.
Test the chart without colors. If the chart is understandable without colors, it is very likely visually accessible.
Choose the type of chart based on the information being presented.
Choose a pie chart if you are presenting parts or percentages:
Generally, the recommendation for a pie chart is fewer than 5 sections, but there are often exceptions to this.
Do not use a pie chart if the intention is to compare two charts with each other. Comparing pie charts is difficult for many.
Choose a line chart when you are presenting continuous data or data over a period.
Choose a bar chart, for example, when comparing values from different categories.