{"id":31480,"date":"2026-08-18T12:35:42","date_gmt":"2026-08-18T12:35:42","guid":{"rendered":"urn:uuid:952b6354-3130-4fa5-b606-c4068a049420"},"modified":"2026-09-01T10:18:22","modified_gmt":"2026-09-01T10:18:22","slug":"introducing-audiom-for-highcharts-maps","status":"publish","type":"post","link":"https:\/\/www.highcharts.com\/blog\/tutorials\/introducing-audiom-for-highcharts-maps\/","title":{"rendered":"Introducing Audiom for Highcharts Maps"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><strong>Guest post by Brandon Biggs<\/strong><br>CEO, <a href=\"https:\/\/xrnavigation.io\/\" target=\"_blank\" rel=\"noreferrer noopener\">XR Navigation<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Brandon is CEO of XR Navigation, an <a href=\"https:\/\/www.esri.com\/partners\/xr-navigation-a2TUU00000102CX2AY\" target=\"_blank\" rel=\"noreferrer noopener\">official Esri partner<\/a> working in partnership with the <a href=\"https:\/\/nfb.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">National Federation of the Blind<\/a>.<br><br>Maps tell stories that tables cannot. A choropleth of GDP per capita or world population lets a reader see a pattern at a glance. But \u201cat a glance\u201d is exactly the barrier for blind and low-vision (BLVI) people. <a href=\"https:\/\/www.highcharts.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Highcharts<\/a> has treated accessibility as part of the product for years, from keyboard-navigable charts to screen reader support and its <a href=\"https:\/\/www.highcharts.com\/docs\/accessibility\/accessibility-module\" target=\"_blank\" rel=\"noreferrer noopener\">Accessibility module<\/a>. Maps, though, have always been the harder problem. So we teamed up with the Highcharts team to bring <a href=\"https:\/\/xrnavigation.io\/\" target=\"_blank\" rel=\"noreferrer noopener\">Audiom<\/a> directly to Highcharts Maps.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">The barrier with data maps<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/www.highcharts.com\/products\/maps\/\" target=\"_blank\" rel=\"noreferrer noopener\">Highcharts Maps<\/a> powers thousands of dashboards, news graphics, and analytics products around the world. Its Accessibility module already lets screen reader users move through chart data point by point. For a map, though, reading a list of regions and values leaves out the information that makes a map a map: the spatial relationships. Which countries border which. What sits north of what. How a high-value cluster presses up against a low-value one. That spatial layer, what cartographers call landmark, route, and survey knowledge, is hard to convey through a plain data table.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This barrier is bigger than most developers realize. An estimated 1.6 billion people, around 20% of the world, cannot use digital maps: blind and low-vision people, keyboard-only users who navigate without a mouse, and many others. They all deserve an \u201cequivalent purpose\u201d experience, the standard set out in the <a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/Understanding\/non-text-content.html\" target=\"_blank\" rel=\"noreferrer noopener\">Web Content Accessibility Guidelines (WCAG) 1.1.1<\/a>. The law increasingly agrees. In the United States, <a href=\"https:\/\/www.ada.gov\/resources\/2024-03-08-web-rule\/\" target=\"_blank\" rel=\"noreferrer noopener\">ADA Title II now requires state and local government websites and apps, including their maps, to be WCAG 2.1 AA compliant<\/a>. Delivering that for an interactive map takes purpose-built technology.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What Audiom does<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/xrnavigation.io\/\" target=\"_blank\" rel=\"noreferrer noopener\">Audiom<\/a> is our inclusive digital map viewer and editor. Currently all executives and board members of XR Navigation have a disability. A blind user can explore an Audiom map with a keyboard or a touch screen, hear each region announced with its name and value, move between neighbors, and build a mental model of the whole layout through interactive alt-text and audio.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Audiom is not a lightweight add-on. It is <a href=\"https:\/\/xrnavigation.io\/acr\" target=\"_blank\" rel=\"noreferrer noopener\">WCAG AAA compliant with a 3rd-party Accessibility Conformance Report<\/a>, it is grounded in over 13 academic studies with hundreds of blind and sighted participants, and it was one of three recipients of the <a href=\"https:\/\/gaad.foundation\/what-we-do\/gaadys\/winners\" target=\"_blank\" rel=\"noreferrer noopener\">2025 Global Accessibility Awareness Day (GAADY) award<\/a>. In 2024, the <a href=\"https:\/\/nfb.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">National Federation of the Blind passed a resolution<\/a> calling on federal agencies and universities to adopt inclusive digital maps. We built Audiom to meet that call.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How the integration works<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Our <a href=\"https:\/\/github.com\/xrnavigation\/audiom-highcharts\" target=\"_blank\" rel=\"noreferrer noopener\">Audiom-Highcharts plugin<\/a> does the work for you. When your Highcharts map loads, the plugin reads the map\u2019s GeoJSON and mounts an interactive Audiom experience alongside it. Your visual chart stays exactly as you designed it. Sighted and BLVI users get the same underlying data, each in the form that works for them.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You decide how the two experiences sit together with a single display option:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Tabbed<\/strong> (the default): the Highcharts map on tab one, the Audiom map on tab two.<\/li>\n\n\n\n<li><strong>Side-by-side<\/strong>: both experiences visible at once in a flexible layout.<\/li>\n\n\n\n<li><strong>Button<\/strong>: a link-only mode for environments that restrict iframes.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Because the plugin works from the same geographic data your chart already uses, there is no separate map to build or maintain. Update your Highcharts data and the accessible experience updates with it.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">See it in action<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">We have two live demos you can try today. Move through the visual chart, then switch to the Audiom tab and explore the same map with your keyboard or screen reader:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/highcharts.xrnavigation.io\/europe.html\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Europe: GDP per capita<\/strong><\/a>, a choropleth of 2023 GDP per capita across European countries.<\/li>\n\n\n\n<li><a href=\"https:\/\/highcharts.xrnavigation.io\/world.html\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>World population<\/strong><\/a>, a choropleth of 2022 population by country.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Both are on our <a href=\"https:\/\/highcharts.xrnavigation.io\/\" target=\"_blank\" rel=\"noreferrer noopener\">Audiom-Highcharts samples page<\/a>. Each demo also exposes the underlying GeoJSON and the Audiom rules file, so you can see what data drives the accessible view.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Adding it to your own maps<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Getting started takes only a few lines. The <code>@xrnavigation<\/code> packages are published to GitHub Packages, so first add the registry to your <code>.npmrc<\/code>:<\/p>\n\n\n\n<div class=\"hs-code-outer-container\"><div class=\"hs-code-container neutral-50-light neutral-800-dark\" tabindex=\"0\" role=\"region\" aria-label=\"Code block\">\n<pre class=\"wp-block-code\"><code>@xrnavigation:registry=https:\/\/npm.pkg.github.com\n\/\/npm.pkg.github.com\/:_authToken=${GITHUB_TOKEN}<\/code><\/pre>\n\n\n\n<div class=\"wp-block-highsoft-hs-button\"><button type=\"button\" class=\"hc-button hc-button--white hc-button--size-200\" data-copy-code=\"true\" aria-label=\"Copy\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 8V5.2c0-1.12 0-1.68.218-2.108a2 2 0 0 1 .874-.874C9.52 2 10.08 2 11.2 2h7.6c1.12 0 1.68 0 2.108.218a2 2 0 0 1 .874.874C22 3.52 22 4.08 22 5.2v7.6c0 1.12 0 1.68-.218 2.108a2 2 0 0 1-.874.874C20.48 16 19.92 16 18.8 16H16M5.2 22h7.6c1.12 0 1.68 0 2.108-.218a2 2 0 0 0 .874-.874C16 20.48 16 19.92 16 18.8v-7.6c0-1.12 0-1.68-.218-2.108a2 2 0 0 0-.874-.874C14.48 8 13.92 8 12.8 8H5.2c-1.12 0-1.68 0-2.108.218a2 2 0 0 0-.874.874C2 9.52 2 10.08 2 11.2v7.6c0 1.12 0 1.68.218 2.108a2 2 0 0 0 .874.874C3.52 22 4.08 22 5.2 22\"><\/path><\/svg>Copy<\/button><\/div>\n<\/div><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Then install the plugin packages alongside Highcharts:<br><\/p>\n\n\n\n<div class=\"hs-code-outer-container\"><div class=\"hs-code-container neutral-50-light neutral-800-dark\" tabindex=\"0\" role=\"region\" aria-label=\"Code block\">\n<pre class=\"wp-block-code\"><code>npm install @xrnavigation\/audiom-highcharts \\\n            @xrnavigation\/audiom-embedder \\\n            @xrnavigation\/audiom-api-client \\\n            highcharts<\/code><\/pre>\n\n\n\n<div class=\"wp-block-highsoft-hs-button\"><button type=\"button\" class=\"hc-button hc-button--white hc-button--size-200\" data-copy-code=\"true\" aria-label=\"Copy\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 8V5.2c0-1.12 0-1.68.218-2.108a2 2 0 0 1 .874-.874C9.52 2 10.08 2 11.2 2h7.6c1.12 0 1.68 0 2.108.218a2 2 0 0 1 .874.874C22 3.52 22 4.08 22 5.2v7.6c0 1.12 0 1.68-.218 2.108a2 2 0 0 1-.874.874C20.48 16 19.92 16 18.8 16H16M5.2 22h7.6c1.12 0 1.68 0 2.108-.218a2 2 0 0 0 .874-.874C16 20.48 16 19.92 16 18.8v-7.6c0-1.12 0-1.68-.218-2.108a2 2 0 0 0-.874-.874C14.48 8 13.92 8 12.8 8H5.2c-1.12 0-1.68 0-2.108.218a2 2 0 0 0-.874.874C2 9.52 2 10.08 2 11.2v7.6c0 1.12 0 1.68.218 2.108a2 2 0 0 0 .874.874C3.52 22 4.08 22 5.2 22\"><\/path><\/svg>Copy<\/button><\/div>\n<\/div><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Initialize the plugin with your Audiom API key, choose a storage backend for the map\u2019s GeoJSON, and build your map chart as you normally would:<\/p>\n\n\n\n<div class=\"hs-code-outer-container\"><div class=\"hs-code-container neutral-50-light neutral-800-dark\" tabindex=\"0\" role=\"region\" aria-label=\"Code block\">\n<pre class=\"wp-block-code\"><code>import * as Highcharts from 'highcharts\/highmaps';\nimport AudiomPlugin, { SourceBackend } from '@xrnavigation\/audiom-highcharts';\n\nAudiomPlugin.init(Highcharts, {\n  apiKey: import.meta.env.VITE_AUDIOM_API_KEY,\n  backend: SourceBackend.inline()   \/\/ pick one, see \"Backends\"\n});\n\nHighcharts.mapChart('chart-container', {\n  chart: { map: 'custom\/world' },\n  title: { text: 'World population' },\n  series: &#91;{ type: 'map', data: &#91;\/* \u2026 *\/] }]\n});<\/code><\/pre>\n\n\n\n<div class=\"wp-block-highsoft-hs-button\"><button type=\"button\" class=\"hc-button hc-button--white hc-button--size-200\" data-copy-code=\"true\" aria-label=\"Copy\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 8V5.2c0-1.12 0-1.68.218-2.108a2 2 0 0 1 .874-.874C9.52 2 10.08 2 11.2 2h7.6c1.12 0 1.68 0 2.108.218a2 2 0 0 1 .874.874C22 3.52 22 4.08 22 5.2v7.6c0 1.12 0 1.68-.218 2.108a2 2 0 0 1-.874.874C20.48 16 19.92 16 18.8 16H16M5.2 22h7.6c1.12 0 1.68 0 2.108-.218a2 2 0 0 0 .874-.874C16 20.48 16 19.92 16 18.8v-7.6c0-1.12 0-1.68-.218-2.108a2 2 0 0 0-.874-.874C14.48 8 13.92 8 12.8 8H5.2c-1.12 0-1.68 0-2.108.218a2 2 0 0 0-.874.874C2 9.52 2 10.08 2 11.2v7.6c0 1.12 0 1.68.218 2.108a2 2 0 0 0 .874.874C3.52 22 4.08 22 5.2 22\"><\/path><\/svg>Copy<\/button><\/div>\n<\/div><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Our full <a href=\"https:\/\/github.com\/xrnavigation\/audiom-highcharts\/blob\/main\/plugin\/README.md\">plugin README<\/a> covers configuration in detail, including several storage backends for your GeoJSON (self-hosted URLs, a REST endpoint, S3, or direct upload to the Audiom cloud) and per-chart customization through the chart\u2019s audiom options.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What is next<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">This is version 0.1. We are already working on support for map bubble charts and on matching Audiom\u2019s projection and zoom to the Highcharts rendering even more closely.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Your dashboard should work for every person who opens it, and now that includes the map. <a href=\"https:\/\/xrnavigation.io\/contact\" target=\"_blank\" rel=\"noreferrer noopener\">Please contact us to get your Audiom API key and to talk about making your Highcharts maps accessible<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Guest post by Brandon BiggsCEO, XR Navigation Brandon is CEO of XR Navigation, an official Esri partner working in partnership with the National Federation of the Blind. Maps tell stories that tables cannot. A choropleth of GDP per capita or world population lets a reader see a pattern at a glance. But \u201cat a glance\u201d [&hellip;]<\/p>\n","protected":false},"author":32,"featured_media":31490,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"meta_title":"Audiom for Highcharts Maps: Accessible Data Maps","meta_description":"Highcharts and Audiom bring screen reader and keyboard support to interactive maps, giving blind and low-vision users an equivalent map experience.","hc_selected_options":[],"footnotes":"","_members_access_role":[],"_members_access_error":""},"categories":[224,210],"tags":[789,876],"coauthors":[1121],"class_list":["post-31480","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-post","category-tutorials","tag-accessibility","tag-highcharts-maps"],"_links":{"self":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/31480","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=31480"}],"version-history":[{"count":5,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/31480\/revisions"}],"predecessor-version":[{"id":31609,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/31480\/revisions\/31609"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media\/31490"}],"wp:attachment":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media?parent=31480"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/categories?post=31480"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/tags?post=31480"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=31480"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}