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, 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, 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
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.
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 is an especially important concern for accessibility. Review WCAG’s requirements for color contrast and check your color-pairs using the Bureau of Internet Accessibility’s a11y® Color Contrast Accessibility Validator.
Related: 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 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 should be clear, concise, and descriptive.
Here’s an example of proper alt tags from the W3C:
<img src="welcome.gif" usemap="#map1"
alt="Areas in the library. Select an area for
more information on that area." />
<map id="map1" name="map1">
<area shape="rect" coords="0,0,30,30"
href="reference.html" alt="Reference" />
<area shape="rect" coords="34,34,100,100"
href="media.html" alt="Audio visual lab" />
</map>
For more technical guidance, review the W3C’s technique page for area elements of image maps.
4. Allow users to change the map’s visual presentation to meet their preferences
Many users “zoom in" 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 or send us a message to connect with an accessibility expert.
