10 Guidelines for DataViz Accessibility – Highcharts

• Read original article here

In a world that surrounds us with information at all times, data visualization is increasingly more popular, as a tool to help us make sense of the information, and to grab the attention of users and readers. This has significant implications for the overall accessibility of data. In this article we are exploring the accessibility problems of data visualizations, and how to start solving them.

Before we dive into the accessibility implications of data visualizations, it is useful to consider the value they are meant to provide to the user. This will help us think about how to provide value to all users – including users with various disabilities.

The benefits of using data visualizations are many, but the most obvious benefit is making data easier to comprehend and consume. With modern technology, data visualizations can be made dynamic and interactive, allowing the user to explore complex data through techniques like zooming, drilldown, and tooltips. Most charts are designed to easily compare data, or quickly discover patterns and trends.

Because of the human brain’s ability to rapidly process visual information, a quick look at a well designed chart can give the user an overview of the overall trends or patterns in the data. This is often referred to as “at-a-glance perception”, or shortened to “glance perception”, and is a phenomenon widely studied in psychology.

Chart authors use this to great effect, designing charts to highlight key aspects of the data by carefully choosing between different chart types, colors, axis types and axis ranges. Other data visualization techniques such as annotations, labels, and animations are also frequently used for this purpose.

Related to the above, data visualizations can often make it easier to spot errors in a dataset. Because humans are well adapted to recognizing visual patterns, we can often identify when something seems out of place. This is particularly useful with dynamic data, where charts are used for monitoring, or for analysis of collected data.

Another, often overlooked, benefit of data visualizations is their ability to translate between languages more easily than text. With certain cultural caveats, graphics are by nature language-agnostic. For those of us catering to a global audience, this can be a great benefit. Charts and graphs alongside text can in many cases provide much needed context for a non-native speaker to understand the text.

Finally, data visualizations can be attention grabbing. They provide an opportunity for designers to make creative use of colors, shapes, and animations to keep the users interested. Studies have shown that charts and graphs are significantly more persuasive than text or basic data tables. This is not surprising, as humans today are constantly working to filter out information that is relevant to us. In order to rise above the noise, it is vital to grab the attention of the reader.

The solution to making accessible data visualizations has to start with identifying who we are designing for, and what their needs are.

While there are clearly many benefits to data visualizations, unfortunately they do come at a price. The most obvious one being the reliance on visuals. This poses a challenge to users with visual impairments, with common examples ranging from color blindness to reduced vision and blindness.

For color blind or low vision users, telling elements in a chart apart from each other can be a challenge. This can make it difficult to comprehend the data correctly. If the chart is interactive, the cues or interaction points can be subtle, and sometimes go unnoticed if the design does not produce sufficient contrast.

Even if the user has perfect vision, data visualizations that include elements with lower contrast will be less intelligible in certain situations, such as on a phone screen in bright sunlight.

For a blind user that relies heavily on assistive technology to interact with web content, most charts are completely inaccessible. With modern technology, interactive charts can be made accessible to these users as well.

Not all challenges with data visualizations are related to visual impairments, however. For users with motor impairments, interacting with a chart can be challenging. Many users have difficulty using a computer mouse with precision, not to mention using precise touch navigation in small areas. Techniques such as zooming and navigating a dataset, clicking on data points or hotspots, or interacting with chart menus can be difficult for these users.

Conditions such as arthritis and Parkinson’s disease are common causes of motor impairments, but we should also be mindful of situational impairments. A parent holding a child might be limited to using one arm. A machine operator might need both hands to operate controls.

There are also cognitive accessibility challenges with charts. Some users can find attention grabbing data visualizations distracting and chaotic. Other users might find them confusing, and harder to understand than a simple data table. Users with dyslexia can find labels and titles hard to read if they are written in a small and/or ornate font.

Looking at the challenges above, and the goals of data visualization, many aspects of making an accessible visualization can be summarized as design guidelines. These guidelines are generic, and based on tried and tested accessibility principles.

Providing a text summary serves multiple purposes. First it will provide an alternate format of consuming the data for users that find the visualization confusing or distracting.

Secondly it will provide non-visual users with a description of trends and patterns that can otherwise be difficult to determine. It provides a basic fallback for users in case the rest of the visualization is inaccessible.

In addition, a text description is often easily picked up by search engines, which aids in getting higher search rankings for the content.

Making the data available in an accessible table format serves a similar set of purposes as the text summary. For a non-visual user it can be a familiar way to navigate a dataset, and even some visual users can find a data table to be an easier format to understand.

Some search engines can also use data table content to present a featured snippet in search results, again leading to a high search ranking.

If you can also make the visualization graphic itself accessible, that is even better, as we do in Highcharts.

Contrast and separation is crucial for an accessible data visualization, both between individual elements, and against the background.

The W3C WCAG 2.1 guidelines recommend at least a 3:1 contrast ratio for non-text elements and large text. Smaller text should have at least a 4.5:1 contrast ratio against its background.

There are many tools available for checking contrast requirements, as well as for simulating various types of vision impairments. Some of the popular ones include the WebAIM contrast checker, and the NoCoffee vision impairment simulator.

In data visualizations, borders or space around elements can often be used to achieve better separation and increased contrast.

Patterns and dash styles can also be used to achieve greater separation between elements. Be mindful, however, that overuse of these techniques can be visually distracting and detrimental to the accessibility of the visualization. Subtle patterns are generally preferred.

Relying on color as the only means of communicating information is a failure of one of the basic WCAG success criteria. This is because many users may not be able to distinguish between the different colors used.

Data labels, symbols, annotations and tooltips are some common ways to convey additional information in visualizations without relying on color. In addition, alternate presentations – such as an accessible data table – can be helpful. It is still encouraged to use color as a supplement to these techniques, this can make visualizations easier to understand, and in many cases more accessible.

The most common form of color blindness is Deuteranomaly, where the sensitivity to green light is reduced to varying degrees – making it more difficult to distinguish between red and green hues. Other forms exist as well, including blue-yellow color blindness and total color blindness. Overall, color blindness is very common, affecting around 8% of males worldwide, and even higher numbers in caucasian populations.

Many tools exist for determining whether a color palette is usable for users with color blindness. Note, however, that some users with partial vision can have issues distinguishing between colors in general, and that some might make use of high contrast tools or displays that make subtle differences in colors imperceptible.

Small text is generally harder to read, and should be avoided where possible. Consider using common abbreviations to allow for larger text. Make sure the text is not obstructed by other chart elements, and has sufficient contrast against its background.

The choice of fonts is also important to accessibility and readability, especially for users with dyslexia. Many fonts are created specifically with this in mind. Sans serif fonts are generally preferred, as they tend to be perceived as less crowded. Studies also recommend avoiding cursive/italic font styles. Examples of readily available fonts that are often recommended include Verdana and Helvetica.

Note that line spacing and word spacing also affect font readability, and should be taken into consideration.

In some cases you might consider supplementing the text with symbols, although be aware that symbols – especially unfamiliar ones – can be difficult to understand for some users.

Simple and plain language is recommended to help ensure readers understand the text as intended. It is helpful in order to reach a broader audience, and is particularly effective in reaching non-native speakers. Users with various cognitive impairments can also benefit from use of simple language.

By simple language we refer to language that aims to be as clear and plain as possible, avoids verbose, convoluted language, and minimizes use of jargon.

Similarly, it is recommended to use simple and familiar visualizations when possible. While complex data visualizations can be visually appealing and attention-grabbing, they can be foreign and hard to understand to users. This can reduce or even negate the benefits of using a visualization to explore the data in the first place.

For users with certain cognitive impairments, complex visualizations can be particularly challenging. If using a complex or novel visualization, make sure that it is accompanied by a text description, to ensure that users understand what the visualization is meant to convey, and how to interpret it.

If the visualization gets overly complex, it is often better to look for a different chart type, or split a large chart into multiple smaller charts.

Keyboard accessibility is an obvious requirement for interactive data visualizations. While many users with motor impairments will be using assistive technology other than keyboards, these tools often emulate keyboard behavior. This means that interactions accessible to keyboard-only users in reality are accessible to a wide range of users with different needs.

Some users, for example users with vestibular disorders, can experience nausea or distraction from animated content. Users with some cognitive impairments can also be distracted or confused by movement.

The prefers-reduced-motion CSS media feature allows front end developers to detect if the user has selected an option in the browser or the OS to reduce animations and motion. This should be respected for interactive visualizations.

Responsiveness in modern web design is crucial, both given the increased variety of screen formats used today, but also for accessibility. Low vision users in particular will often browse with an increased text size, use custom stylesheets, or make use of browser zoom as they navigate the web. This means that content needs to reflow to avoid horizontal scrolling, clipping, or overlapping of elements.

For interactive visualizations there are additional possibilities when it comes to responsiveness. Perhaps a vertical column chart is better presented as a horizontal bar chart on a smaller screen – to allow the user to easily scroll vertically through the data? Or perhaps the density of the axis labels could be reduced? Techniques like these are possible now, thanks to modern tools and visualization technologies.

This article aims to give a few practical guidelines, and some food for thought, to authors and designers of data visualizations.

The great side effect of designing for accessibility is that usability tends to improve for all users. All users benefit from a visualization where the intention and information is clear, and the interaction is easy to understand and operate. The question is always: How much ability are we requiring from our users, and how many users are we annoying or excluding by setting the bar too high?

To read more about accessibility in Highcharts, and how to get the most out of our chart accessibility tools, visit our Accessibility Portal