• Home
• About this Site
• Contact Us
• RSS Feeds
• eGovRC Toolbar

Help & Print

Help Print

Resize Text

Categories, RSS and More

Making maps and Google maps accessible - Accessibility Toolkit - Version 3 - 2009

Online maps are inaccessible to vision impaired people so a textual alternative (long description) must always be provided. It is also important to include accessibility features within the map so it is accessible to people with other disabilities e.g. by making the map non-reliant on JavaScript and keyboard accessible. Maps can be made accessible by:

• providing a long description of the map in text or HTML;
• making the map keyboard accessible;
• making an HTML version of any JavaScript features of the map;
• using only high contrast colours;
• not relying on colour to differentiate important parts of the map; and
• allowing users to increase the size of the map, legend and any text.

Note that there will be people who won’t be able to access the map because:

• they are blind;
• they have a text only browser; and/or
• they have a slow internet connection.

Relationship to checkpoints:

Checkpoint 1.1 requires that a text equivalent is provided for every non-text element e.g. via "alt", "longdesc", or in element content. This includes: images, graphical representations of text (including symbols), image map regions, animations e.g., animated GIFs, applets and programmatic objects.

What about Google maps?

Google maps have a number of features that improve the accessibility of their maps; notably, you can easily create non-JavaScript, keyboard accessible versions of any Google map.  To create a keyboard accessible map, start a map search by loading the URL http://maps.google.com/?output=html and entering a search term.  When the HTML result is loaded, paste the page URL in to your site as an alternative to the standard Google map interface.

Complying with accessibility requirements when creating maps

Providing a long description of the map in text or HTML

When providing a long description of a map it is important to think of the function of the map. For example, a long description of a map of Collins St will be different depending on the purpose of the map. A map displaying the carparks in Collins St, will have a vastly different long description to a map that displays the location of the Department of Treasury and Finance. While the two maps may look similar, the long descriptions will be completely different.

When writing a long description consider the following:

• Describe only those aspects of the map that are relevant, first e.g. the most important point or the most common feature of the map. The following example is a long description of bushfire affected areas in Victoria:

Uncontained bushfires are still burning in Wilson's Promontory (23,250 hectares). Contained bushfires are still burning in Churchill, Gippsland (32,000 hectares) and Marysville (330,600 hectares). The total amount of land burnt in the February 9th, 2009 bushfires is 450,000 hectares.

• Describe the distance (in kilometres or metres) from important points.

Monash Clayton campus is 40 kilometres east of the Melbourne CBD.

• If the map will be used for transport, give directions for car, public transport and/or walking . The following example is a long description of how to get to the Department for Innovation, Industry and Regional Development from Flinders St station.

Catch a tram North along Swanston St for one stop. Cross the road, so that you are on the North-East most side. Catch a tram four stops East along Collins St. Nauru House is directly North of the tram stop. Walk between the two buildings for fifty metres until you come to a revolving door. The lifts are on your left. Department of Innovation, Industry and Regional Development is on Level 20.

• If the map is time-sensitive, mark the times in the long description. The following is an example of a long description for the Melbourne Rain Radar map :

4.25pm Storm (strong) approaching east over Williamstown, eight kilometres in diameter. Light rain over Melbourne city, four kilometres in diameter.
4.40pm Storm (strong) ten kilometres west of Melbourne city. Light rain over Clayton, four kilometres in diameter.
4.55pm Storm (strong) over Melbourne city, eight kilometres in diameter. Rain (strong) over Richmond.
5.10pm Storm (extreme) over inner city East Melbourne, ten kilometres ,in diameter.

• If the map is a topographical map, mark the height at which important points occur. The following is a long description for a hiker's map of the Purlingbrook Falls map:

The waterfall is 109 metres tall. The track starts at the top and descends to the bottom of the waterfall before crossing behind the base of the waterfall and ascending back to the top. The track is a steep zig zagging track, descending about 40cm for every horizontal metre.

• If the map is a transport map, organise the map by train, bus or train line and describe the locations and distances travelled.

Train line: City Loop
The City Loop consists of four train stations set in a roughly square formation around Melbourne city: Flinders St station, Southern Cross station (formerly Spencer St station), Flagstaff station and Parliament station. Flinders St station is situated on the corner of Flinders St and Swanston St. Spencer St station is situated on the corner of Bourke and Collins Sts and Spencer St. Flagstaff is situated on the corner of La Trobe and King Streets. Parliament is situated off Collins St with entrances on Collins, Spring, Lonsdale, Nicholson and MacArthur Streets. During morning peak hour, trains run from Parliament to Flagstaff to Southern Cross and terminating at Flinders St. During afternoon peak hour trains run in the opposite direction.

Making the map keyboard accessible

Often maps rely upon distinct mouse movements or clicks  to select an area, move to another area or to zoom. These movements can, and should, be made available with the keyboard so that users are not entirely reliant on mouse actions. For example, users should be able to use only the keyboard to:

• move the map left, right, up or down;
• select different areas of the map; and
• zoom in or out on the top left, top right, centre, bottom left or bottom right quadrant.

Making an HTML version of any JavaScript features of the map

Often maps use JavaScript to provide enhanced features e.g. smooth, animated zooming. Maps that use JavaScript-based features should always have an HTML fallback that allows users to.

• move the map left, right, up or down using HTML only;
• select different areas of the map using HTML only; and
• zoom in or out on the top left, top right, centre, bottom left or bottom right quadrant using HTML only.

Using only high contrast colours

Ensure that your map design complies with the 4.5:1 colour contrast ratio.

Not relying on colour to differentiate important parts of the map

Ensure that your maps use:

• borders to separate one area from another;
• different types of shading and change of colour to indicate different areas;
• label markers with an ASCII character and individual colours for different markers; and
• client-side image maps and accurate ALT attributes to indicate areas of a map or important markers.

Allowing users to increase the size of the map, legend and any text

To make maps accessible to some groups of people with vision impairments, it is important to allow users to not only to zoom in on areas of the map, but to increase the size of the map, legend and text. Often maps do not respond to browser requests to increase size, therefore additional methods may be required to:

• provide a "large" version of the map, where the user has increased the normal text size by 200%; and
• maximize a particular point/area, or add a highlight box that shows the particular point/area in a larger size.

Example 1: An accessible bushfires map

The Department of Sustainability and Environment has developed a map of current bushfires across the state of Victoria. This information is replicated via a text alternative in the table below the map. See DSE- Fires Today - Summary of incidents on Public Land

Example 2: An accessible Google map

Well-known accessibility specialist, Derek Featherstone has set up a blog to track his marathons. The blog contains maps that a keyboard accessible, usable with HTML only and without relying on colour to convey information. He has also created other accessible features, such as average heart rate details for heart rate graphs. See IronFeathers.

Further Information

• Google maps
• Speech friendly textual directions from Google maps
• Opera – Keyboard accessible Google maps
• Can you really have an accessible Google map?
• Google Static Maps API
• Google Static map wizard

Source: Accessibility Toolkit Version 3, September 2009. Section 5 - Making Maps and Google Maps Accessible.

Last updated: 16 July 2010

Search, Login and Options