Skip to main content

Making your GIS web applications accessible and branded

Learn how to improve web accessibility within GIS as we step through the process of styling an example application that is both accessible and branded.

Web content that is accessible enhances the user experience for all audiences, not only those who use assistive technologies. You may find yourself composing applications that must be compliant with Web Content Accessibility Guidelines (WCAG), or laws like the Accessibility for Ontarians with Disabilities Act (AODA). However, it is important to note that making your apps accessible does not come at the expense of sacrificing your own organization’s look and feel, as it is possible to achieve your desired branding using out-of-the-box functionality.

Learn

Learning about accessibility best practices is a necessary first step in the journey to creating accessible content. The Esri Canada webinar No Limits Making Your Web Apps Accessible to Everyone from May 2021 is an excellent resource if you are learning the ins and outs of making accessible content using ArcGIS web applications. You can also explore the Esri Accessibility homepage to find more information and resources including conformance reports for core products, apps, additional services, tools and extensions.

For looking at web accessibility at a more generalized level, the Introduction to Web Accessibility online course covers principles from the World Wide Web Consortium (W3C) Web Accessibility Initiative’s (WAI) Web Content Accessibility Guidelines (WCAG).

Create

Making your GIS web applications accessible might sound like a lot of extra effort, but there are a few options available out-of-the-box that will allow you to create apps that already measure up to accessibility standards. ArcGIS StoryMaps are WCAG 2.0 AA compliant and the Getting started with accessible storytelling story map provides an overview of how to make sound design choices for everything from choosing fonts to choosing a basemap.

ArcGIS Web AppBuilder also features accessibility support in most widgets and themes for 2D apps, and with incremental releases, even more widgets and themes will support accessibility.

Evaluate

Evaluating your GIS web applications will allow you to see where improvements related to accessibility need to happen. Many browser-based tools exist that flag items for review like missing alt text for an image or poor colour-contrast between text elements and the application’s background. The WAVE Evaluation Tool provides visual feedback about the accessibility of your web content within Chrome browsers.

You can find more information about testing apps by watching the Testing Your Apps for Accessibility: The ArcGIS Online Approach webinar from the 2021 Esri DevSummit.

Accessible… and branded!

Some organizations may wish to brand their accessible apps with their own corporate colours, fonts, logos and button styles. This is possible using out-of-the-box functionality with ArcGIS StoryMaps by creating a theme and applying it to your story maps.

Let’s step through this process for an example story map guiding readers through an inventory of National Historic Sites in Ottawa that has been branded using the Canada.ca design system:

Step One: Create a new theme

Navigate to the “Themes” tab within the ArcGIS StoryMaps user homepage and click the button to create a new theme:

Screenshot of the “Themes” tab

Provide a name that is clear, concise and easy to recognize.

Step Two: Match style elements from the Canada.ca design system to the theme

Assign values for the elements shown in the sidebar menu for the theme. In this case, the values entered match those from the element styles in the Canada.ca design system.

Here’s an example of this matching process for colours:

Screenshot of Canada.ca branding page

As well as for typography:

Screenshot of Canada.ca typography page

Match as many elements as you can in the theme sidebar menu with your organization’s branding or web standards.

Step Three: Apply the theme

Once you are ready to give your story the look and feel found in the new theme, navigate to the “Design” panel found at the top of the ArcGIS StoryMaps header while in edit mode. Scroll to the “Theme” section and “Browse themes” to select your newly created theme:

Screenshot of the “Design” panel

After the theme is applied, the story takes on the new stylistic elements defined in the theme. You can view the finished result here:

Screenshot of the National Historic Sites of Ottawa story map

View the application

After running the WAVE evaluation tool on the story, we can see that no WCAG errors appear:

Screenshot of the WAVE evaluation tool

You can find more information related to themes within ArcGIS StoryMaps below:

ArcGIS StoryMaps – Set a theme
Managing approved StoryMap themes for your organization
Add flavor to your stories with theme builder
Tips on using the ArcGIS StoryMaps theme builder

This post was translated to French and can be viewed here.

About the Author

Mark Gallant is a Senior Consultant at Esri Canada. He has a bachelor’s degree in geography from Carleton University and a Graduate Certificate in GIS from Algonquin College. As part of Esri Canada's Professional Services team, Mark delivers GIS solutions for large-scale, client-based projects. Before joining Esri Canada, he spent 12 years at the National Capital Commission where he leveraged ArcGIS Online technology to help tell the story of Canada’s Capital. Outside of work hours, he creates story maps covering topics not normally found within the traditional scope of geography for his non-profit website EntertainMaps.com.

Profile Photo of Mark Gallant