Color Blindly Simulator being used on a California county map
IGIS
Article

Ten Essential Ways to Make StoryMaps Accessible

  • April 29, 2026
  • By Priyanka D Vyas, Robert Johnson, Shane T Feirer, Maggi Kelly

As StoryMaps gain popularity for delivery of content in an engaging style, questions arise about how to make them compliant to meet the accessibility guidelines. Within UC ANR, StoryMaps are being used for a variety of purposes such as report impact of grant funded projects, county annual reports, delivery of education curriculum, and highlight stories of successful partnerships. The good news is that ESRI – the creator of StoryMaps and other web-maps and apps – has already been working since quite some time to ensure their apps meet the WCAG guidelines.   

In this three-part series, we will review tips and tricks for making StoryMaps, Web-Maps, and Apps accessible.

1. StoryMap Theme Builder:  

Before you create a StoryMap, there are different options in the StoryMap Theme Builder to customize your theme. This gives you a lot of flexibility to choose high contrast colors for your background image and text fonts and colors for various buttons that get displayed. Allen Carrol’s blog is a great resource to learn more about choosing colors and fonts and styles for buttons, quotes and separators,  

 

Figure 1: Creating Custom Theme in the StoryMap Theme Builder
Figure 1:  Choose Theme option to customize theme.

 

2. Customizing Fonts: 

Once you are in the theme builder, you can customize the fonts. Based on this wonderful blog, ESRI has recommendations in terms of best practices for choosing fonts. Read this blog to learn about choosing the right font for your StoryMap.  The blog on Making StoryMaps Accessible from ESRI also has a section on Typography and key considerations to keep in mind when choosing the heading fonts versus paragraph fonts.  The blog on Maps/StoryMaps and Accessibility  also has a section on Recommended Best Practices based on fonts. 

 

 

Figure 2: Options to customize fonts in the Theme Builder
Figure 2: Options to customize fonts in the Theme Builder

 

 

3. Choosing Colors: 

  1. Once you have decided on the fonts, the next task is to choose colors that show high contrast. As per the WCAG guidelines, choosing a color contrast ratio of over at least 4 between text and background is required. Tools like WebAIM Contrast Checker , siegemedia Contrast Ratio are some tools to check whether the heading color, fonts color and the background color have a sufficient contrast. Another nice tool to check for a combination of colors is an eight shape contrast grid. 
Figure 3: Contrast Checker in WebAIM showing the option to type in the Hex Value for the Foreground and the Background Color
Figure 3: Contrast Checker in WebAIIM

 

Figure 4: A preview of the siegemedia web page for analyzing color contrast ratio
Figure 4: Contrast Ratio on siegemedia

 

 

Figure 5: Eight Shapes Contrast Grid with option to enter hex codes in different rows and columns for different categories such s background, text, etc.
Figure 5: Eight Shapes Contrast Grid 

 

4. Online Apps for Testing Images for Different Conditions

Additionally there are also tools for checking images by simulating different conditions for accessibility such as Color Oracle, Colorblindly among others. 

 

Color Blindly Safe Option in Color Brewer
Figure 6: ColorBrewer with the option to check colorblind safe color scheme

 

Color Blindly Simulator Webpage
Figure 7: Colorblindly  Color Blindness Simulator for testing images in the StoryMap

 

5. Organizing the Content Structure: 

When you enter the text for your StoryMap, the builder forces you to choose the type of text you are entering. This forces you to choose whether it is Heading 1, Heading 2, Heading 3 or Paragraph. This hierarchy makes it easy for the screen readers to navigate through all the vast content.  Even though the recommended practice is to have only one Heading 1, this might not be the most suitable approach for StoryMaps. In case of StoryMaps, any text you choose as Heading 1 gets displayed as a tab on the top. This makes it easy for a user to navigate between the different sections of a StoryMap.  As in the Farm to School StoryMap in Figure X there are different tabs for each section. For these labels to appears as a tab, it is important to designate them as Heading 1. 

