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 contents of the map in alt text or in the surrounding text, or use ARIA landmarks and roles to help screen readers identify and describe parts of the map
- 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 controls can be used without a mouse, if the map is interactive
- make sure the map is responsive and usable on smaller screens, particularly with assistive technology such as screen readers and magnifiers
Alt text
If you use 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.
Design System
Go to our Design System for details of our visual styles, components and patterns.