Getting started with accessible storytelling

Of the eight billion or so people who live on Earth, about a billion of us experience accessibility challenges. Among those challenges include impairments affecting vision, hearing, motor skills, or cognition. These accessibility challenges can make it more difficult for people to use the technology that we rely on to communicate in the 21 ^st  century. Because of those challenges, governments have enacted laws to ensure equal access to information and services. One example is the Americans with Disabilities Act (ADA). Another is section 508 of the Rehabilitation Act in the United States, which pertains to federal agencies.

Knowing that accessibility challenges affect so many people, it’s clear that creating accessible digital content is important. While many of us create and post online content, a lot of that content isn’t fully accessible. Maybe you have concerns that your content will look unappealing. Or you’re concerned that making the content accessible will take a long time or increase costs. Or maybe you just don’t know what tools exist for making content accessible.  

If you’re using  ArcGIS StoryMaps , you can create accessible content quickly with a few small adjustments to your workflow. The StoryMaps builder is designed with integrated features to support accessible content creation. One measure used to test the StoryMaps builder is the Voluntary Product Accessibility Template (VPAT). This document compared ArcGIS StoryMaps against the Web Content Accessibility Guidelines (WCAG). These standards and guidelines are widely used when creating and measuring accessibility in digital content. You can access the VPAT results in the platform’s  Accessibility Conformance Report . Spoiler alert — it did well.

It’s one thing to know that you have the tools for creating accessible content and how to use those tools, but the next step is knowing what decisions are critical when designing accessible web content. So, let’s find out what you need to know to get started.

The  theme builder  is a storyteller favorite. A color picker allows you to choose any color on the spectrum for the background, text, and other design elements in a story or briefing. While this flexibility is great, it’s important to keep in mind how colors can affect accessibility.

The most important color consideration in a theme is the contrast. In simple terms, contrast means the difference between two color hues. A contrast of light versus dark (or vice versa) between the background and the text, graphics, and other elements is a key factor for legibility.  

Fortunately, ArcGIS StoryMaps has a built-in contrast checker. In the theme builder it appears below the color picker when selecting the color for the story background and text elements. A contrast ratio of 3:1 or greater is considered legible—though  WCAG 2.0 AA guidelines  specify a ratio of at least 4.5:1 for paragraph text.

Another consideration when choosing a color palette relates to color vision deficiencies, sometimes referred to as color blindness. Two colors that appear very different to someone with full-color vision may look very similar to someone with a color vision deficiency. Most people with this condition see a spectrum of color and have difficulty perceiving certain colors.

You can test story elements for good contrast with browser plugins and apps such as  Colorblindly ,  Color Oracle , and  Sim Daltonism . These tools simulate how colors on-screen appear to people with the various types of color vision deficiencies.

This image gallery of a field of tulips uses a filter to simulate different types of color vision deficiencies. The full-color vision is on the far left. The second and third images are examples of Deuteranomalia and Protanomalia, respectively, two forms of red-green color vision deficiencies. The image on the right shows Tritanopia, a yellow-blue color vision deficiency.

The StoryMaps builder includes several integrated fonts. You can also access the library of  Google Fonts  (containing over 1,000 fonts) using the theme builder. Much like choosing a color palette, storytellers should also choose typography carefully. Many fonts are not legible for those with vision impairments or conditions like dyslexia.

So, how do you choose an accessible font? Let’s explore typography considerations:

Regardless of what typeface you choose for your theme, there is no single answer to the question of which font is most accessible. When choosing a font for your story, just remember the above considerations. Ultimately, a font that is clean, feels familiar, and matches the tone of your story will be the most successful.

Your story’s visual language will affect how accessible it is, but your story’s structure is just as important. Clearly organized stories benefit everyone, especially those with attention deficit disorders and learning disabilities. And for people using assistive devices such as screen readers, using headings for navigation is vital. 

The ArcGIS StoryMaps story builder is robust and handles many key accessibility considerations related to structure. However, the decisions story authors make can optimize accessibility.

