---
title: "Interactive Maps and Accessibility: 4 Tips"
description: Interactive maps can have accessibility issues that impact your users. Here’s how to avoid common mistakes by following WCAG.
---
[Digital Accessibility Blog ](https://www.boia.org/blog)
# [Interactive Maps and Accessibility: 4 Tips](https://www.boia.org/blog/interactive-maps-and-accessibility-4-tips)
Written by [Anita](https://www.boia.org/blog/author/anita) | Sep 8, 2022
Inclusive design means making *all* of your content accessible for as many users as possible. That’s still true when you’re implementing features that rely on a certain type of sensory perception.
Interactive maps are one example. For most purposes, using an online map requires vision — but by thinking about accessibility, you can build maps that work for a wider range of users.
The Web Content Accessibility Guidelines (WCAG) is the international standard for digital accessibility. WCAG contains several success criteria that are applicable to interactive maps, which we’ll discuss below. For more guidance, send us a message to connect with a subject matter expert.
## 1. Make sure your map is keyboard accessible
Many people use a keyboard alone (without a mouse) to navigate the internet. Interactive maps can introduce keyboard accessibility concerns, particularly if they rely on Javascript. If your map widget isn’t designed to be keyboard-focusable, it can frustrate users — and potentially create [keyboard traps](https://www.boia.org/blog/avoid-keyboard-traps-to-make-your-site-more-accessible), which prevent users from navigating away from the map.
WCAG 2.1 Success Criterion (SC) 2.1.1, “Keyboard,” requires content to be operable with a keyboard interface, with limited exceptions for certain types of content. WCAG also prohibits keyboard traps under WCAG 2.1 SC 2.1.2, “No Keyboard Trap.”
If you’re using a third-party widget, check to make sure that the map is functional for keyboard users. Some popular options, including [Google Maps](https://support.google.com/maps/answer/6396990?hl=en&co=GENIE.Platform%3DDesktop), feature built-in support for keyboards and screen readers (software that converts text to audio or braille).
Whether or not you’re using an accessible map widget, you’ll need to test your site. A simple method: Use the *Tab *and *Shift-Tab *commands to navigate your page. If you become stuck on a certain element — or if you can’t easily understand how to control the map — you might need to make some changes.
Related: [Give Yourself an Accessibility Test: Don't Use a Mouse](https://www.boia.org/blog/give-yourself-an-accessibility-test-dont-use-a-mouse)
## 2. Don’t rely on color alone to provide information in your map
While you may use color to highlight important parts of your map, color shouldn’t be the *only *way you deliver information. For example, if your map’s instructions read, “Our location is highlighted in red,” you’ve made a basic assumption — that your users can visually distinguish the red part of the map from the rest of the content.
That isn’t an accurate assumption: Some users may have vision-related disabilities that prevent them from identifying colors. In fact, color vision deficiency (also called CVD or colorblindness) affects about [5 to 10% of the U.S. population](https://www.cbsnews.com/news/race-gender-color-blindness-risk/).
Ask these questions when reviewing your interactive map and its instructions:
- If color is removed, does everything make sense?
- If I use color to highlight certain information, can users get that information another way?
- Could I use icons, text, or other tools to identify important info?
- Does my text have an appropriate level of contrast with its background?
Since low-contrast text can be difficult to read, [color contrast](https://www.boia.org/blog/what-is-color-contrast) is an especially important concern for accessibility. Review [WCAG’s requirements for color contrast](https://www.boia.org/blog/the-basics-and-importance-of-color-contrast-for-web-accessibility) and check your color-pairs using the Bureau of Internet Accessibility’s [a11y® Color Contrast Accessibility Validator](https://color.a11y.com/?bp09).
Related: [Use of Color for Accessibility Explained](https://www.boia.org/blog/use-of-color-for-accessibility-explained)
## 3. Provide a text alternative for the map and important markers
Regardless of the steps you’ve taken to make your maps accessible, people with vision disabilities may be unable to perceive them.
[WCAG SC 1.1.1](https://www.boia.org/wcag2/cp/1.1.1) requires text alternatives for non-text content, and maps certainly qualify. You can provide this text alternative on the same page as the map, on a linked page, or via the HTML *alt* attribute.
Often, the simplest method is to write an introduction on your map page that provides all of the necessary information. For example, if your map shows the location of your office, you can provide your physical address along with driving directions and nearby landmarks. This text should appear at the beginning of the page, which will enable screen reader users to decide whether they want to read the map itself.
### Defining important areas with the HTML *alt *attribute
The *alt *attribute can be used to further improve accessibility. Selectable regions within the map should be defined by HTML *area *elements, with *alt *attributes that describe their purpose. All [text alternatives](https://www.boia.org/blog/what-is-the-best-way-to-write-alternative-text) should be clear, concise, and descriptive.
Here’s an example of proper *alt *tags from the W3C:
For more technical guidance, review the [W3C’s technique page for *area *elements of image maps.](https://www.w3.org/TR/WCAG20-TECHS/H24.html)
## 4. Allow users to change the map’s visual presentation to meet their preferences
Many users “[zoom in](https://www.boia.org/blog/give-yourself-an-accessibility-test-zoom-your-page-to-200)" on content in order to make it more readable. JavaScript map widgets may not support this functionality. When this is the case, the user may try to zoom in using keyboard commands, which enlarges all of the content on the page *except *the map.
While people can use screen magnifier software to get around this limitation, you’ll still want to provide your visitors with as many options as possible. The best option: Use a map widget that can be enlarged by at least 200%. You can also offer a larger version of the map for users who prefer that presentation.
Remember, prioritizing accessibility helps you grow your audience. WCAG provides the best roadmap for improving the experiences of *all *users, so test your content against WCAG checkpoints regularly.
Get started with a [free automated website analysis](https://www.boia.org/products/free-wcag-2-0-aa-report/) or [send us a message](https://www.boia.org/contact) to connect with an accessibility expert.
[View full post](https://www.boia.org/blog/interactive-maps-and-accessibility-4-tips)
```json
{
"@context" : "http://schema.org",
"@type" : "BlogPosting",
"author" : {
"@type" : "Person",
"name" : "Anita"
},
"dateModified" : "2023-07-05T18:44:46.958Z",
"datePublished" : "2022-09-08T11:26:00Z",
"headline" : "Interactive Maps and Accessibility: 4 Tips",
"image" : {
"@type" : "ImageObject",
"height" : 700,
"url" : "https://24461487.fs1.hubspotusercontent-na1.net/hubfs/24461487/Image%20of%20a%20light%20blue%20world%20map.jpeg",
"width" : 1000
},
"mainEntityOfPage" : "https://www.boia.org/blog/interactive-maps-and-accessibility-4-tips",
"publisher" : {
"@type" : "Organization",
"logo" : {
"@type" : "ImageObject",
"height" : 60,
"url" : "/hs/hsstatic/content_shared_assets/static-1.4092/img/default-amp-logo.png",
"width" : 60
},
"name" : "Digital Accessibility Blog"
}
}
```