Making your GIS web applications accessible and branded

February 17, 2022

Mark Gallant

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