How can we help?

Making Your Interactive Map Accessible

Ensuring your interactive map is accessible is essential for delivering an inclusive digital experience. Accessibility supports equal access for users with disabilities and helps your organization meet WCAG 2.1 AA compliance. The practical strategies below will help ensure all users can successfully navigate, understand, and benefit from your map content.

1. Use WCAG-Compliant Colors and Contrast

Color contrast is vital for users with low vision and for viewing content in varied lighting conditions. Ensure a contrast ratio of at least 4.5:1 for text and 3:1 for large text or graphical elements (WCAG 2.1 SC 1.4.3 and 1.4.11).

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 or WebAIMs Contrast Checker are both excellent resources for assembling compliant color palettes to be used for styles. 
• After applying compliant styles to your map, test that it passes contrast tests using one of these common browser extensions
  
  • Axe Browser Extension
  • Wave Accessibility Checker

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

2. Add Descriptive Alternative Text to Images

When uploading images in the Concept3D CMS, provide meaningful alt text that conveys the purpose or content of the image.

• Do not use alt text for decorative images.

• Avoid vague labels like “Image1.jpg” or “Campus.”

• Ensure that the alternative text is concise, functional, and relevant (WCAG 2.1 SC 1.1.1).

Here is a resource from WebAIM on proving comprehensive Alternative Text.

Here is the help article on how to add alternative text to images.

3. Ensure Locations Have Unique, Descriptive Names

Screen reader users rely on location names to understand the map context without visual cues. Vague or repeated names can create confusion and hinder navigation.

Best Practices for Naming Locations:

• Be Specific: Use full names that include the building and the function (e.g., “Smith Library – East Entrance” instead of just “Entrance”).

• Use Consistent Structure: Choose a format and apply it across all labels. For example:

  • Emergency tools: “AED – Smith Hall, First Floor”

  • Room designations: “Smith Hall – Room 204”

• Object-First for Priority Items: For commonly searched or urgent items like emergency equipment, listing the object first improves scanning and usability.

• Use Clear Delimiters: Include dashes or colons to help screen readers pause appropriately and parse label components more easily.

• Avoid Ambiguous Abbreviations: Use widely understood acronyms like “AED,” but provide expanded terms in alt text when needed.

• Avoid Duplicate Titles: Do not reuse the same title across different map points. Instead, break out each location individually.

Additionally, avoid using the Polymarker tool to create multiple points under a single location name. While this tool simplifies content management, it does not effectively translate to assistive technologies. Each point should have its own unique name and description to ensure clarity and usability for all users.

4. Add Background Color to Attributions

Default attributions may have insufficient contrast against varying map tiles.

• In CMS > Styles, enable Map Attribution Background Color.

• Choose a background that maintains at least 4.5:1 contrast ratio with the text. 

• This ensures compliance regardless of tile background (WCAG 2.1 SC 1.4.3).

Tip: Use the “Remove” option to revert to a transparent background if needed.

5. Ensure Video Content is Accessible

Use Captions on YouTube and Vimeo

Captions are crucial for users who are deaf or hard of hearing. Both YouTube and Vimeo offer straightforward captioning tools.

Best Practices for Captions: Ensure captions are accurate, properly timed, and easy to read.
Use clear, descriptive language, and include non-verbal sounds when relevant.

Ensure Videos contain Audio Descriptions

Audio descriptions provide essential visual context for users with low vision. While Vimeo DOES support multiple audio tracks, Youtube does not. Here are two options for implementing them:

1. Two Versions of the Same Video

• • Upload two versions of the video: one with audio descriptions embedded and one without.

  • Add a clearly labeled link or button below the embedded video (e.g., "Watch with Audio Descriptions").

  • Pros: Easy to implement within the existing platform.

  • Cons: Users must interact with an external link, and managing two video versions increases overhead for your clients.

2. Burn-In Audio Descriptions

• Create a single video file where audio descriptions are embedded directly into the video.

• Upload this file to YouTube or Vimeo.

• Pros: Meets WCAG requirements and is simple to share.

• Cons: Forces all viewers to hear audio descriptions, which may not be necessary for most users.

6. Add 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: