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.
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).
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.
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:
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:
As well as for typography:
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:
After the theme is applied, the story takes on the new stylistic elements defined in the theme. You can view the finished result here:
After running the WAVE evaluation tool on the story, we can see that no WCAG errors appear:
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.