Selecting Compliant Style Colors
Adhering to WCAG 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 is an excellent resource for assembling compliant color palettes to be used to style your map.
- After applying compliant styles to your map, test that it passes contrast tests using one of these common browser extensions
Common areas on the platform to ensure pass color contrast include:
- Link color (in both your map footer and location descriptions)
- Top bar buttons (including hover color)
- Sidebar and location text and hover styles
Add Alternative Text to Images
When uploading an image to the Map CMS, you will be prompted to provide alternative text. Providing inaccurate, or "bad" alternative text is worse for end users than providing no alternative text. So Concept3D will not automatically apply alternative text without context of what the image is providing.
Here is a resource from WebAIM on proving comprehensive Alternative Text.
Here is the help article on how to add alternative text to images.
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: