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.
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 at the lower right corner of 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 auto-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 a small adjustments to a layout to trigger the auto-calculation, but you only need to make one small adjustment to trigger the auto-calculation for an entire fixed layout. For example, resizing one widget on a page, section, Card widget triggers the auto-calculation for the entire page, section, or Card widget.
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 A11Y button at the lower right corner of 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 in the Default tab of the template gallery.
- Billboard
- Dart
- Foldable
- JewelryBox
- Launchpad
- Plateau
- Tab
The ArcGIS Online tab of the template gallery lists Esri and user-created public templates. The following template is optimized for accessibility:
- Job Hunting (A11Y)
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 |
Themes and colors
The app theme determines the colors in an app. The six default themes—Default, Dark, Ink, Violet, Vivid, and Organization Shared—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 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 un-link, but you can click Reset to re-link 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
The following widgets support accessibility. There are some exceptions for specific features and arrangement styles. Exceptions are noted.
| Widget | Accessibility status | Notes |
|---|---|---|
| Accordion | 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 | |
| Filter | Supported | |
| Fixed Panel | 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. |
| Menu | Supported | |
| Placeholder | Supported | |
| Supported with limits | Only Classic mode is supported. | |
| Row | Supported | |
| Search | Supported | |
| Share | Supported | |
| Survey | Supported | |
| Swipe | Supported with limits | The advanced templates are not supported by the keyboard. |
| Table | Supported with limits | Selecting table records is not supported by the keyboard. |
| 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. |