In this guest blog post, textBOX will walk you through a selection of Highcharts charts to explain how to utilize a new and unique image description method to effectively describe your content.
In this detailed tutorial, you will learn how human-generated descriptions complement Highcharts and enhance the accessibility and user experience for everyone. Read more about textBOX toward the end of this post.
INTRODUCTION TO IMAGE DESCRIPTION
The digital age is a visual experience. Exploring multi-media today exposes us to vast amounts of complex information conveyed through a wide array of graphics and images. Websites are immersive experiences that encourage us to interact with content on the page. However, for a large section of society these images are merely undiscoverable blanks. Unseen and unknown.
Screen readers are designed to read the text on the web, however, they are not able to interpret and describe non-text graphics, such as photos, tables, figures, and charts. Content providers must include a text alternative for every meaningful graphic in a digital work so readers with visual or cognitive disabilities (blindness, dyslexia) have equal access to information.
Automated technologies are currently not able to produce consistent, quality alternative text that meets web content industry standards. Human-generated image descriptions are still the most reliable method and will remain that way for the foreseeable future. However, many content providers do not have the experience and resources to create human-generated image descriptions in-house.
IMPORTANCE OF IMAGE DESCRIPTION
Writing alternative text content requires subject expertise, thoughtful interpretation of the context of a non-text graphic within a work, knowledge of accessibility standards and guidelines, as well as HTML coding and XML design.
Content providers must overcome these challenges by implementing accessible image descriptions to avoid legal, educational and commercial risks. Furthermore, a lack of image descriptions also impacts non-disabled users with age-related impairments or who are using old technology or mobile devices.
There are several business benefits of adding image descriptions to digital content, such as enhancing discoverability, improving understanding and attracting users. Search engines recognize images that include alt tags thus giving content providers an opportunity to both improve accessibility and draw customers to their products and websites.
Providers with accessible content could gain an advantage over their competitors in the online marketplace. Other business benefits include:
- Strengthening business relationships,
- Promoting equal access to information,
- Telling a positive story with corporate social responsibility, and
- Enhancing the reading experience for all users.
While there may be initial obstacles for content providers to overcome, the long-term benefits of implementing accessible image descriptions outweigh the short-term challenges. Image descriptions help providers avoid risk, remain relevant and promote positive change.
WRITING ACCESSIBLE CHART DESCRIPTIONS
The inclusion of text descriptions of Highcharts enables all users to access your content and helps tell the story of your chart.
The fundamentals of the focus|LOCUS method are scene-setting and storytelling which create a framework for the chart description. To set the scene of the chart, we use a brief overview of the content as well as a structural description of the chart to facilitate spatial awareness and understanding. From here, the story of the chart is created by building a logical pathway through the chart’s data elements.
Highcharts provides a wide range of chart types and the tools to add descriptions via their Accessibility Module. Let’s explore a selection of charts and how to describe each different style. Each chart description is annotated to highlight the key components, such as the overview, structure and data elements.
CHARTS + STORYTELLING
The area chart above is telling a story from two perspectives: the USA and the USSR. These narratives are intertwined, and a story emerges as the description captures the visual elements illustrated within the chart. Simply repeating the data points using a list would create a long and uninspiring description. The story of the data should unfold within the description by highlighting salient points of interest and comparing the developing narratives.
The scene is set for the user with an overview of the chart’s contents.
An area chart compares the nuclear stockpiles of the USA and the USSR/Russia between 1945 and 2017 [BRIEF DESCRIPTION]. The number of nuclear weapons is plotted on the Y-axis and the years on the X-axis. The chart is interactive, and the year-on-year stockpile levels can be traced for each country [STRUCTURAL DESCRIPTION].
The overview and structural description allow the user to visualize the chart and have context for the information they are about to receive. The chart shows how quantitative values for different categories change over a defined period of time. The story of the chart starts at the beginning of the time range, in this case, 1945 becoming the focus, the starting point, of our description. We can follow the quantitative values from left to right across the timeline to tell the chart’s story.
The US has a stockpile of 6 nuclear weapons at the dawn of the nuclear age in 1945 [FOCUS ELEMENT]. This number has gradually increased to 369 by 1950 when the USSR enters the arms race with 6 weapons [LOCUS ELEMENT].
The description continues the story by highlighting the data highs and lows and the comparable timing.
At this point, the US starts to rapidly build its stockpile culminating in 32,040 warheads by 1966 compared to the USSR’s 7,089 [LOCUS ELEMENT]. From this peak in 1966, the US stockpile gradually decreases as the USSR’s stockpile expands. By 1978 the USSR has closed the nuclear gap at 25,393 [LOCUS ELEMENT]. The USSR stockpile continues to grow until it reaches a peak of 45,000 in 1986 compared to the US arsenal of 24,401 [LOCUS ELEMENT].
The final section of the chart tells the story of the reduction of stockpiles on either side in accordance with peace treaties and the collapse of the Soviet Union.
From 1986, the nuclear stockpiles of both countries start to fall. By 2000, the numbers have fallen to 10,577 and 21,000 for the US and Russia, respectively [LOCUS ELEMENT]. The decreases continue until 2017 at which point the US holds 4,018 weapons compared to Russia’s 4,500 [LOCUS ELEMENT].
The story arc is now complete. The user has a full overview of the comparable nuclear weapon stockpiles of the US and the USSR during the period.
CHARTS + KEY DATA
The line chart above contains a significant number of data points. It is not necessary to detail every data point especially as the chart is interactive and Highcharts offers functionality to allow you to carefully step through the data. The description needs to convey the key information captured in the chart and provide the user with an overview of the data.
Spatial awareness is key to understanding for a non-sighted user. Providing a structural description of the chart allows the user to visualize the chart and acclimatize to the data they are engaging with.
An annotated line graph illustrates the 8th stage of the 2017 Tour de France cycling race from the start point in Dole to the finish line at Station des Rousses [BRIEF DESCRIPTION]. Altitude is plotted on the Y-axis at increments of 500m and distance is plotted on the X-axis in increments of 25 kilometers. The line graph is interactive, and the user can trace the altitude level at every 100-meter point along the stage [STRUCTURAL DESCRIPTION].
The line graph is annotated to highlight points of interest during the race stage. The focus|LOCUS method takes these elements and builds them into an immersive narrative description.
The graph is shaded below the data line to visualize the mountainous altitudes encountered on the 187.5-kilometre stage [FOCUS ELEMENT]. The three largest climbs are highlighted at Col de la Joux, Côte de Viry and the final 11.7-kilometer, 6.4% gradient climb to Montée de la Combe de Laisia Les Molunes which peaks at 1200 meters above sea level [LOCUS ELEMENT]. The stage passes through the villages of Arbois, Montrond, Bonlieu, Chassal and Saint-Claude along the route [LOCUS ELEMENT].
CHARTS + DATA RANGES
As with the line chart, a column range chart conveys a considerable amount of information. In the example, there are 36 major data points: low temperature, high temperature and temperature range. Again, Highcharts allows the user to step through the individual data points so it is not necessary to detail every data point in the description. The purpose of the description is to convey the most relevant information. We are creating a data snapshot for the user in much the same way a sighted user would cherry-pick the information they required.
The opening of the description sets the scene for the user:
A column range chart compares the monthly temperature variations throughout 2017 in Vik I Sogn, Norway [BRIEF DESCRIPTION]. The chart is interactive and displays the temperature range for each month when hovering over the data. The temperature is measured in degrees Celsius on the X-axis and the months are plotted on the Y-axis [STRUCTURAL DESCRIPTION].
Now that we have defined the structure, we can select the critical data points and present them to the user:
The lowest temperature is recorded in March at minus 10.2 Celsius [FOCUS ELEMENT]. The lowest range of temperatures is found in December ranging from a low of minus 9 to a high of 8.6 Celsius [LOCUS ELEMENT]. The highest temperature is found in July at 26.2 Celsius [LOCUS ELEMENT]. July also has the highest range of temperatures from 6 to 26.2 Celsius [LOCUS ELEMENT]. The broadest range of temperatures is found in May ranging from a low of minus 0.6 to a high of 23.1 Celsius [LOCUS ELEMENT].
The description provides the user with the key data trends and they can now confidently plan a trip to Vik and the appropriate clothing they will need.
CHARTS + VISUAL REPRESENTATION
A variable radius pie chart cleverly visualizes two datasets in a distinctive and informative way. However, the representation is purely visual (based on sectional width and depth) and visually impaired users will have difficulty engaging with the graphic unless a description is provided.
Describing a variable radius pie chart follows the same rules as other graph designs with an overview and structural description for context and spatial awareness and data point highlights for trend analysis.
A variable radius pie chart compares the population density and total land mass for seven European nations: Spain, France, Poland, the Czech Republic, Italy, Switzerland and Germany [BRIEF DESCRIPTION]. The chart visualizes the data by using the width of each section to represent total area and the depth of the section to represent population density. Each section is color-coded according to the country and the chart is interactive: by hovering over each section the data points are exposed in a call-out box. The chart is organized by population density in a counterclockwise direction [STRUCTURAL DESCRIPTION].
The chart is organized based on population density, the focus of the description. The countries are listed in order to provide the user with context. The individual data points can be sourced directly from the Highcharts data call-outs.
Germany has the highest population density at 235.6 people per square kilometer, followed by Switzerland, Italy, the Czech Republic, Poland, France and Spain [FOCUS ELEMENT].
The description now identifies key land mass data points and draws out interesting comparisons with population density to help the user understand the contrasts the graphic represents.
France has the largest land mass at 551,500 square kilometers [LOCUS ELEMENT]. Spain is the second largest country at 505,370 square kilometers but has the lowest population density at 92.9 people per square kilometer [LOCUS ELEMENT]. Switzerland is the smallest nation by land mass at 41,277 square kilometers but it has the second highest population density at 214.5 people per square kilometer [LOCUS ELEMENT].
CHARTS + MASS DATA
In some instances, a graph illustrates a significant number of data points and requires trend analysis. In the example above, a scatter plot visualizes 507 individual data points. It is not necessary to list every data point – each one is available as a data table via Highcharts, if necessary – but the description should provide the key data trends to the user. Trend analysis is essential for mass data graphs where detailed data description is impossible.
A scatter plot compares the height and weight of 507 individuals by gender [BRIEF DESCRIPTION]. Height in centimeters is plotted on the X-axis and weight in kilograms is plotted on the Y-axis. The chart is interactive, and each data point can be hovered over to expose the height and weight data for each individual [STRUCTURAL DESCRIPTION].
Describing trends involves defining the data ranges for the variables. In the example, we can identify the high and low values for height and weight for males and females. This provides the data range, but outliers may overtly influence these figures. For instance, there are only two individuals with a height above 195cm and there are a large proportion of height values clustered between 175 and 180cm. By adding an estimated concentration value, we help the user develop a better understanding of the data the chart represents.
The scatter plot is fairly evenly divided by gender with females dominating the left-hand side of the chart and males dominating the right-hand side. The height data for females ranges from 147.2 to 182.9 centimeters with the greatest concentration between 160 and 165 centimeters [FOCUS ELEMENT]. The weight data for females ranges from 42 to 105.2 kilograms with the greatest concentration at around 60 kilograms [LOCUS ELEMENT].
The height data for males ranges from 157.2 to 198.1 centimeters with the greatest concentration between 175 and 180 centimeters [LOCUS ELEMENT]. The weight data for males ranges from 53.9 to 116.4 kilograms with the greatest concentration at around 80 kilograms [LOCUS ELEMENT].
CHARTS + COMPARISON
Some charts are expressly designed to draw comparisons between the data. A good example of this is a spiderweb or polar chart. Initially, the unusual structure of the spiderweb chart can be difficult to interpret. However, once the design is deconstructed, we find that it is a simple way of comparing datasets for a series of variables.
A spiderweb chart compares the allocated budget against actual spending within an organization [BRIEF DESCRIPTION]. The spider chart has six spokes. Each spoke represents one of the 6 departments within the organization: sales, marketing, development, customer support, information technology and administration. The chart is interactive, and each data point is displayed upon hovering [STRUCTURAL DESCRIPTION].
The user is now aware of the structure of the chart and we can proceed with briefly highlighting the key comparison data within the chart.
The chart clearly shows that 4 of the 6 departments have overspent their budget with Marketing responsible for the greatest overspend of $20,000 [COMPARISON].
Although the data points within the chart are interactive, it is useful to include the comparative data for the user.
The allocated budget and actual spending data points for each department are as follows:
- Sales. Budget equals $43,000; spending equals $50,000 [FOCUS ELEMENT].
- Marketing. Budget equals $19,000; spending equals $39,000 [LOCUS ELEMENT].
- Development. Budget equals $60,000; spending equals $42,000 [LOCUS ELEMENT].
- Customer support. Budget equals $35,000; spending equals $31,000 [LOCUS ELEMENT].
- Information technology. Budget equals $17,000; spending equals $26,000 [LOCUS ELEMENT].
- Administration. Budget equals $10,000; spending equals $14,000 [LOCUS ELEMENT].
CHARTS + INTERSECTION
The focus|LOCUS method simplifies the process of describing a Venn diagram by first deconstructing the diagram and then defining the elements and their relationships. A Venn diagram is simply a series of interactions between a group of circles. In the example, there are three circles converging to create the diagram. The intersections between each circle create a new, combined value and these intersections are listed within the description.
A Venn diagram constructed from three intersecting circles illustrates the Unattainable Triangle [BRIEF DESCRIPTION]. The three circles are labeled, in a clockwise direction, Fast, Cheap and Good [STRUCTURAL DESCRIPTION]. The intersections are as follows:
- Fast and Cheap equals Not the Best Quality [FOCUS ELEMENT].
- Cheap and Good equals Will Take Time to Deliver [LOCUS ELEMENT].
- Good and Fast equals More Expensive [LOCUS ELEMENT].
- Fast, Cheap and Good equals They’re Dreaming [LOCUS ELEMENT].
CHARTS + THE USE OF COLOR
In our final chart, we shall explore a more complex visualization. Tile maps create visually arresting graphics by representing data using color coding within a geographic structure. The tile map below visualizes the US population with each color-coded tile representing a state and positioned in accordance with the state’s geography. It is not necessary to list the values of every variable because Highcharts provides interactive data call-outs for each state and a full data table. The description can concentrate on identifying trends and important data values.
A tile map represents the states of the USA by population in 2016 [BRIEF DESCRIPTION]. The hexagonal tiles are positioned to geographically echo the map of the USA. A color-coded legend states the population levels as below 1 million (beige), 1 to 5 million (orange), 5 to 20 million (pink) and above 20 million (hot pink). The chart is interactive, and the individual state data points are displayed upon hovering [STRUCTURAL DESCRIPTION].
In most cases, it is not important to include references to color in a chart description. The color helps sighted readers read the graphic and identify the series data, but the data is enough for non-sighted users. In this case, however, the data is color-coded to visualize population size and is key to understanding the graphic. Including reference to color will also help non-sighted readers discuss the content within a group as sighted users are interpreting the graphic through the use of color.
The remainder of the description highlights the key data points from the chart: the high and low population levels and geographical concentration trends.
Three states have a population of above 20 million: California (39.3 million), Texas (27.9 million) and Florida (20.6 million) [FOCUS ELEMENT]. The northern US region from Massachusetts in the Northwest to Illinois in the Midwest contains the highest concentration of states with a population of 5 to 20 million people [LOCUS ELEMENT]. The southern US region from South Carolina in the Southeast to New Mexico in the Southwest contains the highest concentration of states with a population of 1 to 5 million people [LOCUS ELEMENT]. 6 states have a population of less than 1 million people; these include Alaska, Delaware, Wyoming, North Dakota, South Dakota and Vermont [LOCUS ELEMENT]. The state with the lowest population is Wyoming in the Northwest with 584,153 people [LOCUS ELEMENT].
The completed description conveys a curated snapshot of the content.
Making charts accessible appears to be a difficult task at first. Using the focus|LOCUS approach, you can simplify the task by deconstructing the chart into its data elements. The table below provides some tips to help you create rich, immersive descriptions for your charts on Highcharts.
By including descriptions for your charts using the Highcharts Accessibility Module, you will increase your audience reach, promote inclusivity and improve the discoverability of your content. Telling the story of your charts through description will make a difference for users and help take your charts to the next level.
You can explore the Highcharts Accessibility Module here: Accessibility Module.
Image Descriptions for Article Diagrams
A diagram describes the two phases of the description process: scene-setting and storytelling. The scene-setting phase is divided into overview and structure. The storytelling phase is divided into focus element, locus elements and logical pathway. The whole process needs to consider the context the image is used in.
A table lists 8 tips for writing immersive descriptions. They are as follows:
- Evocative language: bring the data alive with an engaging writing style.
- Think discoverability: include keywords within the text of the description.
- Attention to detail: consistency and accuracy are key to good descriptions.
- Structural simplicity: describe the chart structure to help spatial understanding.
- Describe what you see: avoid interpreting data. this is the user’s job.
- Identify trends: highlight trends and important information.
- Create story pathways: develop the story through the description.
- Adopt the user perspective: understand what the user needs from the content.