Skip to main content

Make Your 3D Planning Scenarios Accessible

There are several techniques GIS professionals can use to ensure that a 3D web scenario created in ArcGIS Urban is as accessible as possible. From preparing content within Scene Viewer to sharing it with ArcGIS StoryMaps, this article demonstrates best practices for web accessibility when working with 3D planning data.

Providing audiences with content that follows web accessibility best practices is becoming more common and expected as web technology continues to evolve over time. Many federal, provincial and municipal government departments are required to present content on their websites that is compliant with Web Content Accessibility Guidelines (WCAG). Examples of this are the Government of Canada Standard on Web Accessibility and the Accessibility for Ontarians with Disabilities Act (AODA) Requirement for Ontario Websites.

When looking specifically at different 3D planning scenarios created with ArcGIS Urban, a municipality or region may want to showcase these to the public on their organization’s website. However, sometimes customers representing a municipality or region tell us that their communications department will only accept accessible-friendly content, which can lead to some weariness about presenting map-based data. Even though no formal standard exists that describes how to make an interactive map accessible to people with visual disabilities, there are many techniques GIS professionals can use to ensure that a 3D web scenario created in ArcGIS Urban is as accessible as possible.

Optimize in Scene Viewer

After creating a scenario web scene in ArcGIS Urban, several improvements can be made directly within Scene Viewer to help achieve a more accessible visualization. First, the Enhanced Contrast basemap, designed to meet standards for WCAG and available from the ArcGIS Living Atlas, can be used in place of the Light Gray Canvas basemap, which is the default basemap in ArcGIS Urban models:

  1. Click on the “Basemap” button on the right-side toolbar and select “No Basemap” as the option.
  2. Go to the “Add” button at the top of the left-side toolbar, select “Browse layers”, set the target to “Living Atlas.”
  3. Search for “Enhanced Contrast” and add the base layer as well as its corresponding reference layer.
  4. Drag the newly added layers to the bottom of your layer list within the Layer Manager pane.

Second, application performance can be prioritized over high-quality graphics as a way to make the web scene load faster for end users:

  1. Click on the “Settings” button on the right-side toolbar.
  2. Under “Optimize 3d graphics for”, drag the slider setting to “Performance.”

Lastly, it’s possible to remove some of the darker tones that are dimming the scene. Some users may have difficulty discerning between building shadows and some of the dark gray schematic building facades. These effects can be restored again if desired by end users within an output application, but to maximize accessibility, here’s how to remove them:

  1. Click on the “Daylight/Weather” button on the right-side toolbar.
  2. Uncheck “Sun position by date and time.”
  3. Uncheck “Shadows.”

Optimizing 3D content within Scene Viewer

Leverage ArcGIS Instant Apps – 3D Viewer

ArcGIS Instant Apps provide focused templates made with responsive design and accessibility principles in mind. If questions arise about whether features within an application are accessible, users can always refer to the Accessibility Conformance Reports for Esri products to verify the exact levels of conformance.

The 3D Viewer template allows for a simple and effective presentation of web scenes for audiences that are capable of performing basic map-related tasks. This may include non-technical staff within a municipality’s planning department, researchers or special interest groups who already understand the source material.

With the express settings turned off during configuration of the 3D Viewer, there are several features that GIS professionals can modify in relation to accessibility:

  1. Under the “About” tab within the “App details” section, ensure that a text alternative for the map is present.
  2. Check the “Shortcuts menu” option to provide users with a reference for keyboard navigation.
  3. Under the “Theme & Layout” tab within the “Theme” section, ensure that the colour contrast ratio meets the minimum requirement.
  4. Under the “Language Switcher” tab, check the setting and select any additional languages that you would like users to be able to switch to.

Configuring settings in ArcGIS Instant Apps - 3D Viewer

Provide Context with ArcGIS StoryMaps

If an organization’s intended audience is simply the public at large, there is likely a need to provide more context surrounding the scenario that was composed in ArcGIS Urban. ArcGIS StoryMaps have achieved an AA rating per the WCAG 2.1 standards and can incorporate 3D web scenes in their presentation. This will allow for descriptive text and media to accompany the scenario to help with an understanding of what is being shown. Organizations can also apply their own corporate branding to ArcGIS StoryMaps applications while ensuring they remain accessible.

While composing content in ArcGIS StoryMaps, users can select the newly added Enhanced Contrast theme from the Featured themes gallery (beta), that prioritizes high visibility of on-screen elements. Alternative text can accompany any images or graphics shown. A 3D web scene can be added similarly to a regular web map, with configuration options available to display features like a map legend. Given that many websites are accessed by more mobile devices than traditional desktop machines, the preview tool can be used to ensure legibility on smaller screen sizes.

  1. Under the “Design” tab, click on the “Featured themes gallery (beta)” button and select “Enhanced Contrast.”
  2. For any image used, click on the gear icon and complete the alternative text form.
  3. To add a web scene, choose the “Add content block” function and select “Map” under Media.
  4. Select the web scene desired and explore the options shown under the gear icon.
  5. Once the web scene has been placed into the story, click on the gear icon to add alternative text and set the size of the element to “Large”.
  6. Click the “Preview” tab to see how the story would appear on a mobile device.

Setting up ArcGIS StoryMaps to be accessible with 3D content

This article is showing sample data located in Saint John, New Brunswick, from the online tutorial Creating a City Model in ArcGIS Urban. The proposed developments that appear are entirely fictional and intended for demonstration purposes only.

About the Author

Mark Gallant is a Senior GIS Consultant with Esri Canada. He has a bachelor’s degree in geography from Carleton University and a Graduate Certificate in GIS from Algonquin College. As a member of Esri Canada's Community Planning team, Mark delivers GIS solutions for municipalities and regions using ArcGIS Urban. Before joining Esri Canada in 2019, he spent 12 years at the National Capital Commission, where he used ArcGIS Online technology to help tell the story of Canada's capital. Outside of work hours, he creates ArcGIS StoryMaps stories covering topics not normally found within the traditional scope of geography for his non-profit website

Profile Photo of Mark Gallant