{"id":1043071,"date":"2020-10-22T10:57:57","date_gmt":"2020-10-22T17:57:57","guid":{"rendered":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=1043071"},"modified":"2020-11-04T12:25:42","modified_gmt":"2020-11-04T20:25:42","slug":"towards-an-accessible-basemap","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-living-atlas\/mapping\/towards-an-accessible-basemap","title":{"rendered":"Towards an Accessible Basemap"},"author":4491,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":{"_acf_changed":false,"_searchwp_excluded":""},"categories":[22941],"tags":[28911,23201,40161,33541,757231],"industry":[],"product":[36581,36551],"class_list":["post-1043071","blog","type-blog","status-publish","format-standard","hentry","category-mapping","tag-accessibility","tag-cartographic-design","tag-living-atlas-of-the-world","tag-vector-basemaps","tag-wcag","product-arcgis-living-atlas","product-arcgis-online"],"acf":{"short_description":"Building basemaps that are accessible and\/or color blind-safe \u2013 in particular, maps that comply with WCAG standards.","flexible_content":[{"acf_fc_layout":"content","content":"

Recently, users have asked us about basemaps that are accessible and\/or color-blind-safe. In particular they have asked for maps that comply with WCAG<\/a> (Web Content Accessibility Guidelines) standards, and the US Federal \u2018Section 508<\/a>\u2019 equivalent. This presents a few challenges. A map can be a complex structure that relies on a well-developed hierarchy, and a basemap is an extreme example of that. Imposing a new set of rules on top can be a daunting prospect!<\/p>\n

What follows is an attempt to get to grips with the graphic aspects and to present you with some alternatives.<\/p>\n

What are the standards?<\/h3>\n

This is a difficult question, at least in how these standards relate to maps. The graphic requirements tend to concentrate on legibility of text (WCAG-AA standards call for a contrast ratio of at least 4.5 between text and background). It suggests that for many of our maps we could meet this requirement simply by changing labels to black, placing a halo behind them to act as the \u2018background\u2019, and leaving the rest of the content alone. A map is much more than just its labels though, and we want to improve the accessibility of the map content as well.<\/p>\n

What is different about a basemap?<\/h3>\n

John Nelson<\/a> has talked about \u2018BASE-maps\u2019 versus \u2018base-MAPS\u2019. A BASE-map is a deliberately subdued background map used as an underpinning for your information (think \u2018Light\/Dark Gray\u2019 or \u2018Topographic\u2019). This is challenging if it is an accessible map, where contrast between symbols is important. A \u2018base-MAP\u2019 is a stronger reference map (think \u2018National Geographic Style\u2019), where your information is added to the overall picture. That makes accessibility easier to build-in. Either way there needs to be some room in the map hierarchy for the user\u2019s information.<\/p>\n

How can we approach this?<\/h3>\n

We need to find a balance between accessibility and functionality.<\/p>\n

So, we can use a color-blind-safe palette and increase contrast between map features, to make the map work for a broader audience. This means that the map will use at least some strong colors and tones. We can avoid \u2018fussy\u2019 fonts that might be difficult to pick out of the background. And we can increase the size of labels (but carefully – we don\u2019t want to swamp the basemap with words!). Haloes help with the legibility of labels, but they can be destructive to the rest of the map information<\/p>\n

Ultimately, we may have to consider cutting some of the content of the map.<\/p>\n

The Results<\/h2>\n

I have created a map design that tries to walk a line between accessibility, and functionality as a basemap. It is more of \u2018base-MAP\u2019, but I\u2019ve tried not to go overboard with it.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1043261,"id":1043261,"title":"Accessible Basemap prototype","filename":"WCAG_Topo.jpg","filesize":131011,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/10\/WCAG_Topo.jpg","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-living-atlas\/mapping\/towards-an-accessible-basemap\/wcag_topo","alt":"","author":"4491","description":"","caption":"The Topographic Basemap and the new \u2018Accessible\u2019 design","name":"wcag_topo","status":"inherit","uploaded_to":1043071,"date":"2020-10-20 22:21:47","modified":"2020-10-20 22:22:45","menu_order":0,"mime_type":"image\/jpeg","type":"image","subtype":"jpeg","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1300,"height":442,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/10\/WCAG_Topo-213x200.jpg","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/10\/WCAG_Topo.jpg","medium-width":464,"medium-height":158,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/10\/WCAG_Topo.jpg","medium_large-width":768,"medium_large-height":261,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/10\/WCAG_Topo.jpg","large-width":1300,"large-height":442,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/10\/WCAG_Topo.jpg","1536x1536-width":1300,"1536x1536-height":442,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/10\/WCAG_Topo.jpg","2048x2048-width":1300,"2048x2048-height":442,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/10\/WCAG_Topo-826x281.jpg","card_image-width":826,"card_image-height":281,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/10\/WCAG_Topo.jpg","wide_image-width":1300,"wide_image-height":442}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/10\/WCAG_Topo.jpg"},{"acf_fc_layout":"content","content":"

Two versions of the map are available:<\/p>\n