Accessibility requirements for information visualisations PDF Free Download
1 / 26/26
100%
GENERAL INVITATION TO TENDER
OP/2023/OP/0042
Production of audiovisuals, mobile applications,
electronic publications based on HTML, video games,
applications based on Virtual Reality and Augmented Reality
technologies, and
publications with interactive information visualisations
Technical annex III
Accessibility requirements for information visualisations
Ref. Ares(2024)2625439 - 10/04/2024
Accessibility requirements for information visualisations
TABLE OF CONTENTS
1. How accessibility success criteria apply for data visualization ................................... 2
2. Accessibility of interactive charts using Webtools .................................................... 12
2.1. Alternative Text for charts ............................................................................... 13
2.2. Distinguishable information in the charts ........................................................ 16
2.3. Implementing Keyboard Accessibility ............................................................ 20
2.4. Make your Chart Readable .............................................................................. 22
2.5. Make your Chart Predictable ........................................................................... 23
3. Table of Figures ......................................................................................................... 24
4. Table List ................................................................................................................... 24
5. References.................................................................................................................. 24
1. How accessibility success criteria apply for data visualization
Some of the accessibility standards from the WCAG (1) guideline applies to the data visualization. We summarize a list of recommendations useful to
apply these criteria when creating an accessible data visualization. As a general recommendation, you should be familiar with the most common assistive
technologies using by users with specials needs to access to your visualization. Knowing how these technologies work it’s a better way to understand
how to prepare your content to be accessible.
Table 1: Accessible Data Visualization Recommendations.
Accessible Data Visualization Recommendation Success Criteria (WCAG) Level Reference Source
(1) Alternative Text and available data for data visualization
(a) Provide an alternative text
When the image cannot be seen, the alternative text can be
accessed by assistive technologies as screen readers that read
alt text out loud.
Provide a succinct text description that clearly explains what a
chart is showing and help users to understand the content.
Introduce properly your data.
An alt text should contain the chart type, a takeaway title, data
that is presented, the main conclusion, and when possible, the
link to the dataset.
The text description is usually best placed in visible text
around the chart to be accessed by all users.
Ensure major elements, such as the horizontal and vertical
axis, are identified.
(b) Provide a supplemental format for the data.
Present the chart’s data in multiple formats: CVS or other
machine-readable data formats, allowing people consume the
1.1 Text Alternatives
Provide text alternatives for any non-text content so
that it can be changed into other forms people need,
such as large print, braille, speech, symbols, or
simpler language.
1.1.1 Non-text Content:
All non-text content that is presented to the user has
a text alternative that serves the equivalent purpose.
A WCAG 1.1.1
3
Accessible Data Visualization Recommendation Success Criteria (WCAG) Level Reference Source
information in the way that best suits their needs. For
example, provide a link to a CSV data and make the data
available in an accessible table format.
If using interactive charts, don't hide important data behind
interactions.
(2) Adaptable
Make sure that the information in the visualization can be
determined by software, then it can be presented to users in
different ways (visually, audibly, tactilely etc.).
For example, haptics feedback can help users feel the ups and
downs of a line graph or the height of a bar graph against
gridlines. Sonification can help to represent change in data
(2).
Other useful tools are the natural language generation and
Interactive query models that could be used to create a
description of a graph. It can make the screen reader’s users to
interact, ask question and control how much information to
extract from the chart. There are currently libraries with the
plugins to use these tools to create web-accessible graphs (3)
(4).
1.3 Adaptable
Create content that can be presented in different
ways (for example simpler layout) without losing
information or structure.
1.3.3 Sensory characteristics:
Instructions provided for understanding and
operating content do not rely solely on sensory
characteristics of components such as shape, colour,
size, visual location, orientation, or sound.
A WCAG 1.3.3
(3) Make the visualization easy to perceive.
Make it easier for users to separate foreground information
from the background in the chart.
1.4 Distinguishable
Make it easier for users to see and hear content
including separating foreground from background.
4
Accessible Data Visualization Recommendation Success Criteria (WCAG) Level Reference Source
Ensure text is readable. Use sans-serif font and avoid italic
styles to make the text on your chart easier to read. Make sure
the text is not obstructed by other chart elements. And avoid
the use of vertical text.
(a) Label data directly
Using direct labels instead of legends increases the
readability.
Chart legends should be avoided by labelling the data
individually. This reduces the cognitive effort to scanning and
matching the legend with the data.
(b) Use patterns
Add an additional visual indicator, such as a pattern, shape, or
text label so that users will still be able to understand the data
when not perceive colour. Be careful not to overdo patterns
and keep them simple and clear. Patterns, dashed lines, can be
helpful to distinguish between similar elements.
(c) Use single axis
Don’t create charts with two X or Y axis. Put two charts
below or next to each other instead.
(d) Use an accessible colour palette
Make sure use colours that are legible for people with colour
vision deficiencies. Do not rely on colour alone to convey
information in the chart. Colours can be indistinguishable by
people with various forms of colour blindness.
Avoid using the following colour combinations:
red/green/brown; pink/turquoise/grey; purple/blue.
1.4.1 Use of Colour
Colour is not used as the only visual means of
conveying information, indicating an action,
prompting a response, or distinguishing a visual
element.
A WCAG 1.4.1
5
Accessible Data Visualization Recommendation Success Criteria (WCAG) Level Reference Source
(e) Use a single hue palette
When possible, try to use a single-hue palette
to help to
eliminates the problems of colour perception.
Be careful to have a limited number of shades to have enough
contrast between neighbouring colours.
(f) Avoid legends
Chart legends (usually based on colours) should be avoided
and replaced by labelling the data individually. Some users
may have difficulty matching colours within the plot to those
in the legend.
If legend must be used, we should use other information like
patterns alongside colour.
(g) Leverage white space
Use white space to avoid graphic can feel overwhelming and
unreadable. Don’t overuse lines grids. Make it distinguishable
without relying only on colour. The white space can also be
used to separate sections of the data (e.g., white divider line).
(h) Make a dark version of your visualization
People with sensitivity to light usually struggle with light
themes. A dark theme reduces glare and blue light.
(i) Check for colour contrast
Make sure all chart labels and elements have at least a 4.5 to 1
contrast ratio with the background colour. There are several
1.4.3 Contrast (Minimum)
The visual presentation of text and images of text
has a contrast ratio of at least 4.5:1, except for the
following:
AA
WCAG 1.4.3
WCAG 1.4.6
6
Accessible Data Visualization Recommendation Success Criteria (WCAG) Level Reference Source
colour contrasts checkers tools that help meet the standards
(5) (6) (7) (8).
Notes
• Large scale text is given as at least 18 point or 14 point
bold but when charts are presented as images the text size
often changes so it is best to always aim for a 4.5 to 1
contrast ratio.
This is the minimum contrast required. Success criterion 1.4.6
contrast (enhanced) states higher contrast ratios for text but
this has a AAA level so is not covered by the legislation (but a
good standard to aim for when possible).
• Large Text: Large-scale text and images of
large-scale text have a contrast ratio of at least
3:1.
• Incidental: Text or images of text that are part of
an inactive user interface component, that are
pure decoration, that are not visible to anyone, or
that are part of a picture that contains significant
other visual content, have no contrast
requirement.
• Logotypes: Text that is part of a logo or brand
name has no contrast requirement.
1.4.6 Contrast (Enhanced)
The visual presentation of text and images of text
has a contrast ratio of at least 7:1, except for the
following:
• Large Text: Large-scale text and images of
large-scale text have a contrast ratio of at least
4.5:1.
• Incidental: Text or images of text that are part of
an inactive user interface component, that are
pure decoration, that are not visible to anyone, or
that are part of a picture that contains significant
other visual content, have no contrast
requirement.
• Logotypes: Text that is part of a logo or brand
name has no contrast requirement.
and
AAA
7
Accessible Data Visualization Recommendation Success Criteria (WCAG) Level Reference Source
(j) Image of text
If an image of text is required, provide a plain text alternative.
Keep text out of chart images whenever possible.
1.4.5 Images of Text
If the technologies being used can achieve the visual
presentation, text is used to convey information
rather than images of text except for the following:
• Customizable: The image of text can be visually
customized to the user's requirements.
• Essential: A particular presentation of text is
essential to the information being conveyed.
1.4.9 Images of Text (No Exception)
Images of text are only used for pure decoration or
where a particular presentation of text is essential
to the information being conveyed.
AA
and
AAA
WCAG 1.4.5
WCAG 1.4.9
(k) Chart elements contrast
All chart elements must have at least a 3 to 1 contrast ratio
with adjacent colours unless a certain type of presentation is
essential.
1.4.11 Non-text Contrast
The visual presentation of the following has a
contrast ratio of at least 3:1 against adjacent
colour(s):
• Graphical Objects: Parts of graphics required to
understand the content, except when a particular
presentation of graphics is essential to the
information being conveyed.
AA WCAG 1.4.11
8
Accessible Data Visualization Recommendation Success Criteria (WCAG) Level Reference Source
(4) Charts keyboard navigation
Make interactive visualizations accessible by keyboard. Test
that all interactive elements or groups of elements can be
selected and activated using the keyboard.
Present the chart as a hierarchical structure, and only arrow
keys will be needed for navigating the chart.
Test that the keys allowing to navigate, activate checkboxes
and buttons, select/drop-down menus, dismisses browser
dialog or menu, etc, are working correctly.
Be sure the keyboard focus indicator is visible.
Test that 'pop up' dialog can be closed and continuing
navigation with the keyboard.
2.1 Keyboard Accessible
Make all functionality available from a keyboard.
2.1.1 Keyboard
All functionality of the content is operable through
a keyboard interface without requiring specific
timings for individual keystrokes, except where the
underlying function requires input that depends on
the path of the user's movement and not just the
endpoints.
A WCAG 2.1.1
(5) Prevent seizures and physical reactions
If you must include some type of movement in the
visualization (like could happen in interactive visualization),
provide a way for users to turn it off, and use the “prefers-
reduced-motion” CSS media feature when relevant (9).
Activate the navigation skip link and hit Tab again to ensure it
functions correctly.
2.3 Seizures and Physical Reactions
Do not design content in a way that is known to
cause seizures or physical reactions.
2.3.3 Animation from Interactions
Motion animation triggered by interaction can be
disabled, unless the animation is essential to the
functionality, or the information being conveyed.
AAA WCAG 2.3.3
9
Accessible Data Visualization Recommendation Success Criteria (WCAG) Level Reference Source
(6) Make the data visualization readable
Ensure that information necessary for understanding your
visualization is available to users and assistive technologies.
(a) Ensure text is readable
Use sans-serif font to make it readable. It’s recommended to
make the content more accessible. Avoid the use of acronyms
or abbreviations in the text content. Avoid fully justified and
italic text.
Assure that the language and direction of the text are
identified properly by the assistive technologies.
Using a light pastel background rather than a white
background behind black text can improve readability.
Show the data values. In interactive visualisations, a tool tip
can show the data values when you hover over it.
3.1 Readable
Make text content readable and understandable.
3.1.2 Language of Parts
The human language of each passage or phrase in
the content can be programmatically determined
except for proper names, technical terms, words of
indeterminate language, and words or phrases that
have become part of the vernacular of the
immediately surrounding text.
AA WCAG 3.1.2
(7) Make the data visualization predictable
Make the behaviour of functional and interactive components
predictable.
(a) Chart familiarity
Data visualizations are most accessible when the design is
familiar. Carefully select the data that will support your main
message and choose the right chart type for it.
3.2 Predictable
Make Web pages appear and operate in predictable
ways.
10
Accessible Data Visualization Recommendation Success Criteria (WCAG) Level Reference Source
(b) Colour Choices
Think about how you’re using colour to convey meaning.
There are colours used by what they represent in specific
cultures.
(c) Charts elements on Focus
Useful for interactive visualizations.
Provide clear and visible focus indication for effective
keyboard navigation. The visualization elements should be
focusable in the order that they appear in the source code.
Make hidden elements visible when they have focus.
3.2.1 On Focus
When any user interface component receives focus,
it does not initiate a change of context.
A WCAG 3.2.1
provide-logical-
and-visible-focus-
indication (10) (11)
(d) Change visualization context on request
Gives users control of changes of context during the interaction
with the visualization. Think about warning users of context
changes in advance.
3.2.5 Change on Request
Changes of context are initiated only by user
request, or a mechanism is available to turn off such
changes.
AAA WCAG 3.2.5
(e) Provide labels/instructions
Provide labels/instructions that facilitate understanding the
action need it. This can apply for interactive charts when the
user needs to input/select information during the interaction.
You can make such instructions available only when the
individual control is on focus. This helps not to clutter the
page with information.
3.3.2 Labels or Instructions
Labels or instructions are provided when content
requires user input.
A WCAG 3.3.2
11
Accessible Data Visualization Recommendation Success Criteria (WCAG) Level Reference Source
(8) Maximize compatibility
A considerable amount of content is consumed on small
screens. Ensure the visualization is responsive to different
screen sizes and zoom levels. Content needs to reflow or
reshaped to avoid horizontal scrolling, clipping, or
overlapping of elements. Column charts can be transformed to
bar charts.
(a) Provide Name, role, and value of custom controls
Users of assistive technologies must understand what a custom
control is and what it does.
Provide information as accessible name, visible text label that
match the name and accessible role, for each custom
component.
4.1 Compatible
Maximize compatibility with current and future
user agents, including assistive technologies.
4.1.2 Name, Role, Value
For all user interface components (including but not
limited to form elements, links and components
generated by scripts), the name and role can be
programmatically determined; states, properties,
and values that can be set by the user can be
programmatically set; and notification of changes to
these items is available to user agents, including
assistive technologies.
A WCAG 4.1.2
Digital
Accessibility-
Provide name, role,
and value
information-
Harvard University
(12)
2. Accessibility of interactive charts using Webtools
The interactive functionalities should offer the reader the information on demand when exploring the
visualisation. It is important to consider the effectiveness of the various interactions you want to
implement in your chart (13) .
The success criteria that apply to the case of interactive charts can be implemented using Webtools (14).
Webtools is a corporate tool implemented to help with European Institutions' sites. It’s available in 24
languages and is in line with corporate standards. Specifically for data visualization, there is a group of
tools among which Interactive charts allows you to create interactive charts based on Highcharts
technology (14) to add to your website or web application. You can use the Webtools wizard to create
interactive charts with your data and have access to the embed code (15). There are examples available
in the WebTools showcase (16).
To create a chart using Webtools, with Unified Embed Code (UEC) based on JSON, you need to add
the following code into your HTML code:
The table below offer a description of the first steps in your code you need to implement to create the
interactive chart, specify chart type and to use the accessibility plugin.
Table 2: First steps for creating interactive charts using JSON.
Description Code Reference
Webtools Smart Loader (SML)
Is a JavaScript file that collects
widgets inside the HTML page,
identifiable by UEC. It loads all
resources required to render and
drive the identified widgets.
First, include the JavaScript file in
the header of the html page code.
This operation can be done by the
Administrator of your site.
Widgets - Webtools documentation - EC Extranet
Wiki (europa.eu)
<!doctype html>
<html lang="en-GB">
<head>
<script defer src="https://europa.eu/webtools/load.js"
type="text/javascript"></script>
</head>
<body>
<script type="application/json">{
"service" : "charts",
"version" : "2.0",
(Chart specific JSON code....)
} </script>
</script>
</body>
13
Description Code Reference
Accessibility plugin
Add the plugin that enables
“accessibility” functionality for
the chart. Also add the plugins
“exporting” and “export-data” that
allow to export data.
In the last version of the chart
Webtools in not necessary to add
the plugin because it’s already
added by default.
Accessibility module | Highcharts
Define the chart type more
convenient for your data.
chart.type | highcharts API Reference
2.1. Alternative Text for charts
When creating an accessible interactive chart, you need to be aware that the screen reader needs to read the
information provided in your chart.
You need to provide alternative text to help tell the story of your data visualization with clear descriptions of
the content to be read by the assistive technologies (17).
Table 3: Recommendations to implement Alternative Text in interactive chart using Webtools.
Description Code Reference
Description class
Use the description class to place the
description next to the chart. This
will automatically link this
description to the chart and make it
available to screen reader users.
Linked description to the chart. In the html
code:
Accessibility module | Highcharts
You can configurate the screen
reader behaviour.
When using the accessibility module,
screen reader users can navigate and
explore your charts. The first thing a
screen reader will encounter is an
information region covering title, the
type of chart, axis information, and
https://www.highcharts.com/docs/accessibility/
configure-the-accessibility-module.
configurating the screen reader behaviour:
accessibility.screenReaderSection | highcharts
API Reference
To configure what screen readers read out for
individual data points:
14
Description Code Reference
the text description. These
information help decide on whether
to invest more time exploring the
chart.
By default, the data series are
marked up as regions/landmarks,
which aids navigation between
series. The data points also can be
navigated. Screen reader users can
interact with the elements and the
chart menu.
accessibility.point.valueDescriptionFormat |
highcharts API Reference
When a series contains more points than this,
we no longer expose individual points to
screen readers:
accessibility.series.pointDescriptionEnabledTh
reshold | highcharts API Reference The default
value is 200. Set to false to disable.
Expose only the series element to screen
readers, not its points:
plotOptions.series.accessibility.exposeAsGroup
Only | highcharts API Reference
accessibility.description
Provide description of the chart for
the screen reader users.
This option will keep the description
visually hidden. Consider that
making the description visible will
improve cognitive accessibility and
make it easier for all users to
understand the message of the chart.
yAxis:
yAxis.accessibility | highcharts API Reference
xAxis:
xAxis.accessibility | highcharts API Reference
Series description:
accessibility.series.descriptionFormat |
highcharts API Reference
accessibility.descriptionFormat
Format to use for describing the data
series group to assistive technology -
including screen readers.
series:
series.line.accessibility.descriptionFormat |
highcharts API Reference
accessibility.announceNewData
Options for announcing new data to
screen reader users. Useful for
dynamic data applications and
drilldown.
For these applications, consider
making snapshots of the data
accessible, and do the
announcements in batches.
accessibility.announceNewData | highcharts API
Reference
accessibility.linkedDescription
Let’s an HTML element with a
description be linked to the chart, so
that screen reader users can connect
the two. It is possible to link the
chart to any element on the page.
This allows to describe charts using
visible text, which is always
recommended.
accessibility.linkedDescription | highcharts
API Reference
15
Description Code Reference
Caption
If you need the description to be part
of the exported image, consider
using the caption feature. The
caption will automatically be made
available to screen reader users. The
caption renders at the bottom of the
chart and is included if the chart is
exported.
caption | highcharts API Reference
Accessibility module | Highcharts
Because most of these implementations are hidden text, you can assist on the screen readers available to check
the code is correct and allows the users to hear properly the text implemented.
In the following examples you can see the accessibility code in action adding a description text that appear
next to the chart.
Figure 1 Description for screen reader users. Sources: Highcharts (18).
<figure>
<div id="chart-container"></div>
<p class="highcharts-
description"> Line chart
demonstrating ... </p>
</figure>
16
2.2. Distinguishable information in the charts
To make the information on your interactive chart distinguishable, you cannot rely on colour alone to
convey information in the chart. We should avoid legends, check for colour contrast, between others.
You can learn here the basic commands helping you to implement this recommendation.
Table 4: Creating Distinguishable Data Visualizations
Description Code Reference
When need it for
clarity, you can
remove the Y
axis, and for
example,
connecting the
relevant data
point values next
to the data points.
Remove Y Axis making visible false:
yAxis.visible | highcharts API Reference
Colour theme
It is
recommended to
use the theme
provided by
Webtools, a
corporate theme
using ESTAT
recommendations
and palette
accessibility.highContrastTheme | highcharts API Reference
OR corporate colour palettes:
https://webgate.ec.europa.eu/fpfis/wikis/display/webtools/Co
rporate+colour+palettes+for+charts+and
webtools/Corporate+colour+palettes+for+charts+and
+maps#Corporatecolourpalettesforchartsandmaps-
ESTATcolourspaletteforWebtoolscharts.
plotOptions.series
.dataLabels
Options for the
series data labels,
appearing next to
each data point.
plotOptions.series
.label
Allow to write
the name of the
data next to the
data series. Series
labels are placed
as close to the
series as possible,
seeking to avoid
other series. This
makes the chart
Next to each data point:
plotOptions.series.dataLabels | highcharts API Reference
Next to the data series:
plotOptions.series.label | highcharts API Reference
Place labels in specific position:
annotations.labels.point | highcharts API Reference
17
Description Code Reference
more easily
readable.
It is used together
with the series-
label plugin. (see
Table 2)
labels.point
You can add
labels in specific
places in the chart
to help describe
the data.
legend.enabled
Avoid using
legend when is
possible.
Allow to
eliminate the
legend to render
more accessible
the chart
legend.enabled | highcharts API Reference
legend.accessibili
ty
Accessibility
options for the
legend. Requires
the accessibility
plugin.
Allow to navigate
your legend with
the keyboard.
legend.accessibility | highcharts API Reference
tooltip
The tooltip
appears when
hovering over a
point in a series.
By default, the
tooltip shows the
values of the
point and the
name of the
series. you can
set the options for
how each series
should be
represented in the
tooltip | highcharts API Reference
Describe your data points meaning:
tooltip.pointFormat | highcharts API Reference
18
Description Code Reference
tooltip by
series.tooltip.
You can also
provide a
description to tell
the story of your
data
Use pattern or
markers, they
help to identify
different data
without basing in
colours.
Apply dash styles
to line series
makes lines
distinguishable
even on poor
black/white
prints.
It needs the
plugin:
"pattern-fill"
Use dash styles:
Highcharts Namespace: Highcharts
plotOptions.series.dashStyle | highcharts API Reference
Use of markers in a chart:
plotOptions.spline.marker | highcharts API Reference
Options for the point markers of line and scatter-like
series:
plotOptions.series.marker | highcharts API Reference
Use of pattern in a bar chart:
plotOptions.series.color | highcharts API Reference
Highcharts Interface: PatternObject
19
Figure 2 Labelling the data.
Figure 3 Labelling data points. Source: reference (19).
<script type="application/json">
"service": "charts",
"version": "2.0",
"data": {
"chart": {
"type": "spline"
},
{
"plugins": [
“accessibility”
"series-label"
],
"plotOptions": {
"series": {
"labels": {
"enabled": true,
}} },
<script type="application/json"> {
"data": {
"legend": {
"enabled": false
},
}</script>
<script type="application/json"> {
"service": "charts",
"version": "2.0",
"data": {
"plotOptions": {
"series": {
"dataLabels": {
"enabled": true
}}}
}</script>
20
Figure 4 Tooltip layouts.
Figure 5 Stacked column chart with white divider line and data label.
2.3. Implementing Keyboard Accessibility
On many occasions, the user could need to operate the keyboard to navigate through your chart. To give
access to your chart you need to implement specific code and enable the navigation.
Table 5: Chart keyboard navigation.
Description Code Reference
accessibility.keyboardNavigation
Enable keyboard navigation for the
chart. Defaults to true.
accessibility.keyboardNavigation | highcharts
API Reference
"tooltip": {
"backgroundColor": '#FCFFC5',
"borderColor": 'black',
"borderRadius": 10,
"borderWidth": 3
}
<script type="application/json">
{
"service": "charts",
"version": "2.0",
"data": {
"chart": {
"type": "column"
},
"plotOptions": {
"series": {
"stacking": "normal",
"dataLabels": {
"enabled": true
}
}
},</script>
21
Description Code Reference
keyboardNavigation.focusBorder
Use focus indication for effective
keyboard navigation.
Options for the focus border drawn
around elements while navigating
through them.
accessibility.keyboardNavigation.focusBorder |
highcharts API Reference
keyboardNavigation.order
Order of tab navigation in the chart.
Determines which elements are
tabbed to first.
Available elements are: series,
zoom, rangeSelector, chartMenu,
legend and container.
Defaults to undefined.
accessibility.keyboardNavigation.order |
highcharts API Reference
keyboardNavigation.seriesNavigati
on
Options for the keyboard navigation
of data points and series.
Be aware that for charts with a
large number of data points,
individual data points are not by
default exposed to screen reader
users or keyboard navigation (20).
accessibility.keyboardNavigation.seriesNavigat
ion | highcharts API Reference
keyboardNavigation.wrapAround
Whether or not to wrap around
when reaching the end of arrow-key
navigation for an element in the
chart. Defaults to true.
accessibility.keyboardNavigation.wrapAround |
highcharts API Reference
22
Figure 6 Focus indicator during keyboard navigation. Source: reference (21).
2.4. Make your Chart Readable
To make your chart readable with assistive technologies and user agents, you need to ensure that your
charts can correctly present phrases, passages, and words written in multiple languages (22). But also,
you need to follow the considerations for the text to be readable, like using the appropriate font style and
size.
Table 6: Charts readable.
Description Code Reference
Use sans-serif font to make it
readable. It’s recommended to
make the content more accessible.
chart.style | highcharts API Reference
When your publications exist in
several languages, you can define
the language or setting this
parameter to "auto". The
publications will be rendered,
corresponding to the language
detected in the embedding page.
The webtools provide a language
option and all the common labels
(e.g. country names, etc) are
available.
lang | highcharts API Reference
<script type="application/json">
{
"service": "charts",
"version": "2.0",
"plugins": [
“accessibility”
],
"keyboardNavigation": {
"focusBorder": {
"enabled": true,
"style": {
"lineWidth": 3,
"color": '#aa1111',
"borderRadius": 5
},
"margin": 4
}}}, </script>
23
2.5. Make your Chart Predictable
The behaviour of the interactive component in the chart should be in a predictable order. Make your
chart familiar to the users by using the appropriate type of chart to help to make the content predictable
during the interaction.
Table 7: Predictable charts.
Description Code Reference
Make it familiar. Choose the right
chart type for your data.
Chart types can be changed to
accommodate the responsive
design.
chart.type | highcharts API Reference
Make available the data in
different format.
You can add buttons to download
data. Inside the chart as SVG
element or as html button.
<div class="figure-content">
<div class="figure-buttons">
<a href="../../downloads/country-
reports/ETM_2022_IT_Figure_2.xlsx"
class="btn-figure download">Download
data</a>
</div>
</div>
exporting.buttons | highcharts API Reference
navigation.buttonOptions | highcharts API
Reference
keyboardNavigation.focusBorder
Visualize elements by focus
indication in the order they appear
in the source code.
See code example in Figure 8.
24
3. Table of Figures
Figure 3 Description for scree reader users. Sources: Highcharts (18). ........................................................... 15
Figure 4 Labelling the data. .............................................................................................................................. 19
Figure 5 Labelling data points. Source: reference (19). ................................................................................... 19
Figure 6 Tooltip layouts. .................................................................................................................................. 20
Figure 7 Stacked column chart with white divider line and data label. ............................................................ 20
Figure 8 Focus indicator during keyboard navigation. Source: reference (21). ............................................... 22
4. Table List
Table 1: Accessible Data Visualization Recommendations. .............................................................................. 2
Table 2: First steps for creating interactive charts using JSON. ...................................................................... 12
Table 3: Recommendations to implement Alternative Text in interactive chart using Webtools. ................... 13
Table 4: Creating Distinguishable Data Visualizations .................................................................................... 16
Table 5: Chart keyboard navigation. ................................................................................................................ 20
Table 6: Charts readable. .................................................................................................................................. 22
Table 7: Predictable charts. .............................................................................................................................. 23
5. References
1. Web Content Accessibility Guidelines (WCAG) 2.1. W3. [Online] https://www.w3.org/TR/WCAG21/.
2. Data Sonification Archive. [Online] https://sonification.design/.
3. Evographs. [Online] EvoXLabs. http://www.evoxlabs.org/projects/evographs.
4. VoxLens: Adding one line of code can make some interactive visualizations accessible to screen-reader
users. University of Washington. [Online] https://www.washington.edu/news/2022/06/01/voxlens-adding-
one-line-of-code-can-make-some-interactive-visualizations-accessible-to-screen-reader-users/.
5. SiegaMedia. Contrast Ratio. [Online] https://www.siegemedia.com/contrast-ratio.
6. COLOR SAFE. [Online] http://colorsafe.co/.
7. ColBlindor. Coblis —Color Blindness Simulator. [Online] https://www.color-blindness.com/coblis-color-
blindness-simulator/.
8. Colour Contrast Analyser (CCA). [Online] TPGi. https://www.tpgi.com/color-contrast-checker/.
25
9. Revisiting prefers-reduced-motion, the reduced motion media query. [Online] CSS-Tricks. https://css-
tricks.com/revisiting-prefers-reduced-motion/.
10. Digital Accessibility. [Online] Harvard University. https://accessibility.huit.harvard.edu/provide-logical-
and-visible-focus-indication.
11. Digital Accessibility. [Online] Harvard University. https://accessibility.huit.harvard.edu/.
12. DIGITAL ACCESSIBILITY - Provide name, role, and value information. [Online] Harvard University.
https://accessibility.huit.harvard.edu/provide-name-role-and-value-information.
13. Adding Interactivity to Data Visualizations on the Web. [Online] Envy Lab.
https://envylabs.com/insights/how-to-create-interactive-data-visualizations/.
14. Webtools documentation. [Online]
https://webgate.ec.europa.eu/fpfis/wikis/spaces/viewspace.action?key=webtools.
15. WebTools Highcharts wizard. [Online] https://europa.eu/webtools/tools/#/wizards/highcharts.
16. WebTools showcase. [Online]
https://europa.eu/webtools/showcase/demo/?comp=charts§ion=01_introduction&demo=01_basic_struct
ure&lang=en#01_introduction.
17. How to write accessible descriptions for interactive charts. [Online] Highcharts.
https://www.highcharts.com/blog/tutorials/accessible-descriptions-for-interactive-charts/.
18. [Online] Highcharts.
https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/accessibility/acce
ssible-line.
19. Webtools showcase. [Online]
https://europa.eu/webtools/showcase/demo/?comp=charts§ion=02_charts_types&demo=line_single_seri
e&lang=en#02_charts_types.
20. Advanced accessibility configuration. [Online] Highcharts.
https://www.highcharts.com/docs/accessibility/configure-the-accessibility-module#configuration-of-screen-
reader-behavior.
21. Example of Focus Indicator. [Online] Highcharts.
https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/accessibility/cust
om-focus.
22. WCAG 2.1 Understanding Docs. [Online] https://www.w3.org/WAI/WCAG21/Understanding/info-and-
relationships.
