This post assumes that you have basic familarity with web maps and concepts like zoom level. This post is also not fully complete and can use a little bit more editing and polish.

At my workplace, we’re redesigning a landing page of our Ohio Authors Initiative that highlights the lives of over 300 Ohio authors, each with individual biographies (like this one of Amy Braunschweiger).

The Literary Heritage Map by the Pennsylvania Center for the Book is loved by our Literature librarians and I was asked “could I do something like that?” (well, in the back of my mind, not exactly like that since we don’t have an ESRI license ;)

And yes, I thought a map would be appropriate for this (the first question to ask even before making a map), so we could:

  • effectively communicate that Ohio Authors are generally spread geographically all over Ohio; with the Cleveland, Columbus, Cinncinnati, dominating as you’d expect; with college towns like Athens, Yellow Springs, Kent, and Oberlin punching up. The southeastern portion of the state had fewer authors.

  • allow readers to browse authors geographically: without knowing of names of cities/towns in Ohio, browse by region, instead of thinking of and searching by each city (what is currently available)

How should I represent the points on the map?

My initial thought, given the contraints in the existing data set:

  • There are over 120 unique towns/cities; over 350 authors, all within the State of Ohio

  • Each Author has 1 town/city associated with it (determined by our librarians, based on the author’s current residence or where they grew up) .

