Web AppBuilder for ArcGIS

How accessibility features work in Web AppBuilder apps

Accessibility support is an important goal at Esri. Creating accessible web content, including accessible apps, can benefit people with disabilities, and also provide a better user experience for everyone.

 

Web AppBuilder and accessibility

Web AppBuilder is used to convey information with maps and map data. Accessibility support specific to map interactions and visualizations of map data, however, is limited for now.

While the development team strives for continued Section 508 and WCAG 2.0 compliance, here are some helpful tips to consider as you use or create Web AppBuilder apps.

 

Keyboard navigation

Navigate between sections

In different themes, there may be some divided sections in addition to the map. Examples include the header controller in the foldable theme, side panels in the jewelry box and tab themes, and the hidden skip links at the top left of the app.

You can navigate between these sections by using the Esc key, without the need to tab through all the elements within them.

Web AppBuilder app with sections labeled and arrows showing how the Esc key navigates between them
Use the Esc key to quickly navigate through sections in Web AppBuilder apps.

You can also use the Skip links to quickly direct keyboard focus to other sections.

Skip to Map link highlighted in a portion of a sample app with a side panel
Use the Skip links to quickly direct focus to other sections in the app.

Navigate widgets

Widgets are key components in Web AppBuilder apps. Depending on the functionality, there are three ways to interact with the widgets:

1. Single off-panel widgets on screen (such as Default Extent, Full Screen, My Location)

These widgets are treated as a button and can be activated with the Enter key.

Single off-panel widgets highlighted in a portion of a sample app
Single off-panel widgets appear in the app as buttons, which you can activate with the Enter key.

2. Off-panel widgets with more than one element (such as Zoom Slider, Extent Navigate, Search)

These widgets are treated as a container. Use the Enter key to focus on the elements inside and the Esc key to return focus to the container itself.

If a widget panel has a container as a component inside it, you can also use the Enter key to focus inside and the Esc key to focus backwards.

Widgets that contain multiple focusable elements
When widgets have multiple focusable elements inside, you can use the Enter key to move focus inside the widget and the Esc key to return focus to the widget.
Layer List widget with a labeled arrow pointing to one of its elements, indicating that you can use the Enter key to move focus inside a component
When components have multiple focusable elements inside, you can use the Enter key to move focus inside the component and the Esc key to return focus to the component.

3. In-panel widgets set in the controller or placeholder (such as Filter, Bookmark)

These widgets are similar to a button. Use the Enter key to open the widget panel, which focuses on elements inside the widget. Then, press Tab or Shift+Tab to navigate through the elements and press the Esc key to focus on the close button or back button.

When the keyboard focus is on the close button or back button, use one of the following keys:

Bookmark widget with labeled arrows showing how the Enter key moves focus inside the widget panel and the Esc key moves focus out of the panel

Navigate out of the web app

To move the keyboard focus out of the app, navigate to the last focusable element in the app (such as the Attribute Table widget in the image below), and use one of the following methods:

Sample app with focus on the last focusable element and labeled arrows indicating that you tab twice to move out of the app
On the last focusable element (the attribute table, in this example), tab once to get the screen reader hint (if applicable), and tab again to move out of the app.

Use the Esc key

To summarize, use the Esc key when you need to:

Filter widget with tool choices highlighted and a label indicating that you can use the Esc key to close the pop-up menu
Use the Esc key to close pop-up menus.

 

Alt text

Web AppBuilder provides the options to add alt text for images, maps, charts, and so on.

For uploaded images, the alt text comes from the image file name.

Configuration window for the Infographic widget with labeled arrow indicating that uploaded images use the file name for the alt text
Alt text for uploaded images comes from the file name.

 

More information

Look for more blogs about accessibility of Web AppBuilder apps to be posted in the near future.

About the author

Product Engineer on Web AppBuilder and Experience Builder team. Big fan of aquariums.

Next Article

Getting to Know the Data Loading Tools

Read this article