Screen readers rely heavily on the hierarchy of text types to navigate logically through a web page. The Heading 1 type (the largest) should always be used to break your story into major thematic sections. Heading 2 and Heading 3 types should be used to create smaller sub-topics within each section. Using the heading types in a consistent pattern gives your story a helpful structure for both keyboard navigation and screen readers.

Shana Crosson, an Academic Technologist at the University of Minnesota, offers up more handy tips and tricks about text formatting best practices in her  blog post about creating accessible content  in ArcGIS StoryMaps.

On screens, it's best to avoid both huge chunks of text and single lines. Walls of text can be overwhelming to readers. And many short, choppy stanzas in a row can also be disorienting. Instead, finding a happy medium between them will help your audience understand the information.

Part of accessibility is ensuring your content is understandable. Choosing simple words and avoiding slang and idioms helps readers understand your message. Simple words also help people with cognitive challenges and non-fluent audiences understand the content.

Word choices and sentence length should also be considered because they relate to reading levels, or, how easy your text is to understand. You can use editing tools in Microsoft Word or online tools to measure reading levels. For reference, this story scores around a tenth-grade reading level.

Digital screens also make skimming the content more likely. Using plain language, simple words, and headings make content easier to skim. Finally, your audience may use a browser to translate your content into their first language, which is another reason to avoid more complex words and idioms that may not have a direct translation.

Your headings, subheadings, buttons, and hyperlinks should be concise and descriptive. Titles for links and buttons such as “Click here” or “Learn more” are not helpful for consumers using screen readers. Instead, describe what the link or button will do, like this example:

Media is also important to any story. It adds context. It sparks emotional responses in ways that text alone cannot. It makes stories more memorable. Media engages audiences in different ways, and it’s likely the biggest challenge to overcome when you’re creating accessible stories. As mentioned earlier, screen readers can read aloud written copy, but they also help support other media as well.

The first step toward making your media accessible is to use alternative text, also called alt text. Alt text is a written description of a piece of media’s content. Screen readers read aloud alt text as they go through a story. Alternative text will also show up if bandwidth is low and the media doesn’t load.

The ArcGIS StoryMaps builder has a field to add alternative text to images, videos, audio clips, maps, embeds, and whole map tour blocks. It’s important to add alt text for all media.

When writing alternative text for photos, there’s a fine line between being overly descriptive and not descriptive enough. Take the image below as an example:

For this image, an example of poor alternative text might be: "Person in a red jacket in the snow." This text describes the image but leaves out important context.

At the other end of the spectrum, an example of overindulgent alternative text might be: "A person in a neon red jacket and a large backpack kneels in the snow beneath a granite sky, peering through the telescopic lens of a tripod-mounted camera. His target is a cluster of penguins camping out on a rocky outcropping several yards away."

A happy medium might be something like: "A person in a red jacket kneels in the snow, while photographing penguins on a nearby rock." While a picture may be worth a thousand words, focus on the part that supports your story content. If you are struggling to write alt text that connects the media to the text, you may need to revisit whether the story needs that media.

For media that's more complicated than a single still image, writing effective alt text can get a little tricky. However, it should always describe the media, relate to story content, and not repeat a caption. Learn more about  writing alt text for complex media  like maps or animations in our blog post.

If a story includes videos with speech, those videos should include captions or a transcript. To help make things easier, the story builder allows you to upload a VTT caption file along with any video so that captions will play directly on the video when it's viewed in the story. You can add a VTT file through the Accessibility tab of the video options.

Audio clips should also have a written transcript available. One strategy the StoryMaps team uses for audio-heavy stories is to create a  duplicate version  that includes the transcripts along with, or in lieu of, the audio clips. Amelia Semprebon’s  poignant story about adoption  is one example of that approach:

Infographics are a popular way to show information. However, they pose a few accessibility challenges. Sometimes they’re visually overwhelming. However, a bigger issue is that screen readers won’t read aloud words within most graphical file formats. Whenever possible, use text outside of a graphic to explain what’s happening in the graphic. Text in the body of a story can be magnified, copied and pasted, translated by browsers, and won’t be affected by bandwidth or broken media issues.

If you're planning to use an infographic that contains a table of information, consider using ArcGIS StoryMaps'  built-in table block , instead.

