{"id":24564,"date":"2024-01-24T13:36:25","date_gmt":"2024-01-24T13:36:25","guid":{"rendered":"https:\/\/www.highcharts.com\/blog\/?p=24564"},"modified":"2026-01-13T11:42:26","modified_gmt":"2026-01-13T11:42:26","slug":"accessibility-audio-map-highcharts","status":"publish","type":"post","link":"https:\/\/www.highcharts.com\/blog\/tutorials\/accessibility-audio-map-highcharts\/","title":{"rendered":"Accessibility audio map using Highcharts"},"content":{"rendered":"<p>In this article, I will walk through the process of creating an accessibility audio map using the <a href=\"https:\/\/www.highcharts.com\/docs\/sonification\/getting-started\" target=\"_blank\" rel=\"noopener\">Highcharts sonification module<\/a>. This interactive map presents the population density across various regions of France. As users explore the map, they will encounter distinct sounds that vary in speed to represent the differing population densities. Additionally, the names of the French regions are audibly announced. The result is the <a href=\"https:\/\/www.highcharts.com\/samples\/maps\/demo\/audio-map?codepen\" target=\"_blank\" rel=\"noopener\">demo below<\/a>:<\/p>\n<p class=\"demo-container\"><iframe loading=\"lazy\" style=\"border: none;\" title=\"This audio map can be interacted with by clicking the map regions. The demo illustrates one way to use the sonification module with maps. Repeated sounds play with varying speed to indicate the population density of a region. After a while, the name of the region is announced with speech. A notification sound plays when moving between regions.\" src=\"https:\/\/www.highcharts.com\/samples\/embed\/maps\/demo\/audio-map\" width=\"100%\" height=\"710px\"><\/iframe><\/p>\n<p>As you explore our interactive map, you&#8217;ll notice how it dynamically responds to user interactions such as mouseovers and clicks. Each action triggers auditory feedback, playing specific sounds and verbally announcing the names of the regions.<\/p>\n<p>So, here are the requirements for such a map:<\/p>\n<ol>\n<li>Each time a user clicks on a region, a distinct sound plays, signaling a change in focus to a new region.<\/li>\n<li>The population density of each region is conveyed through a series of repetitive sounds.<\/li>\n<li>As part of its accessibility features, the map also includes a text-to-speech function that verbally announces the name of each region.<\/li>\n<\/ol>\n<p>Let\u2019s dive into the code and understand the ins and outs of this effective audio map that fits the requirements above.<\/p>\n<h2>Libraries<\/h2>\n<p>The libraries used in this demo are the following:<\/p>\n<pre>&lt;script src=\"https:\/\/code.highcharts.com\/maps\/highmaps.js\"&gt;&lt;\/script&gt;\r\n&lt;script src=\"https:\/\/code.highcharts.com\/maps\/modules\/sonification.js\"&gt;&lt;\/script&gt;\r\n&lt;script src=\"https:\/\/code.highcharts.com\/maps\/modules\/accessibility.js\"&gt;&lt;\/script&gt;\r\n<\/pre>\n<p>Before I keep going, I would like to highlight two distinct Highcharts accessibility modules that are used in the demo:<\/p>\n<ul>\n<li>sonification.js to add audio features to the map.<\/li>\n<li>accessibility.js for enhancing the map&#8217;s accessibility features.<\/li>\n<\/ul>\n<h2>Data<\/h2>\n<p>For the dataset, I am using a simple data object to get the dataset for this demo:<\/p>\n<pre>data: [\r\n  ['fr-hdf', 189], \r\n  \u2026\r\n]<\/pre>\n<h2>Code<\/h2>\n<p>The most crucial part of the code is located within the series object:<\/p>\n<pre>Series: [\r\n  \u2026\r\n  sonification: {\r\n    ...\r\n  },\r\n  accessibility: {\r\n    ...\r\n  },\r\n  point: {\r\n    ...\r\n  }, \r\n  \u2026\r\n]<\/pre>\n<p>Let\u2019s break down each section.<\/p>\n<h2>Sonification<\/h2>\n<p>The track array within the sonification object defines the individual sound configurations. Each track answers one specific requirement defined above and represents a different aspect of the sonification<br \/>\nThe <a href=\"https:\/\/www.highcharts.com\/docs\/sonification\/advanced-mapping\" target=\"_blank\" rel=\"noopener\">track array<\/a> is used:<\/p>\n<ol>\n<li><b>First track<\/b>: To play a note on a vibraphone instrument to indicate that the user is on a new region with a specific pitch and volume <code>pitch: 'c10', volume: 0.3<\/code><\/li>\n<li><b>Second track<\/b>: To play notes <code>g2<\/code> according to the value of each region. The object <code>gapBetweenNotes<\/code> varies based on the population density value. A smaller value means more significant gaps between the notes; the opposite happens for bigger values. Notice the use of the logarithmic option to allow better perception change.<\/li>\n<li><b>Third track<\/b>: To speak the region&#8217;s name using the type to speech to activate the speech synthesis.<\/li>\n<\/ol>\n<p>As I explained in the previous <a href=\"https:\/\/www.highcharts.com\/blog\/tutorials\/accessibility-audio-boxplot\/\" target=\"_blank\" rel=\"noopener\">accessibility audio boxplot article<\/a>, It is important to understand that the sonification property configures the audio representation of the map. The mapping object inside the tracks object is a critical part of the sonification configuration, as it defines how the different elements, such as the region\u2019s value and region\u2019s name on the map, are translated into sound or speech.<\/p>\n<h2>Accessibility<\/h2>\n<p>The accessibility part is used to guide the screen reader to start with the description, then the density value for each region (<a href=\"https:\/\/api.highcharts.com\/highcharts\/accessibility.point.valueDescriptionFormat\" target=\"_blank\" rel=\"noopener\">valueDescriptionFormat<\/a>)<\/p>\n<pre>point: {\r\n  valueDescriptionFormat: '{xDescription}, {point.value} people per square kilometer.'\r\n}<\/pre>\n<h2>Point<\/h2>\n<p>This part of the code handles the click event. When a user clicks on a region, the code checks if <code>sonifyOnHover<\/code> is <code>false<\/code> (initially set at the beginning of the script). If so, it calls <code>this.sonify()<\/code> to start sonifying the clicked region. If <code>sonifyOnHover<\/code> is true, it stops any ongoing sonification by calling <code>this.series.chart.sonification.cancel()<\/code>.<\/p>\n<p>Now, you have a good idea and a starting point to create audio maps using Highcharts sonification and accessibility modules.<\/p>\n<p>\u00a0<\/p>\n<h2><strong>Related posts<\/strong><\/h2>\n<ul>\n<li style=\"margin-left: 20px; margin-bottom: 20px;\"><a href=\"https:\/\/www.highcharts.com\/blog\/inspirations\/highcharts-dashboards-with-react\/\">Highcharts Dashboards with React<\/a><\/li>\n<li style=\"margin-left: 20px; margin-bottom: 20px;\"><a href=\"https:\/\/www.highcharts.com\/blog\/inspirations\/highcharts-dashboards-with-vue\/\">Highcharts Dashboards with Vue<\/a><\/li>\n<li style=\"margin-left: 20px; margin-bottom: 20px;\"><a href=\"https:\/\/www.highcharts.com\/blog\/inspirations\/highcharts-dashboards-with-angular\/\">Highcharts Dashboards with Angular<\/a><\/li>\n<li style=\"margin-left: 20px; margin-bottom: 20px;\"><a href=\"https:\/\/www.highcharts.com\/blog\/inspirations\/highcharts-dashboards-with-python\/\">Highcharts Dashboards with Python<\/a><\/li>\n<li style=\"margin-left: 20px; margin-bottom: 20px;\"><a href=\"https:\/\/www.highcharts.com\/blog\/dashboards\/dashboard-examples-using-highcharts-dashboards\/\">Dashboard examples using Highcharts\u00ae Dashboards<\/a><\/li>\n<li style=\"margin-left: 20px; margin-bottom: 20px;\"><a href=\"https:\/\/www.highcharts.com\/blog\/inspirations\/javascript-dashboards-with-highcharts\/\">JavaScript dashboards with Highcharts<\/a><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Learn how to create an accessible audio map using Highcharts sonification and accessibility modules.<\/p>\n","protected":false},"author":32,"featured_media":24579,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"meta_title":"","meta_description":"","hc_selected_options":[],"footnotes":""},"categories":[210],"tags":[789,876],"coauthors":[699,729],"class_list":["post-24564","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-accessibility","tag-highcharts-maps"],"_links":{"self":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/24564","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/users\/32"}],"replies":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/comments?post=24564"}],"version-history":[{"count":3,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/24564\/revisions"}],"predecessor-version":[{"id":26039,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/24564\/revisions\/26039"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media\/24579"}],"wp:attachment":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media?parent=24564"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/categories?post=24564"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/tags?post=24564"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=24564"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}