Esri is committed to making ArcGIS Experience Builder accessible for all users by following the World Wide Web Consortium (W3C)'s Web Content Accessibility Guidelines (WCAG) (2.0 & 2.1 & 2.2 AA) and the Revised Section 508 Standards. Certified accessibility professionals have tested ArcGIS Experience Builder with the Voluntary Product Accessibility Template (VPAT), a template used to document a product's conformance with accessibility standards and guidelines.
See the Esri Accessibility Conformance Report for ArcGIS Experience Builder.
For more information about Esri's commitment to accessible technology, visit Esri Accessibility. For legal information about accessibility, visit Esri Legal. For accessibility best practices, read Accessibility best practices for ArcGIS Experience Builder.
The following sections describe current Experience Builder features for building accessible apps. More accessibility features will be added with future software updates.
Note:
The content of the following sections is subject to change with incremental releases.
Pages
Three types of pages are available to be added on the Page panel—full-screen, scrolling, and grid. It is recommended that you use full-screen and scrolling pages to build accessible apps.
Full-screen pages use a fixed layout where widgets exist on the page at absolute positions. By default, the keyboard navigation tab order follows the order in which widgets were added to the canvas. However, this means that depending on the order in which you added widgets, the keyboard navigation tab order might jump around the page in an order that is unexpected to the user.
To create a more intuitive tab order, you can click the A11Y button in the builder and turn on Auto-calculate element tab orders in fixed layouts. If you do, Experience Builder creates a logical tab order for all newly added widgets in full-screen pages (and in fixed layout containers, such as Card and List widgets, which behave like full-screen pages). Experience Builder automatically calculates the tab order based on widget positions. For best results, turn on this setting first before building an accessible app.
Turning on Auto-calculate element tab orders in fixed layouts does not automatically adjust the tab order of widgets that are already in a layout. You must make small adjustments to a layout to trigger the automatic calculation, but you only need to make one small adjustment to trigger the automatic calculation for an entire fixed layout. For example, resizing one widget on a page, section, or Card widget triggers the automatic calculation for the entire page, section, or Card widget.
Note:
The automatically calculated tab order changes the vertical order of widgets. It is recommended that you avoid overlaying widgets on top of each other when building accessible apps.
Scrolling pages are arranged into blocks and screen groups. A block container is similar to a Row widget. The keyboard tab order follows a logical reading order for scrolling pages. However, if you add widgets that use a fixed layout, such as Card, Fixed Panel, and Section widgets, those widgets use the behaviors described above for fixed layouts and you should use the A11Y button to achieve an intuitive tab order.
The following table summarizes the information in this section:
| Page type | Accessibility status | Notes |
|---|---|---|
Full-screen | Supported | Use the Auto-calculate element tab orders in fixed layouts button in the builder. |
Scrolling | Supported |
Templates
If you start with a template, it is recommended that you use one of the following full-screen templates, all of which are optimized for accessibility. All of these templates appear on the Default tab of the template gallery.
- Billboard
- Chronology
- Dart
- Foldable
- Frame
- Gallery
- General
- JewelryBox
- Launchpad
- Plateau
- Preface
- Ribbon
- Skyline
- Summary
- Tab
The ArcGIS Online tab of the template gallery lists Esri and user-created public templates. The Job Hunting (A11Y) template is optimized for accessibility.
Screen readers
Accessibility support for Experience Builder has been tested with the following browser and screen reader combinations.
| Operating system | Browsers | Screen reader |
|---|---|---|
Windows | Google Chrome, Mozilla Firefox | NVDA |
macOS | Safari, Google Chrome | VoiceOver |
Note:
There may be behavioral differences between different screen readers.
Note:
Other screen reader and browser combinations not listed here, such as VoiceOver combined with Microsoft Edge, are not fully covered.
Themes and colors
The app theme determines the colors in an app. The six default themes—Prime, Astro, Ocean, Velvet, Abyss, and Meadow—have optimized color contrast for each band. If you choose custom theme colors, ensure they meet contrast and color accessibility requirements.
In theme settings, you can change the background colors of surfaces and interactive elements. You can also change the color of text that appears on top of these elements. Pages, containers, overlays, and the default and selected states of interactive elements have linked color settings for background and text color. When you change the background color, Experience Builder automatically picks a text color that contrasts with the background color. If you change the text color to a color without sufficient contrast (minimum 4.5:1), a warning appears prompting you to pick a different text color.
Also in theme settings, you can change the color of the focus indicator that shows which element of the app has keyboard focus. By default, the focus indicator color is linked to the primary theme color. It is a different shade of that color. Changing the primary theme color also changes the focus indicator color. If you change the focus indicator color with its associated color picker, the two colors unlink, but you can click Reset to relink them.
In the settings of many widgets, such as the Text widget and Chart widget, you can set custom colors that are different from the theme colors. Some widgets, such as the Timeline widget, allow you to select foreground and background colors. If you use custom colors in your app, ensure that the colors meet accessibility standards.
Widgets
You can use the keyboard to add widgets to the canvas from the Insert widget panel for full-screen pages. To do this, navigate keyboard focus to a widget with the Tab key, then press Enter or Space. The widget appears in the center of the canvas. If you navigate keyboard focus to the widget in the page outline and select the widget, you can then move the widget around the canvas with the arrow keys.
To give widgets custom labels that are readable by screen readers, click the A11Y button and turn on Enable accessibility settings for each widget. When you turn on this setting, the Accessibility settings section appears in the Content tab of widget settings for every widget in the app. This section contains the following settings:
- Accessible label—Provide an accessible label for the widget to be read by screen readers.
- Enable in Skip to—Add a tab order shortcut that lets users jump directly to focusing on this widget in the keyboard tab order at run time. If you turn on this setting for at least one widget, a shortcut button appears at the beginning of the widget tab order. When you press the Tab key, shortcuts appear at the beginning of the tab order for every widget for which you turn on this setting. You can only add skip to shortcuts for widgets in the first level of the outline. Widgets nested in maps and in layout containers do not support this setting. If you turn on the header and footer in page settings, they both automatically get a skip to shortcut.
The following widgets support accessibility. There are some exceptions for specific features and arrangement styles. Exceptions are noted.
Note:
Some interactions that involve the Map widget and other widgets, such as drawing on a map with the Draw widget, do not yet support keyboard navigation or screen readers.
| Widget | Accessibility status | Notes |
|---|---|---|
Accordion | Supported | |
Add Data | Supported | |
Basemap Gallery | Supported | |
Bookmark | Supported | |
Button | Supported | |
Column | Supported | You can add padding to display the focus ring for widgets inside a column. |
Coordinates | Supported with limits | Obtaining the coordinates from the map is not supported by the keyboard. |
Directions | Supported with limits | Reordering stops and adding stops by clicking the map are not supported by the keyboard. |
Divider | Supported | |
Draw | Supported with limits | Drawing on the map is not supported by the keyboard. |
Embed | Supported | |
Feature Info | Supported | |
Feature Report | Supported | |
Filter | Supported | |
Fixed Panel | Supported | |
Flow Row | Supported | |
Image | Supported | You can manually add alt text to images. |
List | Supported | You can use the Esc key to exit a dynamic list. |
Map Layers | Supported with limits | You can use the left and right arrow keys to expand and collapse group layers. You can use the Space and Enter keys to reorder layers with the Reorder drop-down menu options. After you perform an action, keyboard focus may not return to the Options button automatically. |
Measurement | Supported with limits | Interactions with the Map widget are not supported by the keyboard. |
Menu | Supported | |
Placeholder | Supported | |
Supported | ||
Row | Supported | |
Search | Supported | |
Select | Supported with limits | Interactions with the Map widget (interactive selections) are not supported by the keyboard. |
Share | Supported | |
Sidebar | Supported | |
Survey | Supported | You can use the Accessible label setting to add a title that is readable by screen readers for the survey item that you connect to the widget. However, if the Survey123 version of the survey you load in the widget is older than 3.12, you must add the accessible label after you load the survey for it to appear in the iframe title as expected. |
Swipe | Supported with limits | The advanced templates are not supported by the keyboard. |
Table | Supported | You can use the Shift+Spacebar keys to select rows in the table. |
Text | Supported | You can define heading levels in the widget settings under Text format. |
Timeline | Supported with limits | Moving the slider is not supported by the keyboard. |
Views Navigation | Supported with limits | The quick styles Slider, Arrow 1, and Arrow 3 are not supported with screen readers. |
Widget Controller | Supported | You can use the arrow keys to resize widget panels. |
Note:
Icons have empty alt text by default.