> **Heads up:** The interactive webmap examples on this page require JavaScript and may some bandwidth when displaying layers. Some examples are purposefully inaccessible (for demonstration purposes) but will be hidden by default. If this impacts your experience, I will aim to provide a version without interactive examples.
GIS, particular web mapping, is a huge passion of mine and also something I get to work in on the reg. Web maps can be very complex user interactable pieces but in doing so they can often become inaccessible in various ways to various users. I'm structuring this piece in two major sections; the first of which deals with some more commonly raised accessibility issues in web maps and how to work around them and then I'll deal with the more controversial topic: you probably don't need a web map.
# Preamble - Define "Inaccessible"
When it comes to accessibility in software and web the most common accessibility issue is vision - specifically total blindness requiring a user to use a screanreader. Unfortunately, this can harm "accessibility" as a topic because:
1. Some shitheels try to cut you off saying that blind people are such a small percentage of possible clients so why should they have to rewrite their ngLatestFrameworkApp for such a low-value clientelle?
2. Accessibility isn't about blindness.
It's about lack of or difficulty in access - which crops up in far more places. I'd strongly recommend reading [Microsoft's Include 101 Guidebook](https://inclusive.microsoft.design/tools-and-activities/Inclusive101Guidebook.pdf) featuring one of the most unfairly misaligned infographics that I have reproduced below:
This is a great framework to start looking at acessibility, how many people can't use your fidgety interface because they're carrying a child? How many people can't call your support line because they're sick or your silly [IVR](https://www.zendesk.com/au/blog/what-is-ivr/) can't understand them? How many want a transcript and screenshots of your video tutorials because they're still on the phones and can't keep pausing and rewinding?
The last one also segues into another important part of accessibility: does your user have the same access to spenno technology? Can they not watch your video tutorial because their third generation hand-me-up Samsung Galaxy S3 chugs and you don't have adaptive bitrate to let them view it under 4K? Are they in an area with bad cell service and it takes forever to download your JavaScript bundle on what remains of a 3G connection?
These are *all* issues of accessibility too; you can't control your user's capabilities or those of the interface outside your app but it's very easy to make it usable if you follow a few simple principles.
# Designing Web Maps For More Users
## The Visual
We're entering an era where more of the visual aspect of accessibility is becoming a common point to examine in multimedia experiences: how could this game be played by people with colour blindness, how does this font choice and sizing and layout impact those with lower vision? So because it's the low hanging fruit people expect me to hit, let's tackle it quickly.
## Colour Blindness
Don't use a multi-tone scale for displaying data. A "traffic light" system of red/amber/green is a one of the most recognised ways to show people where areas on a map have Good Results™ or Bad Results™ but it also makes it harder for people who are red-green colourblind. In general, a scale that morphs through any combination of colours to represent results will be an impediment to at least some people with a [colour vision deficiency](https://www.nei.nih.gov/learn-about-eye-health/eye-conditions-and-diseases/color-blindness/types-color-vision-deficiency). It's alright though, there's a very simple solution: use a single colour scale. Something that goes from black to white, black to full colour, or transparent to full colour will serve your users effectively.
If your dataset has a basemap visible underneath it you need consider how that impacts your choice of scale. If you're showing [NDVI](https://eos.com/make-an-analysis/ndvi/) with green representing values approaching one (healthy vegetation) and you layer with some transparency over a beautiful lush forest satellite imagery you've made it useless to people with low vision and honestly probably even people with 20/20 vision and no colour deficiencies. Think about the context of your data and style choices. Maybe a black-white scale or a styled vector basemap would be appropriate.
If you have multiple datasets showing at once you must provide options to turn them and off, be aware of those conflicting colour schemes.
> Create examples:
> 1. Example with a common but bad style.
> 2. Example showing what it could like to people.
> 3. Example with a good scale.
> 4. Example with multiple, adjustable scales/layers.
References:
- https://github.com/skratchdot/color-blind/blob/master/lib/color-blind.js
- https://stackoverflow.com/questions/17242144/javascript-convert-hsb-hsv-color-to-rgb-accurately
## Mobility Limitations
Make sure your web map is accessible via a mouse and touchscreen and you'll cover more than 90% of users. Make it work with a keyboard as well and you'll capture a huge part of the remainder. But just because they can "interact" with it, doesn't mean they can use it. Think about
## Proportional Maps
https://www.abc.net.au/news/elections/federal/2025/results (see also screenshots folder)
Contrast the US government red/blue non-propertional map.
## Cognitive Overload
Show maps of SA1/SA2/SA3/SA4.
{{< 2025-05-23-accessibility-in-gis-js "http://localhost:5173/sentinelmosaic/{z}/{x}/{y}.png" >}}