One of the things that sets ArcGIS StoryMaps apart as a storytelling tool is its ability to easily incorporate great-looking maps. But cartography also has its own set of accessibility considerations.

The basemap is a logical place to start. This is the underlying imagery or color palette that acts as the map’s foundation. It often contains a large amount of pre-selected and pre-styled reference information like place names, roads, and physical features. Stylizing a basemap can take a lot of time and effort, so most storytellers choose to use a pre-designed option. However, if you’re interested, Esri Canada demonstrates how to get started with creating an  accessible basemap  using Esri’s  Vector Tile Style Editor .

For those who prefer a pre-designed option, Esri’s Andy Skinner already created a basemap that adheres to WCAG-AA standards. This basemap is part of the ArcGIS  Living Atlas of the World  and available to use in express maps and map tours (in addition to web maps and scenes). Check out  Andy’s blog post  to find out more about this accessible basemap.

You can explore the accessible basemap in the express map below. Notice the design has high contrast and displays different map features at different scales to maintain accessibility.

Let’s also clarify the map’s purpose as it relates to accessibility. Many of Esri's basemaps are designed to serve as a background for additional thematic data that is the focus of the map. A high-contrast basemap such as the accessibility basemap may not be suitable when more elements are added to the map.

If you have a lot of thematic data, consider making the data available for download in a spreadsheet. You can export the data tables for any layers in your web map and provide a link to them in your story. This allows people using screen readers to explore the details related to data on the map since web maps within stories and briefings are not yet fully accessible to screen readers, yet they do support alt text descriptions.

Esri’s Mark Harrower offers some advice for designing a more accessible map:

• In addition to running a map through color vision deficiency simulators, view the map in greyscale to make sure hue isn’t being used as too much of a symbology aid.

• Limit a feature’s visual categorizations to three or four; more steps in the visual hierarchy can become muddled.

• Use more than one visual variable to really make categorizations clear. For instance, use color and size to differentiate between several classes of a given feature.

Most importantly, Mark says, test it! Have a variety of people look over your map, even if it’s just for a few seconds, and see what they’ve gleaned from it. If they struggled to get key information from it or to pick up on visual distinctions between feature classes, it might need an accessibility-oriented rethink. This advice, of course, also applies to any component of a story — even the entire story.

After reading this story, you now have the tools and knowledge to get started with creating accessible ArcGIS StoryMaps content. Knowing which decisions you need to make and how they affect your authoring process is a big step.

By recognizing a story's elements and breaking them down into the different parts discussed in this story — color, typography, structure, media, and cartography — you can incorporate considerations that make stories accessible with good content design. And all it takes is a few adjustments to your workflow processes to integrate accessibility into your content creation standards.

We hope that you've learned a lot as you've read this story, and that you'll continue to use it as a resource when you produce your own accessible ArcGIS StoryMaps content! And, most importantly, we hope you see how accessible content is easier for everyone to consume and enjoy, but not difficult to create. The process of authoring an accessible story should be much less daunting than it might have been before you started reading — you might even say it now feels more accessible.

Here is a non-exhaustive repository of useful resources and further information about web accessibility in general and producing accessible ArcGIS StoryMaps content, specifically. Many of these links were already sprinkled throughout the story, but they bear reiterating.

These are the commonly accepted standards for accessibility in online content. Federal section 508 compliance is based on these standards.

The results of the Voluntary Product Accessibility Template (VPAT) that was performed on the ArcGIS StoryMaps platform in early 2023. It certifies ArcGIS StoryMaps as achieving an AA rating per the WCAG 2.1 standards.

The Accessibility page within the ArcGIS StoryMaps product documentation. Includes a list of languages that the platform supports.

A blog post by Apurva Shah and Alison Sizer of the StoryMaps team, documenting the steps taken to ensure an accessible product.

A blog post all about accessibility best practices in ArcGIS StoryMaps, by Shana Crosson, an Academic Technologist at the University of Minnesota.

A blog post on how to write alternative text for media that requires more information than a simple photograph.

Web page containing various resources about how to use the ArcGIS StoryMaps platform, including links to blog posts, how-to guides, and general reference materials.

An Esri UC 2023 recorded session that discusses accessibility best practices for Esri web apps.