Selecting Compliant Style Colors

Adhering to WCAG 2.0 criteria for color contrast can be important for many organizations to meet the needs of their users. The following articles and websites are resources for understanding guidelines regarding colors. 

Understanding Color Contrast

The World Wide Web Consortium has detailed extensively the guidelines for color contrast on the web with examples. 

Color Safe 

This is an excellent resource for assembling compliant color palettes to be used to style your map. 

Wave Accessibility Checker 

After applying compliant syles to your map, test that it passes contrast tests using this tool from WebAIM. 

Ensure Locations Have Unique, Descriptive Names

It is not uncommon to have generic locations added to your map. For example, "Building Entrance" may be a common title for maps that want to easily show all the entrances to buildings on one layer or category. However, the more descriptive titles you give a location, the more meaningful they are to screen reader users. Utilizing a title like "Sherman Library East Entrance" is unique and much more helpful to user that do not have the visual context that the location is on the Sherman Library Building.

Add Background Color to Attributions

By default, map attributions lay on top of the base map and the background color (and contrast) can change based on what tiles are in view. Depending on the color contrast audit tool, this can result in the attributions being flagged as insufficient color contrast. To ensure the attributions always have the needed contrast, enable the "Map Attributions Background Color" in the CMS Front End Styles tab. It is your responsibility to ensure the color you select will meet compliance.

Note: To remove the color and go back to default, select the color box, then select "remove". Save and publish and you will return to a transparent background for the attributions.

Adding Social Media Links to the Footer with ALT Tags

Your map's sidebar footer can be used for many things. One of the most common, and recommended uses, is social media links. In order to do so in a compliant way, be sure to edit your footer in HTML and include ALT Tags. Below you will find sample code for social media icons with alt tags. Just update your own social media URLs in the HTML: