Maps
Road maps can present accessibility challenges. In the best practices below, we are addressing ways to improve the accessibility of road maps. Floor plans present a different set of challenges, and can best be handled by in-person assistance, or perhaps a 3D model.
Best Practices
- Text-based directions: If the map is used to provide directions to a location, make sure to also provide text-based directions, or a link to text-based directions adjacent to the map.
- Alt attributes: If you are using a static image for the map, make sure to include a descriptive alt tag. Embedded maps, such as Google Maps, should include a
titleattribute. (See below for an example). - Multiple locations: If you are using a map to display multiple locations, provide a text list of locations.
- Color and contrast: If a map includes color coded regions, make sure that there is sufficient contrast between the text and the background, and that color coding is accessible for users with color-deficient vision. A good test is to see if the map is still usable in black and white.
- Consistency and simplicity: Keep maps consistent and simple in their styling.
- 3D or tactile version: You may want to have a tactile map available for non-sighted users.
Google Maps
An embedded Google Map alone is not screen reader accessible. When using Google Maps, follow these tips:
- Descriptive heading: Include a heading right before the map iFrame which describes the purpose of the map.
- Determine the purpose of the map: If the map is on the page to show landmarks, describe those landmarks and their locations, either in an unordered list or a paragraph. If the map is to show directions, then those directions should be spelled out in basic, text-based directions.
- Title attribute: A Google Map is typically embedded within an iFrame. Make sure the iFrame includes a
titleattribute.
Embedded Google Map Example:
In the example below, we’ve embedded a Google Map, and we’re setting it off with a descriptive heading which is also linked to the Google Maps site. A screen reader should announce that the heading is a link, and if the user chooses, they will be taken to the Google Maps site. On mobile devices with the Google Maps app installed, users should be automatically prompted as to whether or not they’d like to open the link in their Google Maps app. Under the heading, we have provided a description of where the Carnegie Musuems are, as that is the landmark we are highlighting with the Google Maps iFrame.
Based on our research, users relying on screen reader software use the Google Maps mobile app frequently, and find it easy to use.
Live Example
Carnegie Museum & Library Location:
The Carnegie Museums of Pittsburgh are located at 4400 Forbes Avenue in the Oakland neighborhood of Pittsburgh, PA and shares the same building space as the Carnegie Music Hall and the Carnegie Library of Pittsburgh Oakland branch.
ESRI, GIS, and StoryMaps
These suggestions are specifically geared towards visually impaired users.
- There seems to be no great way, at this moment in time, for visually impaired and blind users to interact with ESRI maps, StoryMaps, etc. People who use screen readers, however, can interact with tables of data.
- Present the data: Most maps you can create on ESRI, StoryMapsJS, CartoDB, etc. have an accompany set of tabular data you can view and alter. Presenting that data, as an alternative to viewing that map, can be helpful.
- Title and description: Always include an accompanying title, and description of the map that details the findings, and how it is laid out.
- Audio description: Think about adding an audio description of the map for users. Just like in a text-based description, tell the user about the layout of the map, its purpose, and findings.