Maps

Only use a map on a page or in a document if it's necessary for understanding.

If you do use one, you must:

• explain the purpose of a map in the surrounding text, so a user knows why it's there
• make sure there's sufficient contrast (4.5:1) between text or map features and background colours, using a colour contrast checker, such as on the WebAIM website
• not use colour alone to convey meaning, you can add patterns, labels or shapes to differentiate areas
• make sure the map is responsive and usable on smaller screens

Image of a map

If the map is an image, you must add alt text to describe the contents of the map. It should convey the essential information the map provides. You could imagine you’re describing the map to someone over the phone to work out what to say.

Embedded maps

If you add a map to a page using an iframe, you must add or change the title attribute. The title attribute should clearly explain the purpose or content of the embedded frame. Screen readers announce the title when the iframe is in focus, helping visually impaired users understand what it contains.

The title attribute should:

• explain the content, not just say that it's a map
• be concise, aim for 3 to 8 words

For example:

<iframe src="https://www.google.com/maps" frameborder="0" height="450" width="600" title="Google map showing location of Blaise Castle Estate" style="border: 0;" allowfullscreen="allowfullscreen"></iframe>

Embedded, interactive maps should also:

• be usable without a mouse
• use ARIA landmarks and roles to help screen readers identify and describe parts of the map