For context, each author has their own dedicated ‘page’ and we can assign a city/town with it (In WordPress lingo, we have a custom post type, ohio_author, and there is a custom taxonomy named ohio_author_city. Then in the back end/wp-admin, I would geocode that that city’s name into latitude and longitude coordinates, stores the lat/lon as custom fields, then fetch those custom fields

So, How to display the markers in a map that is accessible for all of our patrons so they could geographically browse the locations of Ohio Authors?

Markers and The Marker Cluster

My initial approach that we could build a map and that marker cluster; having built maps in the past, I knew that markers were keyboard accessible (or I thought!).

Markers are the common name for individual points on a web map and are often interactive for the user, often with a openable pop-up window to display further information.

Marker Clusters are points that aggregate more points when you want to want to represent all points at lower zoom levels to the user without overwhelming the user or cluttering the map.

Marker Clusters are used in the popular web map libraries like Leaflet, google maps, mapbox GL, maplibre, and ESRI although ESRI calls them point clusters.

With a few hundred points in the State of Ohio - I instantly thought of marker clustering as the way to represent all of those markers on the map.

The goal with marker clustering, with adding one marker on the map for each author whose city would be geocoded (to the same, centroid point within that city’s boundaries;

I didn’t want to assign a random point within a city’s boundaries for every author - with a random placement, people may that a particular geographic location (where the singular marker is located) in the city would have meaning to the author.

for example, 3 markers within a small town; one is randomly placed within a lake or river, another may be randomly placed in on a street, the map viewer would think maybe the author (of that marker) was associated with);

and a randomly placed marker that is on eastern edge of one city Y and then a randomly placed marker that is on the western maybe very geographically close even though they were for different places.

Screenshot from 2025-12-02 13-50-11.png

  • is the hundreds of markers on the map; although these are randomly placed and one for every

My initial approach was to use Google Maps library because our branch location map uses Google maps and we have a lot of existing code behind the scenes, including geocoding, and I’d like to reuse as much as possible.

Besides, I hadn’t used google maps

Before, I fully build out the map, I wantd proof of concepts down and simpler examples and I wanted to make sure the marker clusters are accessible by keyboard.

Web Accessibility

The goal of web accessibility is to generally make all content and functionality to be accessible, usable, by all users; regardless of their motor skills, vision, or hearing. Keyboard accessibility - ensuring that all functionality and content on a web page can be done through only the keyboard (more details) is a key (pun intended) part of making a web site accessible and one that I’ll focus in this article. There are other aspects to make a website accessibility and a web map, but for this post’s length, I’m focusing just on keyboard accessibiliy.

For the unaware and those following and wish to test out the keyboard accessibility of a map: Tab is the keyboard shortcut to move between interactive elements* (links, buttons, form fields like search text boxes, dropdown menus, etc); then within those interactive elements, arrow keys are used to further navigate. Tab + shift is used to access the previous interactive element. For accessing the markers within the map, when the keyboard focus (often visually designated by an outline around the element currently focused) is on the larger map, that is when you press the arrow keys, as shown below: (There are many, many exceptions to these keyboard shortcuts).

Robert Linder thoroughly reviewed several map libraries’ basic functionality for accessibility although that didn’t include markers and marker clusters or any markers. I hope this blog post provides some useful analysis and recommendations of going forward for marker and marker clusters on web maps.

While most users will use a mouse or their hand to tap and open a marker cluster; we should not assume that all users place the cursor or I cannot assume (no should you as a web developer) that a person will use a mouse to access information.

—— EDIT The Goal with our map, is:

to have markers to show (which places/towns have more authors than others ) on the map, and

Have on each marker, allow the user to open the marker (or markercluster) (through a marker pop-up) to view the list of authors associated with that city.

The thought was to do this was with marker clusters and make 1 marker for each author but on the marker cluster, combine markers and list all of the authors at the lat/lon.

I was imagining something pretty close to:

—– edit ed

Map Library Marker Cluster Performance

Google Maps:

tl;dr: Frustrating and inconistent for accessing markers and marker clusters by the keyboard

Marker clustering is not included into the default Google Maps JS library so I forked the google maps’ markercluster library and wanted to get some smaller examples. I modified the examples in the examples directory on google maps’ github

(Most of my examples do not include every marker that would be in my map; I only added 20-35 markers as a test)

So, let’s get an accessible (at least for keyboard accessibility) marker cluster example up and running! Follow along in my github fork.

My first initial examples (as code) and then as a page Here, I couldn’t even access a single marker by keyboard. We have dozens of towns that only have one author associated with that town; so just accessing a single marker is necessary.

BUT I learned by default, markers in google maps do not receive any keyboard focus (cannot be accessed by tab) and that is intentional.

Markers are not tabbable by default according to a June 2021 blog post by google employee Chris Shull. According to Chris, markers that do not have a click event (any action that would happen like a pop-up window) attached to the marker are assigned an “img” accessibility role,” meaning that they are skipped over in most assistive technology and cannot be accessed by a keyboard.

I understand but disagree with google’s perspective: perhaps their rationale was that if there’s no additional information like a pop-up on a marker, why have the focus on the marker? But the markers (or marker clusters) themselves are informational - stating where the particular marker or point is located - and you should want to communicate that information to all of your readers.

(On the other hand, perhaps the map author could state how many markers appear on the map or outside of the map itself. If someone is visually impaired, may they want to know ‘how many markers are appear on the map ? , or where is that marker even placed ?)

I realize OK, I needed to add the property “gmpClickable: true” to the AdvancedMarkerElement so individual markers can accessed by the keyboard. and override the default behavior. I found it odd that markerclusters can be accessed by the keyboard by default, but individual markers are not., for the reasons mentioned above

In my next code commit from 12/25, the individual markers and marker clusters markers were both now focusable by keyboard With my working example.

I then needed to figure out how to create the event listener pop-up for each marker so when the marker was opened (By keyboard, tapping on it, or clicking); the information from the pop-up would eventually display there. I found an example in the google maps’ accessible markers doc. I added the pop-up infoWindow for each marker in this commit. In my eventual map, the pop-up window will contain the list of authors associated with that town/place (more on that later)

(Note to anyone who comes across this : If you’re using google’s js-markercluster library and want to share their examples after cloning the repository:

run npm run docs in js-markerclusterer directory that will compile/build your changes that made in the examples folder into the public folder , which you can then upload anywhere on the web * (of course, you have to provide your own google maps API key). This info is missing from the readme and was not obvious to me in the documentation (although I figured out it by deciphering the package.json)

At my next commit, As of Jan 17th commit, but with the markerclustering library, I haven’t figured out. With my working example.

(I’m aware in this commit, even under all conditions, you cannot open the pop-up for the marker clusters, that is because there are multiple markers at the same lat/lon and I restricted the zoom level, leading to my plan)

The Accessibility issues with Google Maps

Keyboard accessibility: madly inconsistent . Some times, I could access (by keyboard) all of the markers and marker clusters; other times, I could only access the marker clusters by keyboard and the individual markers were not accessible. Other times, all but one marker could be accessed. This was across multiple computers and operating systems (Windows 11, Chrome and firefox) and (Firefox 147 and Chrome on Ubuntu 22.04). I couldn’t determine a cause or pattern.

Even if I couldn’t access all of the marker or marker clusters by keyboard, all markers and marker clusters were listed through NVDA and Jaws (screen reader) through as shown in the screenshot below. Although clumisly, someone could move the keyboard focus to the marker cluster BUT they (if I had properly the names of the towns in each marker, instead of a generic hello world). Again, though, someone should be able to access all markers without having to use a screen reader

(NEED SCREENSHOT)

For marker clusters, assistive technology will say “cluster of X markers” (replace X with the number of markers) - . As I mention earlier, adding the geographic context (even a rough location) of the marker cluster would be invaluable;; stating something like “33 markers around Cleveland, Ohio)” like in this example. For someone , they could know which of the marker clusters to browse to; otherwise, they just see as shown in the screenshot.

something like it could inform someone using NVDA or another screenreader (or anyone who has vision have the vision broadly, knowing, This behavior of stating of providing ‘X clusters of markers” is also common to Leaflet as well. (On the other hand, adding the functionality of the marker detecting that extra bit of geographic knowledge, is not simple, although it’s a worthy challenge).

I had the same inconsistent results with the marker clustering example from Google as shown in the following (Very sped-up) image, so I’m not just alone.

keyboard focus Cycling through 4 of 5 possible markers on a google map View this gif as a slower webm.

Try yourself with the keyboard (Remember, tab to move across each element, tab + shift to go back)

Positively, when you open a pop-up on a marker, the focus is moved to the marker so you can then close the marker immediately or interact with the marker’s contents (like visiting a link). This is consistently reproduced.

So, where I'm at right now for my project

As of Jan 17th commit, but with the markerclustering library, I haven’t figured out. With my working example.

(I know in this commit, even under all conditions, I cannot open the pop-up for the marker clusters, that is because there are multiple markers at the same lat/lon and restricted the zoom level, leading to my plan)

As I drafted this blog post and encountered that above issue for the I wondered - do i really need to actually cluster the markers ?

My initial proof of concept, I rendered over 300 individual markers, at instead of a - a crucial mistake.

I almost regret that I did spend so much time on the blog post and investigating marker clusters.

I had thought of another approach:

how would it look without the marker clustering ?

Instead, do I not need 1 marker per author? just create one marker per city and style that marker based on the number of authors who are affiliated with that city?

As an alternative: I removed the marker cluster, and have one marker for each city ( commit ) and here’s the this example visual example

Again, this is just my mockup, and hey, i can access each marker at this point by keyboard, I need to access every markers’ contents

  • But, I need to visually represent how many authors are at each city (that would be helpful, i think on the map)

My current idea/approach is the following:

Ditch the marker clustering, instead:

create a foreach loop, For each author that comes through (which has properties like, the author’s name, the associated city (as a text field) and the lat/lon pair:

  • see if there already a marker created for that lat/lng pair:
    • If no marker for that lat/lng pair,
      • create a marker at tha lat/lng, create a pop-up window with the city/place name, and create a list and insert a link to the author’s biography <li> author nameassociated with that lat/lon pair</li>
    • If a marker already exists at lat/lng pair,
      • find that marker, modify the pop-up-windows contents, and add the <li> author nameassociated with that lat/lon pair</li>
      • increase the numerical value of a variable (authorCount) that I had made within the foreach loop
      • increase the marker’s width based on the AuthorCount and then increase the marker’s width/and or changes the marker’s color based on that AuthorCount)

This would then end up with something like (of course with the marker modified):

rateyourmusic, a cataloging service of music (like letterboxed for music), displays a map of artists whose albums you’ve reviewed (a live link to the map requires you to be registered and logged into their website) and this is pretty darn closer to what I’m imagining although there’ll be (credit to Luke Everhart for suggesting to me rateyourmusic as inspiration)

map of several circles in various sizes over new york city, with osm base map, and pop up window listing musical artists

Other Web map libraries:

(I had briefly experimented with these but I am not including each commit, this article was gitting long and you’ll mapbox and maplibre’s initial results weren’t great. )

Mapbox GL and Maplibre

Mapbox and Maplibre, a fork of Mapbox, have 2 approaches to render point geometry as ‘markers’: neither are acceptable for keyboard accessibility and don’t follow .

One approach, if you add the points as a map layer:

When the points are added as a map layer, Mapbox and Maplibre.GL’s markers and marker clusters are NOT keyboard accessible. Regardless whether or not you attach an event or pop-up to the points; you cannot access them with a keyboard.

Mapbox’s cluster example rendering earthquakes(data from a 3 week period in 2015-16) and Maplibre’s nearly-identical Marker Clusters example are 2 examples where your points (the geometry) are added as a map layer and

Below is the Maplibre’s marker clusters example using Jaws 2022, listing of In jaws just listing the light/dark mode, a search input, a clear, and the map’s controls ; only map attribute is directly associated with the map; the rest are a part of the larger web page.

This violating one of the most basic tenets of accessibility ; not making the map’s markers accessible by keyboard.

Ironically, when you click on an individual marker using a mouse (or ), the keyboard focus does move to the marker (which isn’t done in Leaflet); so you can close the marker’s info window with the keyboard.

By inspecting the DOM, you’ll notice that the map is rendered in the canvas element Increased speed of , he advantage of is increased speed and some consistent styling

Although canvas is a part of the DOM Tree; canvas accessibility, is well, still has ways to go. Kanaru Sato wrote an informative piece in 2024 about the state of accessibility in Canvas.

MDN recommends to not use canvas for accessible elements(although that is probably too strong of a recommendation).

Other Approach in mapbox/maplibre, rendering points as a Marker (API Doc).

Rendering points as marker results in some better accessibility experiences:

Just rendering points as markers will not immediately create a more accessible experience in Mapbox or Maplibre.

If you don’t attach an event to the marker like a pop-up, you will not be able to they will not be accessible by a keyboard like in Mapbox’s default markers example. I

If you attach an event (like a pop-up to the markers), the markers usually* become accessible to the keyboard.

In this dynamic markers example from mapbox done in react, markers are attached to the DOM but but the markers are assigned role of img which removes the In this map, the arrow keys are used to navigate the area displayed on the map. ()

https://docs.mapbox.com/mapbox-gl-js/example/cluster-html/

  • the default markers, with no pop-up interaction, like google, they aren’t focusable, don’t announce their location, just exposed

  • When you add the ; they’re not much better;

There’s a lot of ; of people asking how to

When this displays in it just renders as “Map Marker” (even if you )

There is a 2nd approach: which does render the clusters in the DOM however, mapbox marks them as role=img, so they cannot be accessed by the keyboard. As a short-term fix, If they had assigned an aria-role as a button, then maybe keyboard only user could open the element, and , just as a user with a mouse can click on the

Single markers can be exposed to the DOM; if you follow this Mapbox Tutorial (More information this github ticket). The clusters are there for

MapLibre

MapLibre, a fork of Mapbox-GL, unsurprisingly suffers same issues as Mapbox-GL.

If you add the geographic data as a map layer, it will be rendered in the canvas and not accessible by the keyboard as shown in

But if you add your data as a marker AND offer additional interaction (like a pop-up), the marker will be added (assigned a role=button )

as shown in this attach a pop-up to a marker maplibre example

the lack of marker accessibility is mentioned in https://github.com/mapbox/mapbox-gl-js/issues/11763 and it was recently resolved in Maplibre (there is the other library, )

Accessing by keyboard was very recently implemented (in January 2026) in MapLibre, v. 5.9.x, in this PR request by https://github.com/maplibre/maplibre-gl-js/pull/6517 by Corado Burcus.

https://github.com/maplibre/maplibre-gl-js/issues/356

But, Mal Wood-Santoro’s a11y-map-gl plugin for MapLibre for is really promising; I’ve yet to experiemnt with it.

Leaflet:

Leaflet will be my next option that I’ll thoroughly try if Google Maps doesn’t work out. This Leaflet Map from the little free library utilizes marker clusters, can be toggled through the keyboard but they cannot be opened by the keyboard.

Leaflet’s 2.0 release is pretty soon as of this writing and it’s a complete re-write. Marker Clustering is a plugin that has to be added. built into there has been extensive Work by https://kristjanesperanto.github.io/Leaflet.markercluster/example/marker-clustering-accessibility.html where the marker clustering and are accessible by keyboard! Although, there are other marker related issues like the https://github.com/Leaflet/Leaflet/issues/2199#issuecomment-443891218 https://github.com/Leaflet/Leaflet/issues/8115

Within Leaflet, there is the ability to customize the To customize the aria-label that’s passed along and https://kristjanesperanto.github.io/Leaflet.markercluster/example/marker-clustering-accessibility.html . This means, when you , !

I’d love to test this more but this looks very promising!

Spidering, an alternative to Marker Clustering:

Spidering is another method that i had thought of as well and tested very early in map-making process but the google maps’ spidering library is no longer maintained and fails basic keyboard accessibility - lead to keyboard traps (being unable to exit the spider marker using only the keyboard). I could fork it (and some updates have been proposed ) and rewriting but my time is limited.
I’d probably rather use Leaflet than spend the time updating a google maps library.

Secondly, I don’t think spidering would be as aesthetically clear for the user either.

Summary

Maps traditionally have been a visual medium and implemented as such. (hot take:) But we have to turn that assumption on its head and remember what are maps’ purpose are also abou communicating spatial information to its users. Most online web maps still focus on visually communicating that information (understandibly so) and to use the mouse for interactions.

Map Libraries:

  • include a rough location of the marker or marker cluster in its aria-label.
  • consistent marker tabbing on google maps

There’s a lot of improvement for making maps with markers and marker clusters more accessible, some of which you can do if you’re making web maps yourself:

  • Use leaflet if you’re , their support is the most promising.

  • include an input searchbox where a user could enter a text term of the geographic area that they want to search, which is then geocoded and moves the keyboard focus marker as a supplement to have to tab and move through what could be tens of marker clusters. (this should be doable)

Long term: I think there’s a more re-imagining of what the accessible web map will be.

I hope that this post moved the ball a little forward and I found Audiom although is promising although its source isn’t publicly available (but based on and requires you to contact them.