Choosing Different Styles for Heading, Paragraph, and Bullets in the StoryMap Builder
Figure 8: Choosing different styles for text in the StoryMap Builder
Tabs in the Farm to School StoryMap showing a background cover image on the top, followed by different sections as tab for navigating.
Figure 9: An example of a StoryMap with different sections or tabs that are creating based on text assigned as Heading 1. 

 

6. Alt Text on Images

When adding images, StoryMaps has an option to add Alt Text on all the images. The Alt Text should describe the image adequately, not repeat the same content that is in the web page or somewhere else. Words like “image” should be avoided in the alt text as it is redundant information for someone using a screen reader.  For decorative images or images that have purpose to convey information the alt text should state as decorative or it can be skipped. While the standard practice is to label the image as decorative, as per a resource on ESRI’s website if an image doesn’t have alt text, the screen reader automatically treats it as decorative.  Besides adding Alt Text on images, ESRI also recommends checking the box on "Allow readers to expand image". 

 

 

Option to add Alt Text on images when images are uploaded in the StoryMap Theme Builder
Figure 10: Accessibility tab in the Image options to give an alt text. 

 

7. Adding narration with static map images

EXTERNAL IMAGE

Just because StoryMaps allow a lot of interactive elements such as dashboards or interactive web-maps that allow users to zoom in and out to different places and explore data on their own, it doesn’t mean that this is the recommended best practice.

StoryMaps are about telling stories with the data. The onus is on the user to tell a compelling narrative, highlight different places on the map that tell the story. This offers a nice opportunity to spend some time with your data and identify the various places you want to highlight using static maps and images.

Side panel in a StoryMap describing the content of the web map.
Figure 11: An example of text describing the legend in an interactive map in the side panel
Side panel space next to describe a static image showing West Sacramento in a StoryMap
Figure 12:  Example of static map image in a StoryMap with the legend open and a side panel to add the narrative. 

 

 

8. Choice of basemaps

As one adds map content to the StoryMap or adds locations within the StoryMap, ESRI has designed various basemap that are available through the Living Atlas. A simple option is to use gray basemap. 

Enhanced Contrast Basemaps available in Map Viewer.
Figure 13: Basemaps available in the Map Viewer for accessibility 
Light Gray Canvas Basemap zoomed into San Francisco Bay Area
Figure 14: Gray basemap for accessibility purpose

 

9. Configuring text in the pop-ups of web maps

Web maps allow keeping the pop-ups on for a user to interact with the map and see some key attributes associated at that location.  The default style in the pop-up is to display the data in the format of table. However, from an accessibility point of view it is recommended to avoid tables when not needed. Tables do not make a pleasant experience for a screen reader. ESRI recommends using text based format in the pop-ups as shown in the Figure 14. 

 

An example of text in a pop-up
Figure 15: Information in the pop-up is displayed as a text instead of a table view. 

 

10. Choice of symbology and colors in the web maps

When using maps you created, ESRI has some color blind friendly color ramps to choose from. In the Map Viewer when a user chooses symbology, they can go to edit styles and instead of using the default color ramp, ESRI provides various options as shown in the Figure 16 and Figure 17. 

 

 

Color Blindly Color Ramp in Map Viewer
Figure 16: Colorblindly color ramp in ESRI Map Viewer

 

Colorblind friendly color ramp in ESRI Map Viewer.
Figure 17: An example of how a red color ramp appears on the map when chosen in the colorblind friendly category 

 

 There is also a color blindly extension which can be installed and turned on to check for different conditions. 

 

Red color ramp on California counties
Figure 18.1: California counties map using shades of red for normal vision

 

Red color ramp on California counties being displayed for red color blindness
Figure 18.2: A simulation of California counties map symbolized using a red color ramp using the Colorblindly simulator for Red-Blind condition. 

 

Red color ramp on California counties for monochromacy condition on Colorblindly extension
Figure 18.3: A simulation of California counties map symbolized using a red color ramp using the Colorblindly simulator for Monochromacy condition. 

 

Overall, ESRI provides a variety of tools and has several resources to make their products confirm accessibility requirements. While ESRI has provided a Accessibility Confirmance Report for StoryMaps  through Voluntary Product Accessibility Template , the onus is on individual user to follow the recommended practices and ensure a smooth user experience.